贪吃蛇的javascript实现

最近在学Javascript，花了半个月的时间终于把《Javascript权威指南》(推荐此书，入门级) 扫完。

在学习的过程中发现使用JS实现动态效果挺有趣的。

 

在习作的过程中尝试着贪吃蛇游戏用JS实现了。竟然成功了。

思路：使用10px*10px的div层担当“像素”，然后使用40*40矩阵160个“像素”构成了游戏的界面。

下面是代码：

 

1. // JavaScript Document
5. alert("键盘的方向键控制方向，空格键暂停。/nLIFE制作/nhttp://blog.csdn.net/anhulife");
8. // 添加基本的图形块，即160个10 * 10的层组成的二维矩阵
9. var rowindex = new Array(40);
10. var colindex;
11. var cell;
12. // 图像单元的定义
13. var backcolor = "black";
14. for(var i = 0; i < 40; i ++ )
15. {
16.    colindex = new Array(40);
17.    for(var j = 0; j < 40; j ++ )
18.    {
20.       // 设置每个单元的属性
21.       cell = document.createElement("div");
22.       cell.style.backgroundColor = backcolor;
23.       cell.style.width = "10px";
24.       cell.style.height = "10px";
25.       cell.style.position = "absolute";
26.       cell.style.left = "" + (j * 10 + 100) + "px";
27.       cell.style.top = "" + (i * 10 + 100) + "px";
28.       cell.style.overflow = "hidden";
31.       // 添加单元
32.       document.body.appendChild(cell);
33.       // 填充列组
34.       colindex[j] = cell;
35.    }
36.    // 填充行组
37.    rowindex[i] = colindex;
38. }
40. // 贪吃蛇类的定义，基于基本的图像单元
41. function snake()
42. {
44.    // 定义蛇的身体，并初始化
45.    this.bodycolor = "white";
46.    this.bodys = new Array();
47.    for(var i = 20; i < 25; i ++ )
48.    {
49.       rowindex[20][i].style.backgroundColor = this.bodycolor;
50.       // rowindex的第一个坐标是行标，第二是列标
51.       this.bodys.push(rowindex[20][i]);
52.    }
54.    // 定义蛇的头部坐标，第一个是行标, 第二个是列标
55.    this.head = [20, 20];
57.    // 定义蛇的前进方向，0代表左、1代表下、2代表右、3代表上
58.    this.direct = 0;
59. }
62. // 移动模块
63. function move()
64. {
65.    // 根据前进方向计算头部的坐标
66.    switch(this.direct)
67.    {
68.       case 0 :
69.          this.head[1] -= 1;
70.          break;
71.       case 1 :
72.          this.head[0] += 1;
73.          break;
74.       case 2 :
75.          this.head[1] += 1;
76.          break;
77.       case 3 :
78.          this.head[0] -= 1;
79.          break;
80.    }
81.    // 判断是否越界
82.    if(this.head[0] < 0 || this.head[0] > 39 || this.head[1] < 0 || this.head[1] > 39)
83.    {
84.       // 如果越界则返回false
85.       return false;
86.    }
87.    else
88.    // 如果没有越界则检查下一个元素的性质，如果是食物则吃掉，并再生成食物。如果是其自身则返回false
89.    if(this.head[0] == food[0] && this.head[1] == food[1])
90.    {
91.       // 如果是食物
92.       rowindex[this.head[0]][this.head[1]].style.backgroundColor = this.bodycolor;
93.       this.bodys.unshift(rowindex[this.head[0]][this.head[1]]);
94.       score++;
95.       makefood();
96.       return true;
97.    }
98.    else
99.    // 如果是它自身
100.    if(rowindex[this.head[0]][this.head[1]].style.backgroundColor == this.bodycolor)
101.    {
102.       if(rowindex[this.head[0]][this.head[1]] == this.bodys.pop())// 如果是它的尾部
103.       {
104.          this.bodys.unshift(rowindex[this.head[0]][this.head[1]]);
105.          return true;
106.       }
107.       // 如果不是尾部
108.       return false;
109.    }
111.    // 以上情况都不是
112.    this.bodys.pop().style.backgroundColor = backcolor;
113.    rowindex[this.head[0]][this.head[1]].style.backgroundColor = this.bodycolor;
114.    this.bodys.unshift(rowindex[this.head[0]][this.head[1]]);
115.    return true;
117. }
118. snake.prototype.move = move;
120. // 生成食物模块
121. var foodcolor = "blue";
122. var food = [20, 17];
123. rowindex[food[0]][food[1]].style.backgroundColor = foodcolor;
124. function makefood()
125. {
126.    var tempfood;
127.    var tempelement;
128.    out :
129.    while(true)
130.    {
131.       tempfood = [Math.round(Math.random() * 39), Math.round(Math.random() * 39)];
132.       tempelement = rowindex[tempfood[0]][tempfood[1]];
133.       for(var i in s.bodys)
134.       {
135.          if(s.bodys[i] == tempelement)
136.          {
137.             // 如果随机生成的食物在蛇的身体上，则跳出继续
138.             continue out;
139.          }
140.          // 生成食物成功
141.          break out;
142.          
143.       }
144.    }
145.    food = tempfood;
146.    rowindex[food[0]][food[1]].style.backgroundColor = foodcolor;
147. }
149. // 转向模块和暂停模块
150. document.onkeydown = turnorstop;
151. function turnorstop(event)
152. {
153.    if(window.event != undefined)
154.    {
155.       if(parseInt(window.event.keyCode)==32)
156.       {
157.       alert("休息一下");
158.       }
159.       else
160.       {
161.          switch(parseInt(window.event.keyCode))
162.          {
163.             case 37 :
164.             if(s.direct!=2)
165.             s.direct = 0;
166.             break;
167.             case 38 :
168.             if(s.direct!=1)
169.             s.direct = 3;
170.             break;
171.             case 39 :
172.             if(s.direct!=0)
173.             s.direct = 2;
174.             break;
175.             case 40 :
176.             if(s.direct!=3)
177.             s.direct = 1;
178.             break;
179.          }
180.       }
181.    }
182.    else
183.    {
184.       if(parseInt(event.which)==32)
185.       {
186.       alert("休息一下");
187.       }
188.       else
189.       {
190.          switch(parseInt(event.which))
191.          {
192.             case 37 :
193.             if(s.direct!=2)
194.             s.direct = 0;
195.             break;
196.             case 38 :
197.             if(s.direct!=1)
198.             s.direct = 3;
199.             break;
200.             case 39 :
201.             if(s.direct!=0)
202.             s.direct = 2;
203.             break;
204.             case 40 :
205.             if(s.direct!=3)
206.             s.direct = 1;
207.             break;
208.          }
209.       }
210.    }
211. }
213. // 启动游戏模块
214. var s = new snake();
215. var time = 60;//蛇的速度指数
216. function startmove()
217. {
218.    if(s.move())
219.    {
220.       setTimeout(startmove, time);
221.    }
222.    else
223.    {
224.       alert("GAME OVER/n您的分数是:"+score+"分");
225.    }
226. }
228. //分数设置
229. var score = -1;
230. //运行游戏
231. startmove();

在网页中连接该JS文件即可。