记录如何使用jquery开发贪吃蛇小游戏
我用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>
View Code
初学jQuery,经验尚浅,有很多做的不好的地方,希望大家批评指正。