原生js实现网页触屏滑动

前言：

      我有一个html格式的2048游戏，可以用键盘上下左右操作，但是放到手机上就抓瞎了。于是想修改一下代码，将键盘事件改成手机触屏事件。

 

html5 的touch事件

     html5支持touch事件，虽然功能不多，兼容性也不是很好，但是好在不用其他库而且逻辑简单以便于封装自己的功能

     说明：

     元素监听开始滑动事件，获取初始的x,y坐标值。监听滑动事件在滑动过程中监听x,y坐标的值变化。监听停止滑动事件，获得最后的x,y坐标值。然后计算x,y坐标值的变化趋势。

     如果x/y的绝对值大于2，说明在x轴上走了更长的路，也就是说应该是左右滑动。如果x大于0，则说明最后的位置在起始位置的右边，否则左边，对应右滑和左滑。

     同理，如果y/x的绝对值大于2，说明y轴上走了更长的路，应该是上下滑动。如果y小于0，说明起始位置在最后位置的下面，所以应该是上滑。反之同理。

     注意：坐标轴应该是从(0,0)开始向右下增加；然后这个x和y的比例只是说明一下向左向右偏移的程度。也可以设置为一半对一半。

     问题：事件等到停止滑动之后才响应，看起来有些滞后，体验不是很好，这个看后面能不能调整算法来做，如果在滑动过程中就计算偏移量得出滑动趋势，会有一次滑动触发多次的滑动事件的问题，使反映过于灵敏，如果按着转圈，游戏就会抽风。

var fromx=0.0,fromy=0.0,endx=0.0,endy=0.0,x=0.0,y = 0.0;
            var panel = document.getElementById("gamePanel");
            panel.addEventListener("touchstart",function(event){
                if (event.targetTouches.length == 1) {
                    var touch = event.targetTouches[0];
                    fromx = touch.screenX;
                    console.log(fromx);
                    fromy = touch.screenY;
                }
            });
            panel.addEventListener("touchmove",function(event){
                if (event.targetTouches.length == 1) {
                    event.preventDefault();
                    var touch = event.targetTouches[0];
                    endx = touch.screenX;
                    endy = touch.screenY;
                }


            });
            panel.addEventListener("touchend",function(event){
                event.preventDefault();
                var move = false;
                x = endx - fromx;
                y = endy - fromy;
                console.log(x);
                console.log(y);
                if(Math.abs(x/y)>=2.0 && x>=0.0 ){
                    //right
                    move = rightAction();
                }else if(Math.abs(x/y)>=2.0 && x<=0.0){
                    //left
                    move = leftAction();
                }else if(Math.abs(y/x)>=2.0 && y<=0.0){
                    //上
                    move = upAction();
                }else if(Math.abs(y/x) >=2.0 && y>=0.0){
                    //下
                    move = downAction();
                }
｝

 

参考资料：

http://blog.sina.com.cn/s/blog_51048da70101f0ex.html

http://blog.csdn.net/fuqinyijiu/article/details/41315123