基于touchmove事件模拟水果忍者

转载 2012年03月27日 16:26:06

在前面一篇博文中,我曾经说过可以使用移动JS的touchmove事件在移动浏览器中模拟水果忍者的实现。这几天我尝试写了一段代码,成功实现了这一效果。

代码如下:

[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /><!-- 锁定页面,禁止放大和缩小 -->  
  6. <title>切水果</title>  
  7. <script type="text/javascript">  
  8. Array.prototype.remove = function(obj) {  
  9.     for (i in this) {  
  10.         if (this[i] === obj) {  
  11.             this.splice(i, 1);  
  12.             break;  
  13.         }  
  14.     }  
  15. }  
  16.   
  17. var colors = new Array("#0f3bf5", "#13ff61", "#ffc000", "0bf1ff", "#720bff", "#000000");  
  18.   
  19. function BasicObject(x, y, order) {  
  20.     this.x = x;  
  21.     this.y = y;  
  22.     this.order = isNaN(order) ? 0 : order;  
  23.       
  24.     this.addTo = function(array) {  
  25.         array.push(this);  
  26.         array.sort(function(a, b) {return a.order - b.order;});  
  27.     }  
  28.       
  29.     this.removeFrom = function(array) {  
  30.         array.remove(this);  
  31.     }  
  32. }  
  33.   
  34. function Fruit(x, y, order) {  
  35.     BasicObject.call(this, x, y, order);  
  36.     this.color = colors[parseInt(Math.random() * 1000) % 7];  
  37.     this.speed = -250;  
  38.     this.r = 30;  
  39.       
  40.     this.draw = function(context) {  
  41.         context.save();  
  42.         context.beginPath();  
  43.         context.fillStyle = this.color;  
  44.         context.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);  
  45.         context.fill();  
  46.         context.restore();  
  47.     }  
  48.       
  49.     this.update = function(context, array, dt) {  
  50.         this.y += this.speed * dt;  
  51.         this.speed += 80 * dt;  
  52.           
  53.         if (this.y > context.canvas.height + this.r) {  
  54.             this.removeFrom(array);  
  55.         }  
  56.     }  
  57. }  
  58. Fruit.prototype = new BasicObject();  
  59.   
  60. function Engin() {  
  61.     var canvas = document.getElementById("canvas");  
  62.     var ctx = canvas.getContext("2d");  
  63.       
  64.     var buffer = document.createElement("canvas");  
  65.     buffer.width = canvas.width;  
  66.     buffer.height = canvas.height;  
  67.     bufCtx = buffer.getContext("2d");  
  68.       
  69.     var list = new Array();  
  70.       
  71.     var ltime = new Date().getTime();  
  72.     const FPS = 30;  
  73.     var timer = 0;  
  74.       
  75.     this.update = function() {  
  76.         var ctime = new Date().getTime();  
  77.         var dt = (ctime - ltime) / 1000;  
  78.         ltime = ctime;  
  79.           
  80.         ctx.clearRect(0, 0, canvas.width, canvas.height);  
  81.         bufCtx.clearRect(0, 0, buffer.width, buffer.height);  
  82.           
  83.         for (i in list) {  
  84.             if (list[i].update) {  
  85.                 list[i].update(bufCtx, list, dt);  
  86.             }  
  87.         }  
  88.           
  89.         for (i in list) {  
  90.             if (list[i].draw) {  
  91.                 list[i].draw(bufCtx);  
  92.             }  
  93.         }  
  94.           
  95.         timer += dt;  
  96.         if (timer > 1) {  
  97.             new Fruit((Math.random() * 1000) % canvas.width, canvas.height + 6).addTo(list);  
  98.             timer = 0;  
  99.         }  
  100.           
  101.         ctx.drawImage(buffer, 0, 0);  
  102.     }  
  103.       
  104.     this.start = function() {  
  105.         document.addEventListener("touchmove", this.cut, false); // 注册touch move事件处理方法为this.cut  
  106.         setInterval(this.update, 1000 / FPS);  
  107.     }  
  108.       
  109.     this.cut = function(event) {  
  110.         event.preventDefault(); // 禁止浏览器默认touch move事件,一般为页面拖拽  
  111.         // 获取当前手指位置  
  112.         var x = event.changedTouches[0].pageX - 4;  
  113.         var y = event.changedTouches[0].pageY - 4;  
  114.         // 与数组中的水果对象逐一比对,手指位置如果在水果范围内,则水果被切到,标记为红色  
  115.         for (var i = 0; i < list.length; i++) {  
  116.             if ((list[i].x - x) * (list[i].x - x) + (list[i].y - y) * (list[i].y - y) < list[i].r * list[i].r) {  
  117.                 list[i].color = "#e61717";  
  118.             }  
  119.         }  
  120.     }  
  121. }  
  122.   
  123. window.onload = function() {  
  124.     new Engin().start();  
  125. }  
  126. </script>  
  127. </head>  
  128.   
  129. <body>  
  130.     <canvas id="canvas" width="300px" height="450px">  
  131.         <p>Your browser does not support the canvas element!</p>  
  132.     </canvas>  
  133. </body>  
  134. </html>  

