我用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; }
一个蛇身节点就是：
<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")); }
其他的大家应该就明白了，主要实现食物、越界判断、撞自己判断、吃食物判断、变长、变快、记分等。
上代码：
1 <html> 2 <head> 3 <title>Snaker</title> 4 <link rel="stylesheet" href="style/style.css" type="text/css" /> 5 <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> 6 <script type="text/javascript" src="js/jquery.timers-1.2.js"></script> 7 <script type="text/javascript"> 8 var x = 0; 9 var y = 0; 10 var step = 20; 11 var dir = "right"; 12 var initNodeCount = 4; 13 var snakeLength; 14 //生成新节点 15 function getNewNode(id) { 16 return $('<img id="' + id + '" class="game" src="Images/node.ico" />'); 17 }; 18 //判断是否位置相同，即碰撞测试 19 function isSamePosition(id1, id2) { 20 //alert(id1 + "_" + id2); 21 return ($('#' + id1).css("left") == $('#' + id2).css("left") && $("#" + id1).css("top") == $('#' + id2).css("top")); 22 }; 23 //初始化节点 24 function initPositions() { 25 var i; 26 for (i = initNodeCount - 1; i >= 0; i--) { 27 getNewNode('node' + i).appendTo("body"); 28 $("#node" + i).css("left", 100 - step * i); 29 $("#node" + i).css("top", 0); 30 } 31 snakeLength = initNodeCount; 32 }; 33 //更新节点位置 34 function updatePositions() { 35 var i; 36 for (i = snakeLength - 1; i > 0; i--) { 37 $("#node" + i).css("left", $("#node" + (i - 1)).css("left")); 38 $("#node" + i).css("top", $("#node" + (i - 1)).css("top")); 39 } 40 $("#node0").css("top", y); 41 $("#node0").css("left", x); 42 if (x < 0 || x > window.innerWidth || y < 0 || y > window.innerHeight) { 43 alert("你一头撞到屏幕边缘上了！有木有！！！"); 44 location.reload(); 45 } 46 for (i = snakeLength - 1; i > 0; i--) { 47 if (isSamePosition("node" + i, "node0")) { 48 alert("你一口咬到自己屁屁上了！有木有！！！"); 49 location.reload(); 50 } 51 } 52 }; 53 //吃掉食物 54 function eatFood() { 55 if (isSamePosition("node0", "food")) { 56 getNewNode('node' + snakeLength).appendTo('body'); 57 $(('#node' + snakeLength)).css("left", -100); 58 snakeLength = snakeLength + 1; 59 createFood(false); 60 }; 61 }; 62 //创建新食物 63 function createFood(isNew) { 64 var fx = Math.random(); 65 fx = Math.round(fx * 20) * 20; 66 var fy = Math.random(); 67 fy = Math.round(fy * 20) * 20; 68 if (isNew) { 69 $('<img id="food" class="game" src="Images/food.ico" />').appendTo('body'); 70 } 71 $('#food').css("left", fx); 72 $('#food').css("top", fy); 73 }; 74 //启动定时器 75 function startTimer() { 76 $('body').everyTime(300, 'MainTimer', function () { 77 //alert(dir); 78 if (dir == "right") { 79 x = x + step; 80 } else if (dir == "left") { 81 x = x - step; 82 } else if (dir == "down") { 83 y = y + step; 84 } else if (dir == "up") { 85 y = y - step; 86 } 87 updatePositions(); 88 eatFood(); 89 }); 90 }; 91 $(function () { 92 initPositions(); 93 createFood(true); 94 //暂停、继续 95 $('#startStop').toggle( 96 function () { 97 $('body').stopTime('MainTimer'); 98 }, 99 function () { 100 startTimer(); 101 } 102 ); 103 //定时器 104 startTimer(); 105 //键盘响应 106 $(document).keydown(function (event) { 107 event = event || window.event; 108 if (event.keyCode == 38 && dir != "down") { 109 dir = "up"; 110 } else if (event.keyCode == 37 && dir != "right") { 111 dir = "left"; 112 } else if (event.keyCode == 39 && dir != "left") { 113 dir = "right"; 114 } else if (event.keyCode == 40 && dir != "up") { 115 dir = "down"; 116 }; 117 }); 118 }); 119 120 </script> 121 </head> 122 <body> 123 <button type="button" id="startStop"> 124 开始/停止</button> 125 </body> 126 </html>
初学jQuery，经验尚浅，有很多做的不好的地方，希望大家批评指正。