- 开发内容:主要是根据移动端的重力感应事件来实现游戏。
- 然后先来贴一个坑: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.重力感应效果的实现
先占个坑....
复制代码