前言:

我有一个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

原生js实现网页触屏滑动的更多相关文章

  1. 自己用原生JS写的轮播图,支持移动端触屏滑动,面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  2. JS移动客户端--触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  3. JS移动客户端--触屏滑动事件 banner图效果

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  4. JS案例之5——移动端触屏滑动

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  5. js实现touch移动触屏滑动事件

    在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类 似的对象).这个对象封装一次屏幕触摸,一般来自于手指. ...

  6. 移动端触屏滑动,JS事件

    先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等 ...

  7. 手机触屏滑动图片切换插件swiper.js

    今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  8. JS移动客户端--触屏滑动事件及js手机拖拽效果

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  9. Hammer.js移动端触屏框架的使用

    hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...

随机推荐

  1. 在离线环境中发布.NET Core至Windows Server 2008

    在离线环境中发布.NET Core至Windows Server 2008 0x00 写在开始 之前一篇博客中写了在离线环境中使用.NET Core,之后一边学习一边写了一些页面作为测试,现在打算发布 ...

  2. [LeetCode] Swap Nodes in Pairs 成对交换节点

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  3. Apache Storm 的历史及经验教训&mdash;&mdash;Nathan Marz【翻译】

    英文原文地址 中英文对照地址 History of Apache Storm and lessons learned --项目创建者 Nathan Marz Apache Storm 最近成为了ASF ...

  4. 分享一个ASP.NET 文件压缩解压类 C#

    需要引用一个ICSharpCode.SharpZipLib.dll using System; using System.Collections.Generic; using System.Linq; ...

  5. ajax简单案例:返回json型

    主页: <!--输入代号点击查询查到本代号的人名--> <body> <div> 请输入代号:<input type="text" id= ...

  6. border-radius 样式表CSS3圆角属性

    border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...

  7. movzbl和movsbl

    汇编语言中最最常用的指令 -- 数据传送指令,也是我们接触的第一种类别的汇编指令.其指令的格式为:“mov 源操作数, 目的操作数”.mov系列支持从最小一个字节到最大双字的访问与传送.其中movb用 ...

  8. 织梦DEDECMS网站首页如何实现分页翻页

    织梦DEDECMS模板网站首页如何实现首页分页和翻页 方法如下:(三种方法,自己选择一种来实现分页吧) 第一种:调用ajax和参数的(不推荐)1.必须在DEDE首页模板中的<head>&l ...

  9. Android 颜色大全 (colors.xml )

    <resources> <color name="pink">#ffc0cb</color><!--粉红色 --> <colo ...

  10. 关于iOS开发首次进入需要获取地理位置

    今天给大家简单介绍一下iOS开发过程中会遇到的获取地理位置的问题,(话不多说进入正题)这里给大家讲解一下两种在APPdelegate获取地理位置的方法: 一:首先是用系统的方法获取地理位置: 1. 首 ...