前言：
我有一个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();
}
｝
参考资料：