原生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