原生js实现的贪吃蛇网页版游戏完整实例

这篇文章主要介绍了原生js实现的贪吃蛇网页版游戏完整实例,可实现自主选择游戏难度进行贪吃蛇游戏的功能,涉及javascript键盘事件及页面元素的操作技巧,需要的朋友可以参考下

本文实例讲述了原生js实现的贪吃蛇网页版游戏。分享给大家供大家参考。具体实现方法如下：

1. <html> 
2. <head> 
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
4. <title>原生js写的贪吃蛇网页版游戏</title> 
5. </head> 
6. <body> 
7. </body> 
8. <script>  
9. Star = { 
10. init:function(){ 
11. var bigDiv = this.appendEle(this.addStyle(this.creatEle(), 
12. {w:'900',h:'600',p:'absolute',t:10,l:500})); 
13. for(var i = 0; i<600/30;i++){ 
14. Star.data.arrayAll[i] = []; 
15. for(var j = 0; j<900/30; j++){ 
16. div = this.addStyle(this.creatEle(),{w:(!+[1,] ? 30 :28),h:(!+[1,] ? 30 :28),f:'left',border:'1px solid #666'}); 
17. div.setAttribute('number', i*30+j) 
18. this.appendEle(div,bigDiv) 
19. Star.data.arrayAll[i][j] = div; 
20. } 
21. } 
22. bigDiv = this.appendEle(this.addStyle(this.creatEle(), 
23. {w:'900',h:'600',p:'absolute',t:10,l:500})); 
24. this.pushEleInSelect(Star.data.arrayAll[9][15],Star.data.arrayAll[9][14],Star.data.arrayAll[9][13]) 
25. this.keyBoard.apply(this,arguments); 
26. this.appearPoint(); 
27. this.leftGo(); 
28. }, 
29. appearPoint:function(){ 
30. var arrayIn = []; 
31. var number; 
32. for(var i = 0; i<600; i++){ 
33. if(!this.hasInArray(Star.data.arrayAll[parseInt(i/30)][i%30].getAttribute('number'),Star.data.arraySelect)){ 
34. arrayIn.push(Star.data.arrayAll[i]) 
35. } 
36. } 
37. Star.data.foodNumber = number = parseInt(Math.random()*arrayIn.length); 
38. this.giveColor(number) 
39. }, 
40. giveColor:function(number){ 
41. var div = Star.data.arrayAll[parseInt(number/30)][number%30]; 
42. Star.timeInterval.timeB = setInterval(function(){ 
43. if(div.className == 'shanshuo'){ 
44. div.className = '' 
45. div.style.backgroundColor = '#fff' 
46. } 
47. else{ 
48. div.className = 'shanshuo'; 
49. div.style.backgroundColor = '#f00' 
50. } 
51. },500) 
52. }, 
53. disappearColor:function(){ 
54. clearInterval(Star.timeInterval.timeB); 
55. Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30].style.backgroundColor = '#f00'; 
56. }, 
57. hasInArray:function(number,array){ 
58. for(var i in array){ 
59. if(array[i] instanceof Array){ 
60. if(this.hasInArray(number,array[i])){ 
61. return true; 
62. } 
63. } 
64. if(array[i].getAttribute && array[i].getAttribute('number') == number) return true; 
65. } 
66. return false; 
67. }, 
68. keyBoard:function(){ 
69. var self = this; 
70. document.onkeydown = function(e){ 
71. e = e? e : window.event; 
72. switch(e.keyCode){ 
73. case 37: if(Star.keycode == 37 || Star.keycode == 39){return;}; self.leftGo(); break; 
74. case 38: if(Star.keycode == 38 || Star.keycode == 40){return;}; self.upGo();break; 
75. case 39: if(Star.keycode == 37 || Star.keycode == 39){return;}; self.rightGo();break; 
76. case 40: if(Star.keycode == 38 || Star.keycode == 40){return;}; self.downGo();break; 
77. } 
78. } 
79. }, 
80. leftGo:function(){ 
81. var div, number , self = this; 
82. Star.keycode = 37; 
83. clearInterval(Star.timeInterval.timeA) 
84. Star.timeInterval.timeA = setInterval(function(){ 
85. number = Star.data.arraySelect[0].getAttribute('number'); 
86. if(number%30<=0 || self.hasInArray(number-1,Star.data.arraySelect)){ 
87. self.guanle(); 
88. } 
89. else{ 
90. if(Star.data.foodNumber == number-1){ 
91. self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]); 
92. self.disappearColor(); 
93. self.appearPoint(); 
94. } 
95. else{ 
96. div = Star.data.arraySelect.pop(); 
97. div.style.background = '#fff'; 
98. self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30-1]); 
99. } 
100. } 
101. },Star.timeInterval.speed) 
102. }, 
103. upGo:function(){ 
104. var div, number , self = this; 
105. Star.keycode = 38; 
106. clearInterval(Star.timeInterval.timeA) 
107. Star.timeInterval.timeA = setInterval(function(){ 
108. number = parseInt(Star.data.arraySelect[0].getAttribute('number')); 
109. if(parseInt(number/30)<=0 || self.hasInArray(number-30,Star.data.arraySelect)){ 
110. self.guanle(); 
111. } 
112. else{ 
113. if(Star.data.foodNumber == number-30){ 
114. self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]); 
115. self.disappearColor(); 
116. self.appearPoint(); 
117. } 
118. else{ 
119. div = Star.data.arraySelect.pop(); 
120. div.style.background = '#fff'; 
121. self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)-1][number%30]); 
122. } 
123. } 
124. },Star.timeInterval.speed) 
125. }, 
126. rightGo:function(){ 
127. var div, number , self = this; 
128. Star.keycode = 39; 
129. clearInterval(Star.timeInterval.timeA) 
130. Star.timeInterval.timeA = setInterval(function(){ 
131. number = parseInt(Star.data.arraySelect[0].getAttribute('number')); 
132. if(parseInt(number%30)>=29 || self.hasInArray(number+1,Star.data.arraySelect)){ 
133. self.guanle(); 
134. } 
135. else{ 
136. if(Star.data.foodNumber == number+1){ 
137. self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]); 
138. self.disappearColor(); 
139. self.appearPoint(); 
140. } 
141. else{ 
142. div = Star.data.arraySelect.pop(); 
143. div.style.background = '#fff'; 
144. self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30+1]); 
145. } 
146. } 
147. },Star.timeInterval.speed) 
148. }, 
149. downGo:function(){ 
150. var div, number , self = this; 
151. Star.keycode = 40; 
152. clearInterval(Star.timeInterval.timeA) 
153. Star.timeInterval.timeA = setInterval(function(){ 
154. number = parseInt(Star.data.arraySelect[0].getAttribute('number')); 
155. if(parseInt(number/30)>=19 || self.hasInArray(number+30,Star.data.arraySelect)){ 
156. self.guanle(); 
157. } 
158. else{ 
159. if(Star.data.foodNumber == number+30){ 
160. self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]); 
161. self.disappearColor(); 
162. self.appearPoint(); 
163. } 
164. else{ 
165. div = Star.data.arraySelect.pop(); 
166. div.style.background = '#fff'; 
167. self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)+1][number%30]); 
168. } 
169. } 
170. },Star.timeInterval.speed) 
171. }, 
172. guanle:function(){ 
173. alert('撞墙了,总分：' + (Star.data.arraySelect.length-3) * parseInt(1000 / Star.timeInterval.speed)); 
174. location.reload(); 
175. }, 
176. creatEle:function(tag){ 
177. var tagName = tag || 'DIV' 
178. return document.createElement(tagName) 
179. }, 
180. appendEle:function(ele,father){ 
181. var father = father || document.body || document.documentElement 
182. father.appendChild(ele) 
183. return ele; 
184. }, 
185. addStyle:function(ele,css){ 
186. for(var i in css){ 
187. switch(i){ 
188. case 'b' : ele.style.background = css[i]; break; 
189. case 'l' : ele.style.left = css[i]+'px'; break; 
190. case 'r' : ele.style.right = css[i]+'px'; break; 
191. case 't' : ele.style.top = css[i]+'px'; break; 
192. case 'd' : ele.style.down = css[i]+'px'; break; 
193. case 'p' : ele.style.position = css[i]; break; 
194. case 'w' : ele.style.width = css[i]+'px'; break; 
195. case 'h' : ele.style.height = css[i]+'px'; break; 
196. case 'f' : ele.style.cssFloat = css[i]; ele.style.styleFloat = css[i]; break; 
197. default : ele.style[i] = css[i]; break; 
198. } 
199. } 
200. return ele; 
201. }, 
202. pushEleInSelect:function(){ 
203. for(var i = 0; i<arguments.length; i++){ 
204. Star.data.arraySelect = [arguments[i]].concat(Star.data.arraySelect) 
205. this.addStyle(arguments[i],{b:'#f00'}) 
206. } 
207. } 
208. } 
209. Star.data={ 
210. arrayAll : [], 
211. arraySelect:[], 
212. newPoint:null, 
213. foodNumber:0 
214. } 
215. Star.timeInterval={ 
216. timeA:null, 
217. timeB:null 
218. } 
219. Star.keycode = 0; 
220. window.onload = function(){ 
221. var select = Star.creatEle('select'); 
222. var optionDefault = Star.creatEle('option'); 
223. optionDefault.innerHTML = '请选择关卡' 
224. Star.appendEle(optionDefault,select) 
225. Star.addStyle(select,{w:200,h:30,p:'absolute',left:'40%',top:'40%'}) 
226. for(var i = 0 ; i <10 ; i++){ 
227. var option = Star.creatEle('option'); 
228. option.innerHTML = '第' + (i+1) + '关' 
229. Star.appendEle(option,select); 
230. } 
231. Star.appendEle(select) 
232. select.onchange = function(){ 
233. selectValue = select.options[select.selectedIndex].value || select.options[select.selectedIndex].innerHTML 
234. var number = selectValue.match(//d+/)[0] 
235. Star.timeInterval.speed = parseInt(200/number); 
236. Star.addStyle(select,{display:'none'}); 
237. Star.init(); 
238. } 
239. } 
240. </script> 
241. </html> 

希望本文所述对大家的javascript程序设计有所帮助。