基于touchmove事件模拟水果忍者
2012-03-27 16:26
183 查看
在前面一篇博文中，我曾经说过可以使用移动JS的touchmove事件在移动浏览器中模拟水果忍者的实现。这几天我尝试写了一段代码，成功实现了这一效果。
代码如下：
[html] view
plaincopy
<!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中测试的效果会更佳。
代码如下：
[html] view
plaincopy
<!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中测试的效果会更佳。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android基于坐标对View进行模拟点击事件
- 基于原生JavaScript进行扩展模拟用户长按事件（webapp）
- 脚本模拟事件机制，基于MVP重写声文同步（without dojo lib）
- Android如何基于坐标对View进行模拟点击事件详解
- C#模拟键盘鼠标事件
- adb命令模拟按键事件 KeyCode
- 基于【双密度松弛算法】的二维流体粒子模拟
- Android事件处理之一 基于监听的事件处理
- AJAX触发aspnet控件的C#事件（基于Jquery）
- 踩坑事件：不能对基于文本的临时表使用sql insert语句
- layui问题之模拟table表格中的选中按钮选中事件
- Android 事件处理详解（一） —— 基于监听的事件处理 1
- C# 调用API keybd_event 模拟键盘事件
- 【温故知新】C#基于事件的异步模式（EAP）
- Android 事件处理详解（一） —— 基于监听的事件处理 2
- [翻译]基于用户体验的性能测试：第三章 模拟个别的用户模式
- bitbucket基于commit事件的自动发布
- 用js模拟鼠标点击事件（事件触发）
- QT 模拟鼠标事件
- 基于事件的 JavaScript 编程：异步与同步