我用JQuery有一段时间了，越来越体会到其强大之处，于是自己尝试写了一个贪吃蛇小游戏，拿来与网友分享一下。
1. 了解JQuery.Timers
除用到了jQuery1.5.1之外，我还用到了jQuery.timers-1.2，作为定时器。它比Js的setInterval函数提供了更友好的接口。
JQuery Timers提供了三个函数：
1. everyTime(时间间隔, [定时器名称], 函式名称, [次数限制], [等待函式程序完成])
2. oneTime(时间间隔, [定时器名称], 呼叫的函式)
3. stopTime ([定时器名称], [函式名称])
示例：
$('body').everyTime(300, 'MainTimer', function () {
//do something every 300ms.
}
把定时器放到body上，确保定时器不会随被移除。
这样就能定时的更新贪吃蛇的位置，并且做一些逻辑判断。
2. 键盘响应
jquery提供了一系列的键盘事件函数：
1、keydown()
keydown事件会在键盘按下时触发.
2、keyup()
keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件
3、keypress()
keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键
可以通过回调函数的参数event.keyCode来获取
$(document).keydown(function(event){
if(event.keyCode == 37){//左方向键
//do somethings;
}else if (event.keyCode == 39){//右方向键
//do somethings;
}
});
所有的键盘代码表，可参考这篇博文
3. 创建、移动蛇身
蛇身是一系列的img标记，使用一个小的方形图片，为了能固定位置，需要将样式设置为：
.game{
position: fixed;
/* 为了兼容IE7 */
_position: absolute;
}
一个蛇身节点就是：
<img id="node1" class="game" src="Images/node.ico" />
在定时器回调中，当要更新蛇身位置时，从后往前遍历节点，逐一设置为上一个节点的位置，即实现了向前移动：
var i;
for (i = snakeLength - 1; i > 0; i--) {
$("#node" + i).css("left", $("#node" + (i - 1)).css("left"));
$("#node" + i).css("top", $("#node" + (i - 1)).css("top"));
}
其他的大家应该就明白了，主要实现食物、越界判断、撞自己判断、吃食物判断、变长、变快、记分等。
上代码：
<html>
<head>
<title>Snaker</title>
<link rel="stylesheet" href="style/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery.timers-1.2.js"></script>
<script type="text/javascript">
var x = 0;
var y = 0;
var step = 20;
var dir = "right";
var initNodeCount = 4;
var snakeLength;
//生成新节点
function getNewNode(id) {
return $('<img id="' + id + '" class="game" src="Images/node.ico" />');
};
//判断是否位置相同，即碰撞测试
function isSamePosition(id1, id2) {
//alert(id1 + "_" + id2);
return ($('#' + id1).css("left") == $('#' + id2).css("left") && $("#" + id1).css("top") == $('#' + id2).css("top"));
};
//初始化节点
function initPositions() {
var i;
for (i = initNodeCount - 1; i >= 0; i--) {
getNewNode('node' + i).appendTo("body");
$("#node" + i).css("left", 100 - step * i);
$("#node" + i).css("top", 0);
}
snakeLength = initNodeCount;
};
//更新节点位置
function updatePositions() {
var i;
for (i = snakeLength - 1; i > 0; i--) {
$("#node" + i).css("left", $("#node" + (i - 1)).css("left"));
$("#node" + i).css("top", $("#node" + (i - 1)).css("top"));
}
$("#node0").css("top", y);
$("#node0").css("left", x);
if (x < 0 || x > window.innerWidth || y < 0 || y > window.innerHeight) {
alert("你一头撞到屏幕边缘上了！有木有！！！");
location.reload();
}
for (i = snakeLength - 1; i > 0; i--) {
if (isSamePosition("node" + i, "node0")) {
alert("你一口咬到自己屁屁上了！有木有！！！");
location.reload();
}
}
};
//吃掉食物
function eatFood() {
if (isSamePosition("node0", "food")) {
getNewNode('node' + snakeLength).appendTo('body');
$(('#node' + snakeLength)).css("left", -100);
snakeLength = snakeLength + 1;
createFood(false);
};
};
//创建新食物
function createFood(isNew) {
var fx = Math.random();
fx = Math.round(fx * 20) * 20;
var fy = Math.random();
fy = Math.round(fy * 20) * 20;
if (isNew) {
$('<img id="food" class="game" src="Images/food.ico" />').appendTo('body');
}
$('#food').css("left", fx);
$('#food').css("top", fy);
};
//启动定时器
function startTimer() {
$('body').everyTime(300, 'MainTimer', function () {
//alert(dir);
if (dir == "right") {
x = x + step;
} else if (dir == "left") {
x = x - step;
} else if (dir == "down") {
y = y + step;
} else if (dir == "up") {
y = y - step;
}
updatePositions();
eatFood();
});
};
$(function () {
initPositions();
createFood(true);
//暂停、继续
$('#startStop').toggle(
function () {
$('body').stopTime('MainTimer');
},
function () {
startTimer();
}
);
//定时器
startTimer();
//键盘响应
$(document).keydown(function (event) {
event = event || window.event;
if (event.keyCode == 38 && dir != "down") {
dir = "up";
} else if (event.keyCode == 37 && dir != "right") {
dir = "left";
} else if (event.keyCode == 39 && dir != "left") {
dir = "right";
} else if (event.keyCode == 40 && dir != "up") {
dir = "down";
};
});
}); </script>
</head>
<body>
<button type="button" id="startStop">
开始/停止</button>
</body>
</html>
初学jQuery，经验尚浅，有很多做的不好的地方，希望大家批评指正。