限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： muyang-0410
“HTML5工程师”这个职位也可以说是如日中天，越来越火，市场上也越来越缺乏H5优秀的工程师touchmove事件，下面是H5开发的一款斗牛小游戏，相信很多人都玩过，如果大神看到请赐教，小白看到就跟着小编我一起好好学习吧~
布局的时候，如果一个元素你想让他的宽高保持一定比例，而不随屏幕变化，宽高设置的时候，使用同一个单位都是CSS3的单位，低版本不兼容 1.移动端页面布局，使用相对的数值，不要使用绝对数值，推荐使用%，vw，vh，rem，em
2.兼容性：苹果设备微信强制使用的是os的浏览器safar，页面访问的体验远大于安卓；安卓情况比较乱套：知乎上有人说是微信6.0.2以上是强制使用的QQ的X5浏览器，但是实际情况来看（公司范围），一部分手机如（魅族，小米，一加，三星，LG等）使用的是X5内核，另一部分如（nexus，国靖的小米）使用的是的内核， 由此来看，安卓上的访问情况大部分不容乐观，会不支持某些属性和出现一些异常。
3.经验之谈：UI给出的设计图越来越美观了，但是对于前端的要求就变高了，写页面之前，良好的页面结构设计可以极大地丰富了兼容性和扩展性，这个东西没有对错之分，只有好和更好。
4.移动端的动画：这次我使用的是.，出现情况，ios上各个设备均正常，但是安卓方面X5内核的动画卡顿严重。查阅资料，移动端的动画大部分使用CSS3和zepto.js，尽量不使用的，对于移动端的游戏动画，流行。
5.touch事件：安卓支持click事件touchmove事件，但是ios不支持，推荐使用touch事件；touch事件基本类型：,,,
对于之前需求中的判定向上滑动，向左滑动，向右滑动等推荐使用以下代码进行处理：
//返回角度
(dx, dy) {
Math.atan2(dy, dx) * 180 / Math.PI;
//根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
(, , endX, endY) {
var dy = – endY;
var dx = endX – ;
var = 0;
//如果滑动距离太短
if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
;
var angle = (dx, dy);
if (angle >= -45 && angle < 45) {
= 4;
} else if (angle >= 45 && angle < 135) {
= 1;
} else if (angle >= -135 && angle < -45) {
= 2;
else if ((angle >= 135 && angle = -180 && angle < -135)) {
= 3;
;
//滑动处理
var , ;
.(”, (ev) {
= ev.[0].pageX;
= ev.[0].pageY;
}, false);
.(”, (ev) {
var endX, endY;
endX = ev.[0].pageX;
endY = ev.[0].pageY;
var = (, , endX, endY);
() {
case 0:
alert(“没滑动”);
break;
case 1:
alert(“向上”);
break;
case 2:
alert(“向下”);
break;
case 3:
alert(“向左”);
break;
case 4:
alert(“向右”);
break;
:
}, false);
6.禁止滑屏：手指按住页面进行滑动，页面的动画会停止，但是松手之后，动画已经完成，影响了用户体验，在某些情况下（页面只有一屏），应该禁止手指滑动，代码：
//禁止页面滚动
(){
var stop=0;
.(“”,(e){
if(stop==0){
e.();
e.();
},false);
7.音频：audio标签的自动播放，iOS不支持，并给出理由“这会导致用户的流量被偷取” 所以ios设备上禁止了自动播放功能，可以绑定事件，用户点击屏幕任何一处都可以触发音频播放。安卓支持自动播放。
8.推荐一个打乱数组顺序的简单的方法：
var boss = [1,2,3,4,5,6,7,8];
//打乱顺序
boss = boss.sort((){ 0.5 – Math.() });
H5游戏你可以看作是移动端的Web游戏，无需下载软件就可以体验，这就是H5在传播上的优势。一种快捷、即时性的游戏形式。
H5游戏的迅速流行告诉了大家，并不是画面极度精美，剧情严密的游戏才是游戏成功的唯一法则。虽然并不否认大型游戏能成功的说法，但随着人们闲暇时间的缩小，简单易上手的小游戏更能适应当下游戏发展的趋势。
随着朋友圈在最近几年疯狂的流行，越来越多的游戏从业者投入到H5游戏产业当中。相比较一个大型游戏创作的耗时耗力，H5游戏有着门槛更低、所需时间更少的优点。
你可以像写网页一样写游戏，不需要太多的额外学习。相信在不久的游戏行业，将会大量的涌现出一大批的H5游戏。
总结起来就两点：
1.简单，随时随地能立马玩儿起来!
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： muyang-0410
