一个关于重力感应的H5小游戏

1. 开发内容：主要是根据移动端的重力感应事件来实现游戏。
2. 然后先来贴一个坑：IOS 9上为什么不能运行我的游戏呢？因为我写了几个let定义啊，混蛋！

1.对图片进行预加载（优化用户体验并且canvas所用图片没有预加载无法生成）

    <!--html中 preload -->
    <!--图片预加载 list-->
    <div class="preload-list">
      <img loadsrc="images/shaozi.png" alt=""/>
      <img loadsrc="images/processBar.png" alt=""/>
    </div>
    <!--进度条-->
    <div id="preload-percentText">0%</div>
        <progress value="0" max="100" class="processBar"></progress>
      </div>
    </div>
复制代码

    // 预加载图片
  var Preload = {
    imglist: [],
    percent: 0,
    down: 0,

    complete: function() {
      Game.init();

      Utils.hideItem($(".preload"), 500, function() {
        Utils.showItem($(".rule-show-page"));
        Game.showWish();
      });
    },

    update: function() {
      var that = this;
      that.down++;
      that.percent = Math.ceil(that.down / that.imglist.length * 100);
      $("#preload-percentText").html(that.percent + "%");
      // 实现进度条的动态加载
      $(".processBar").val(that.percent);
      if (that.down == that.imglist.length) {
        that.complete();
      }
    },
    //图片list加载
    loadImage: function() {
      var that = this;
      var list = that.imglist;
      for (var i = 0; i < list.length; i++) {
        var imgs = new Image();
        imgs.src = list[i];
        if (imgs.complete) {
          that.update();
        } else {
          imgs.onload = function() {
            that.update();
          }
        }
      }
    },
    //创建图片list
    createList: function() {
      var l = $(".preload-list img").length;
      for (var i = 0; i < l; i++) {
        var src = $(".preload-list img").eq(i).attr("loadsrc");
        $(".preload-list img").eq(i).attr("src", src);
        this.imglist.push(src);
      }
      this.loadImage();
    },
    //初始化
    init: function() {
      this.createList();
    }
  };


  // start ------------------------------------------------------------------------------
  Preload.init();
});
复制代码

并且在图片加载中实现进度条的动态显示。

2. 音乐的播放

ios 不支持自动播放，所以需要对播放事件兼容处理

//在初始化的时候调用处理好的方法
  audioAutoPlay('myAudio');
  
// 自动播放
function audioAutoPlay(id){
  var audio = document.getElementById(id),
    play = function(){
      audio.play();
      document.removeEventListener("touchstart",play,false);
    };
  audio.play();
  document.addEventListener("WeixinJSBridgeReady",function() {
    play();
  },false);
  document.addEventListener('YixinJSBridgeReady',function() {
    play();
  },false);
  document.addEventListener("touchstart",play,false);
}
复制代码

3. 封装页面切换效果

对页面的切换添加动画,关闭页面 Utils.hideItem($(".gameStar"), 500)

  var Utils = {
    hideItem: function(el, speed, callback) {
      var style = 'display:block;opacity:0;-webkit-transition:all ' + speed / 1000 + 's;';
      el.attr('style', style);
      setTimeout(function() {
        el.attr('style', 'display:none;');
        callback && callback();
      }, speed);
      return this;
    },

    showItem: function(el, speed, callback) {
      var style = 'display:block;opacity:0.01;';
      el.attr('style', style);
      setTimeout(function() {
        el.attr('style', 'display:block;opacity:1;' +
          '-webkit-transition:all ' + (speed - 100) / 1000 + 's;');
      }, 100);
      setTimeout(function() {
        callback && callback();
      }, speed);
      return this;
    }
  };
复制代码

4. canvas画图生成图片,用户可以长按后识别二维码

convert2canvas:function(rank,beatPercent,foodQuantity) {
      var that = this
      var c=document.getElementById("myCanvas");

      $('#myCanvas').attr('width',$(document.body).width())
      $('#myCanvas').attr('height',"945")
   
      var cxt=c.getContext("2d");
      var img=new Image()
      img.src="./images/posterWin50.jpg"
      cxt.drawImage(img,0,0);
   
      var txt2 = '要写的文字'
      cxt.font = "45px pictos"
      var halfWidthBeat = ($(document.body).width() -cxt.measureText(txt2).width)/2
      cxt.fillText(txt2, halfWidthBeat, 380);
      cxt.save();
      
      that.source = {pic: "", text: ""};
      that.source.pic = new Image();
      that.source.pic.src = c.toDataURL("image/jpeg", 1);
      $(".poster-win-page .showImg").attr("src", that.source.pic.src);
    }
复制代码

5. 设置H5在微信端的分享文字、标题、图片

//判断是否微信登陆
function isWeiXin() {
  var ua = window.navigator.userAgent.toLowerCase();
  console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    return true;
  } else {
    return false;
  }
}
// 首页分享信息
function wxInit(signature,timestamp,noncestr,appId) {
  var links=location.href;   //分享出去的链接
  var title="title！";   //分享的标题
  var image="images/share.png";
  var desc="加入我们";  //分享的详情介绍

  wx.config({
    debug: false,
    appId: appId,
    timestamp: timestamp,
    nonceStr: noncestr,
    signature: signature,
    jsApiList: [
      'onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo'
    ]
  });

  wx.ready(function () {
    wx.onMenuShareTimeline({
      title: title, // 分享标题
      link: links, // 分享链接'
      desc: desc, // 分享描述
      imgUrl: image, // 分享图标
      success: function () {
        // 分享纪录
        //shareRecord();
        console.log("分享到朋友圈成功")
      },
      cancel: function () {
        console.log("分享失败,您取消了分享!")
      }
    });
    //微信分享菜单测试
    wx.onMenuShareAppMessage({
      title:title, // 分享标题
      desc: desc, // 分享描述
      link: links, // 分享链接
      imgUrl: image, // 分享图标
      success: function () {
        // 分享纪录
        //shareRecord();
        console.log("成功分享给朋友")
      },
      cancel: function () {
        console.log("分享失败,您取消了分享!")
      }
    });

    wx.onMenuShareQQ({
      title:title, // 分享标题
      desc: desc, // 分享描述
      link:links, // 分享链接
      imgUrl: image, // 分享图标
      success: function () {
        // 分享纪录
        //shareRecord();
        console.log("成功分享给QQ")
      },
      cancel: function () {
        console.log("分享失败,您取消了分享!")
      }
    });
    wx.onMenuShareWeibo({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: links, // 分享链接
      imgUrl:image, // 分享图标
      success: function () {
        // 分享纪录
        //shareRecord();
        console.log("成功分享给朋友")
      },
      cancel: function () {
        console.log("分享失败,您取消了分享!")
      }
    });
  });
  wx.error(function(res){
    console.log(res);
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
  });
}

if(isWeiXin()){
    $.ajax({
      type : "Get", //提交方式
      // url : "http://taobao-be.o2ojie.com/api/v1/weixin/signature?url="+encodeRequestUrl,//路径
      url : 'http://weisite.inrice.top/wechat/jssdk?url='+encodeRequestUrl,//路径
      success : function(response) {//返回数据根据结果进行相应的处理

          var obj = JSON.parse(response)
          var signature = obj.signature;
          var timestamp=obj.timestamp;
          var noncestr=obj.nonceStr;
          var appId = obj.appId;
          wxInit(signature,timestamp,noncestr,appId,schoolName);
      }
    });
  }
}
复制代码

6.重力感应效果的实现

先占个坑....
复制代码

转载于:https://juejin.im/post/5c1654156fb9a049fb438f17