我用JQuery有一段时间了，越来越体会到其强大之处，于是自己尝试写了一个贪吃蛇小游戏，拿来与网友分享一下。

 

1. 了解JQuery.Timers

 

除用到了jQuery1.5.1之外，我还用到了jQuery.timers-1.2，作为定时器。它比Js的setInterval函数提供了更友好的接口。

JQuery Timers提供了三个函数：

1. everyTime(时间间隔, [定时器名称], 函式名称, [次数限制], [等待函式程序完成])

2. oneTime(时间间隔, [定时器名称], 呼叫的函式)

3. stopTime ([定时器名称], [函式名称])

示例：

1 $('body').everyTime(300, 'MainTimer', function () {2     //do something every 300ms.   3 }

把定时器放到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;}

一个蛇身节点就是：

在定时器回调中，当要更新蛇身位置时，从后往前遍历节点，逐一设置为上一个节点的位置，即实现了向前移动：

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"));}

其他的大家应该就明白了，主要实现食物、越界判断、撞自己判断、吃食物判断、变长、变快、记分等。

上代码：

1   2   3       4     
        5       6       7     121 122 123     124         开始/停止125 126 

初学jQuery，经验尚浅，有很多做的不好的地方，希望大家批评指正。