javascript实现简单的贪吃蛇游戏

本文很简单，给大家分享了一段使用javascript实现简单的贪吃蛇游戏的代码，算是对自己学习javascript的一次小小的总结，代码参考了网友的部分内容，推荐给大家，希望对大家能够有所帮助。

javascript实现简单的贪吃蛇游戏，功能很简单，代码也很实用，就不多废话了，小伙伴们参考注释吧。

1. <html> 
2. <head> 
3. <meta http-equiv='content-type' content='text/html;charset=utf-8'> 
4. <title>贪吃蛇</title> 
5. <script type="text/javascript"> 
6. var map; //地图 
7. var snake; //蛇 
8. var food; //食物 
9. var timer; //定时器 
10. var initSpeed=200; //初始定时器时间间隔（毫秒）,间接代表蛇移动速度 
11. var nowSpeed=initSpeed; //游戏进行时蛇移动速度 
12. var grade=0; //积分 
13. var flag=1; //（可间接看做）关卡 
14. //地图类 
15. function Map(){ 
16. this.width=800; 
17. this.height=400; 
18. this.position='absolute'; 
19. this.color='#EEEEEE'; 
20. this._map=null; 
21. //生成地图 
22. this.show=function(){ 
23. this._map=document.createElement('div'); 
24. this._map.style.width=this.width+'px'; 
25. this._map.style.height=this.height+'px'; 
26. this._map.style.position=this.position; 
27. this._map.style.backgroundColor=this.color; 
28. document.getElementsByTagName('body')[0].appendChild(this._map); 
29. } 
30. } 
31. //食物类 
32. function Food(){ 
33. this.width=20; 
34. this.height=20; 
35. this.position='absolute'; 
36. this.color='#00FF00'; 
37. this.x=0; 
38. this.y=0; 
39. this._food; 
40. //生成食物 
41. this.show=function(){ 
42. this._food=document.createElement('div'); 
43. this._food.style.width=this.width+'px'; 
44. this._food.style.height=this.height+'px'; 
45. this._food.style.position=this.position; 
46. this._food.style.backgroundColor=this.color; 
47. this.x=Math.floor(Math.random()*map.width/this.width); 
48. this.y=Math.floor(Math.random()*map.height/this.width); 
49. this._food.style.left=this.x*this.width; 
50. this._food.style.top=this.y*this.height; 
51.  
52. map._map.appendChild(this._food); 
53. } 
54. } 
55. //蛇类 
56. function Snake(){ 
57. this.width=20; 
58. this.height=20; 
59. this.position='absolute'; 
60. this.direct=null;//移动方向 
61. //初始蛇身 
62. this.body=new Array( 
63. [3,2,'red',null],//蛇头 
64. [2,2,'blue',null], 
65. [1,2,'blue',null] 
66. ); 
67. //生成蛇身 
68. this.show=function(){ 
69. for(var i=0;i<this.body.length;i++){ 
70. if(this.body[i][3]==null){ 
71. this.body[i][3]=document.createElement('div'); 
72. this.body[i][3].style.width=this.width; 
73. this.body[i][3].style.height=this.height; 
74. this.body[i][3].style.position=this.position; 
75. this.body[i][3].style.backgroundColor=this.body[i][2]; 
76. map._map.appendChild(this.body[i][3]); 
77. } 
78. this.body[i][3].style.left=this.body[i][0]*this.width+'px'; 
79. this.body[i][3].style.top=this.body[i][1]*this.height+'px'; 
80. } 
81. } 
82. //控制蛇移动 
83. this.move=function(){ 
84.  
85. var length=this.body.length-1; 
86. for(var i=length;i>0;i--){ 
87. this.body[i][0]=this.body[i-1][0]; 
88. this.body[i][1]=this.body[i-1][1]; 
89. } 
90.  
91. switch(this.direct){ 
92. case 'right': 
93. this.body[0][0]=this.body[0][0]+1; 
94. break; 
95. case 'left': 
96. this.body[0][0]=this.body[0][0]-1; 
97. break; 
98. case 'up': 
99. this.body[0][1]=this.body[0][1]-1; 
100. break; 
101. case 'down': 
102. this.body[0][1]=this.body[0][1]+1; 
103. break; 
104. } 
105.  
106. this.condition(); 
107. this.show(); 
108. } 
109. //定时器，开始游戏时，调用 
110. this.speed=function(){ 
111. timer=setInterval('snake.move()',initSpeed); 
112. } 
113. //条件处理 
114. this.condition=function(){ 
115. //吃食物 
116. if(this.body[0][0]==food.x&&this.body[0][1]==food.y){ 
117. grade++; 
118. this.body[[this.body.length]]=[0,0,'blue',null]; 
119. map._map.removeChild(food._food) 
120. food.show(); 
121. } 
122. //判断是否撞墙 
123. if(this.body[0][0]<0||this.body[0][0]>=map.width/this.width||this.body[0][1]<0||this.body[0][1]>=map.height/this.height){ 
124. alert('game over'); 
125. clearInterval(timer); 
126. return ; 
127. } 
128. //判断是否撞到自身 
129. for(var i=1;i<this.body.length;i++){ 
130. if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1]){ 
131. alert('game over'); 
132. clearInterval(timer); 
133. return ; 
134. } 
135. } 
136. //速度提升处理，积分每曾2分，速度提升一倍 
137. if(grade/2==flag){ 
138. clearInterval(timer); 
139. flag++; 
140. nowSpeed=initSpeed/flag; 
141. timer=setInterval('snake.move()',nowSpeed); 
142. } 
143. document.title='贪吃蛇 积分'+grade+' 速度等级'+initSpeed/nowSpeed; 
144.  
145. } 
146. } 
147.  
148. document.onkeydown=function(event){ 
149. //按下任意键，开始游戏 
150. if(snake.direct===null){ 
151. snake.direct='right'; 
152. snake.speed(); 
153. } 
154. //控制方向，W S D A分别代表 上下右左 
155. switch(window.event?window.event.keyCode:event.keyCode){//浏览器兼容处理 
156. case 87 : 
157. snake.direct=snake.body[0][0]==snake.body[1][0]?snake.direct:'up';//避免反向移动，触发死亡bug 
158. break; 
159. case 83 : 
160. snake.direct=snake.body[0][0]==snake.body[1][0]?snake.direct:'down'; 
161. break; 
162. case 68 : 
163. snake.direct=snake.body[0][1]==snake.body[1][1]?snake.direct:'right'; 
164. break; 
165. case 65 : 
166. snake.direct=snake.body[0][1]==snake.body[1][1]?snake.direct:'left'; 
167. break; 
168. } 
169. } 
170. //自动加载游戏 
171. window.onload=function(){ 
172. map=new Map(); 
173. map.show(); 
174. food=new Food(); 
175. food.show(); 
176. snake=new Snake(); 
177. snake.show(); 
178.  
179. } 
180. </script> 
181. </head> 
182. <body> 
183. </body> 
184. </html> 

以上所述就是本文的全部内容了，希望大家能够喜欢。