“HTML5工程师”这个职位也可以说是如日中天，越来越火，市场上也越来越缺乏H5优秀的工程师，下面是H5开发的一款斗牛小游戏，相信很多人都玩过，如果大神看到请赐教，小白看到就跟着小编我一起好好学习吧~
2.兼容性：苹果设备微信强制使用的是os的浏览器safar，页面访问的体验远大于安卓；安卓情况比较乱套：知乎上有人说是微信6.0.2以上是强制使用的QQ的X5浏览器，但是实际情况来看（公司范围），一部分手机如（魅族，小米，一加，三星，LG等）使用的是X5内核，另一部分如（nexus，国靖的小米）使用的是chrome的内核， 由此来看，安卓上的访问情况大部分不容乐观，会不支持某些属性和出现一些异常。 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() }); |
总结起来就两点： 1.简单，随时随地能立马玩儿起来! 2.可以在朋友圈进行分享。 只要这两点，就能获得大量的用户。 |
