H5游戏开发代码总结

<span style="font-family: Arial, sans-serif; background-color: rgb(255, 255, 255);">1.移动端页面布局,使用相对的数值,不要使用绝对数值,推荐使用%,vw,vh,rem,em</span>
布局的时候,如果一个元素你想让他的宽高保持一定比例,而不随屏幕变化,宽高设置的时候,使用同一个单位
都是CSS3的单位,低版本不兼容
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() });

注:官方介绍QQ浏览器X5内核是:基于开源webkit内核并进行  深度优化和合理扩展的优秀内核
对于前端来说,我只知道他对一些css不支持和一些奇异的现象。
1)img标签慎用,在未对其指定宽度和高度的时候会莫名的放大;在对其指定高度和宽度的时候,在某些情况下也会莫名的放大。
解决方法:div+background+background-sizing;
2)  @keyframe+animate CSS3的动画不支持。现在也没法判断到底是那条css不支持,但是两者从来都是一起用的。
解决办法:简单动画.gif 或者是div的background使用gif
3)  border 不支持,莫名的不支持。
解决办法:暂无。
4)box-shadow 显示不正常,会显示成一条类似border但无法控制宽度的边框。
解决办法:暂无。
5) vh 抽风式的无法正常支持:设置box的width为vw,height为vh,浏览器会吧height中的vh也当场vw解析,但是使用padding-top的时候使用vh就可以正常显示。
解决办法,固定比例固定尺寸的图片,节点等统一使用vw作为计量单位,纵向的边距什么的可以使用vh,实际情况动手实践。
6)对jquery.animate的支持不是很好,严重卡顿的情况。
解决办法:不要使用jquery 用 zepto。 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页