原生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();
}

原生js实现网页触屏滑动

参考资料:

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

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

上一篇:[转]软件开发规范—模块开发卷宗(GB8567——88)


下一篇:poj2142-The Balance(扩展欧几里德算法)