代码依旧延续的是我一直使用的canvas处理架构,并且在Engin类中添加了对touchmove事件的处理:当touchmove事件所包含的手指数组中的元素的位置处于当前某个水果范围中时,将该水果标记为红色。由于本人不太擅长美工,所以水果一律用非红色的圆形代替,切到的水果用红色的圆形代替。

以上这段代码可以在Android 2.2以上系统的支持HTML5的浏览器中测试。本人使用的是小米手机(Android 2.3)的默认浏览器进行测试,效果良好,只是在手指快速滑动的时候会有较大的手指坐标的丢失。这是Android系统本身的问题,在本人之前分享的博文(http://select.yeeyan.org/view/213582/202991)中有所提及。相信在iOS中测试的效果会更佳。

cocos2d-x 自定义Touch事件处理类

对Touch事件的获取与处理可以使用CCLayer, CCMenuItem等,但是如果我们需要一个虚拟按键或者需要对特定精灵进行拖动等等,我们就需要自定义Touch类。   自定义Touch事件处...
  • xuguangsoft
  • xuguangsoft
  • 2013年04月09日 14:41
  • 3914

使用javascript实现手机上的touchmove效果

javascript 手机手势动作touch触屏原理分析
  • dongzhouT
  • dongzhouT
  • 2014年11月26日 15:43
  • 20369

移动端touchmove事件边界touchend不触发

做前端一年整,碰到不少问题,以前都是找资源,解决问题,不会去分享资源,这次是我第一次写博客,如果有什么问题,欢迎来交流。 在过去一年的时间里,我所接触的多有是移动端的项目,移动前端中,touch触...
  • qjl_0805
  • qjl_0805
  • 2016年06月28日 14:31
  • 3081

移动端 touchmove高频事件与requestAnimationFrame的结合优化

移动端最高频耗内存的的操作  莫属 touchmove 与scroll事件  两者需要 微观的 优化; 这里 我们 讲述 touchmove;touchmove 事件发生很频繁,会比屏幕...
  • shenlei19911210
  • shenlei19911210
  • 2016年04月28日 00:13
  • 3440

touchmove在android下面只触发一次的奇葩设定

touchmove事件只触发一次的问题   在Android下直接使用touchmove事件会在很多浏览器中出现每次操作只触发一次touchmove的情况。这是因为Android中对触屏事件奇葩解析造...
  • cdnight
  • cdnight
  • 2016年02月02日 19:04
  • 2199

web移动端:touchmove实现局部滚动

总结一下最近项目用到的一个功能点,具体要求如下: body中会呈现一个可滚动的长页面,在点击某个按钮的时候,会出现一个弹出框,由于弹出框的内容较长,会出现滚动条,但是要保证位于弹框下部的body在弹...
  • aiyishengyishi
  • aiyishengyishi
  • 2016年12月06日 15:16
  • 4050

基于touchmove事件模拟水果忍者

在前面一篇博文中,我曾经说过可以使用移动JS的touchmove事件在移动浏览器中模拟水果忍者的实现。这几天我尝试写了一段代码,成功实现了这一效果。 代码如下 //W3C//DTD...
  • nbu00319
  • nbu00319
  • 2013年04月24日 09:56
  • 514

HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主...
  • songchunmin_
  • songchunmin_
  • 2017年08月06日 00:58
  • 974

HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主...
  • Sy_Jayda
  • Sy_Jayda
  • 2016年03月24日 16:48
  • 1371

深入理解移动端touch事件

相关链接:http://blog.csdn.net/cometwo/article/details/50534611
  • cometwo
  • cometwo
  • 2016年05月23日 17:57
  • 5200
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:基于touchmove事件模拟水果忍者
举报原因:
原因补充:

(最多只允许输入30个字)