微信H5斗牛游戏开发总结，你想不想学H5？

3.经验之谈：UI给出的设计图越来越美观了，但是对于前端的要求就变高了，写页面之前，良好的页面结构设计可以极大地丰富了兼容性和扩展性，这个东西没有对错之分，只有好和更好。

4.移动端的动画：这次我使用的是jquery.animate，出现情况，ios上各个设备均正常，但是安卓方面X5内核的动画卡顿严重。查阅资料，移动端的动画大部分使用CSS3和zepto.js，尽量不使用jquery的，对于移动端的游戏动画，流行canvas。

5.touch事件：安卓支持click事件，但是ios不支持，推荐使用touch事件；touch事件基本类型：touchstart,touchmove,touchend,

对于之前需求中的判定向上滑动，向左滑动，向右滑动等推荐使用以下代码进行处理：

//返回角度

function GetSlideAngle(dx, dy) {

return Math.atan2(dy, dx) * 180 / Math.PI;

}

//根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动

function GetSlideDirection(startX, startY, endX, endY) {

var dy = startY - endY;

var dx = endX - startX;

var result = 0;

//如果滑动距离太短

if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {

return result;

}

var angle = GetSlideAngle(dx, dy);

if (angle >= -45 && angle < 45) {

result = 4;

} else if (angle >= 45 && angle < 135) {

result = 1;

} else if (angle >= -135 && angle < -45) {

result = 2;

}

else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {

result = 3;

}

return result;

}

//滑动处理

var startX, startY;

document.addEventListener('touchstart', function (ev) {

startX = ev.touches[0].pageX;

startY = ev.touches[0].pageY;

}, false);

document.addEventListener('touchend', function (ev) {

var endX, endY;

endX = ev.changedTouches[0].pageX;

endY = ev.changedTouches[0].pageY;

var direction = GetSlideDirection(startX, startY, endX, endY);

switch (direction) {

case 0:

alert("没滑动");

break;

case 1:

alert("向上");

break;

case 2:

alert("向下");

break;

case 3:

alert("向左");

break;

case 4:

alert("向右");

break;

default:

}

}, false);

6.禁止滑屏：手指按住页面进行滑动，页面的动画会停止，但是松手之后，动画已经完成，影响了用户体验，在某些情况下（页面只有一屏），应该禁止手指滑动，代码：

//禁止页面滚动

function forbidPageScroll(){

var stop=0;

document.addEventListener("touchmove",function(e){

if(stop==0){

e.preventDefault();

e.stopPropagation();

}

},false);

}

7.音频：audio标签的自动播放autoplay，iOS不支持，并给出理由“这会导致用户的流量被偷取” 所以ios设备上禁止了自动播放功能，可以绑定touchmove事件，用户点击屏幕任何一处都可以触发音频播放。安卓支持自动播放。

8.推荐一个打乱数组顺序的简单的方法：

var boss = [1,2,3,4,5,6,7,8];

//打乱顺序

boss = boss.sort(function(){ return 0.5 - Math.random() });