基于touchmove事件模拟水果忍者

最新推荐文章于 2024-10-10 16:27:07 发布

转载最新推荐文章于 2024-10-10 16:27:07 发布 · 715 阅读

文章标签：

本文介绍如何使用移动JS的touchmove事件在移动浏览器中实现水果忍者的功能，通过编写一段代码成功模拟游戏效果。

 
  在前面一篇博文中，我曾经说过可以使用移动JS的touchmove事件在移动浏览器中模拟水果忍者的实现。这几天我尝试写了一段代码，成功实现了这一效果。
 
 代码如下
 <!DOCTYPE html PUBLIC "-
 
 
 //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /><!-- 锁定页面，禁止放大和缩小 -->  
 <title>切水果</title>  
 <script type="text/javascript">  
 Array.prototype.remove = function(obj) {  
     for (i in this) {  
         if (this[i] === obj) {  
             this.splice(i, 1);  
             break;  
         }  
     }  
 }  
   
 var colors = new Array("#0f3bf5", "#13ff61", "#ffc000", "0bf1ff", "#720bff", "#000000");  
   
 function BasicObject(x, y, order) {  
     this.x = x;  
     this.y = y;  
     this.order = isNaN(order) ? 0 : order;  
       
     this.addTo = function(array) {  
         array.push(this);  
         array.sort(function(a, b) {return a.order - b.order;});  
     }  
       
     this.removeFrom = function(array) {  
         array.remove(this);  
     }  
 }  
   
 function Fruit(x, y, order) {  
     BasicObject.call(this, x, y, order);  
     this.color = colors[parseInt(Math.random() * 1000) % 7];  
     this.speed = -250;  
     this.r = 30;  
       
     this.draw = function(context) {  
         context.save();  
         context.beginPath();  
         context.fillStyle = this.color;  
         context.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);  
         context.fill();  
         context.restore();  
     }  
       
     this.update = function(context, array, dt) {  
         this.y += this.speed * dt;  
         this.speed += 80 * dt;  
           
         if (this.y > context.canvas.height + this.r) {  
             this.removeFrom(array);  
         }  
     }  
 }  
 Fruit.prototype = new BasicObject();  
   
 function Engin() {  
     var canvas = document.getElementById("canvas");  
     var ctx = canvas.getContext("2d");  
       
     var buffer = document.createElement("canvas");  
     buffer.width = canvas.width;  
     buffer.height = canvas.height;  
     bufCtx = buffer.getContext("2d");  
       
     var list = new Array();  
       
     var ltime = new Date().getTime();  
     const FPS = 30;  
     var timer = 0;  
       
     this.update = function() {  
         var ctime = new Date().getTime();  
         var dt = (ctime - ltime) / 1000;  
         ltime = ctime;  
           
         ctx.clearRect(0, 0, canvas.width, canvas.height);  
         bufCtx.clearRect(0, 0, buffer.width, buffer.height);  
           
         for (i in list) {  
             if (list[i].update) {  
                 list[i].update(bufCtx, list, dt);  
             }  
         }  
           
         for (i in list) {  
             if (list[i].draw) {  
                 list[i].draw(bufCtx);  
             }  
         }  
           
         timer += dt;  
         if (timer > 1) {  
             new Fruit((Math.random() * 1000) % canvas.width, canvas.height + 6).addTo(list);  
             timer = 0;  
         }  
           
         ctx.drawImage(buffer, 0, 0);  
     }  
       
     this.start = function() {  
         document.addEventListener("touchmove", this.cut, false); // 注册touch move事件处理方法为this.cut  
         setInterval(this.update, 1000 / FPS);  
     }  
       
     this.cut = function(event) {  
         event.preventDefault(); // 禁止浏览器默认touch move事件，一般为页面拖拽  
         // 获取当前手指位置  
         var x = event.changedTouches[0].pageX - 4;  
         var y = event.changedTouches[0].pageY - 4;  
         // 与数组中的水果对象逐一比对，手指位置如果在水果范围内，则水果被切到，标记为红色  
         for (var i = 0; i < list.length; i++) {  
             if ((list[i].x - x) * (list[i].x - x) + (list[i].y - y) * (list[i].y - y) < list[i].r * list[i].r) {  
                 list[i].color = "#e61717";  
             }  
         }  
     }  
 }  
   
 window.onload = function() {  
     new Engin().start();  
 }  
 </script>  
 </head>  
   
 <body>  
     <canvas id="canvas" width="300px" height="450px">  
         <p>Your browser does not support the canvas element!</p>  
     </canvas>  
 </body>  
 </html>  
 

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

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