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