在前面一篇博文中,我曾经说过可以使用移动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中测试的效果会更佳。