国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 語言 > JavaScript > 正文

原生js實現的貪吃蛇網頁版游戲完整實例

2024-05-06 16:20:35
字體：大 中 小
來源：轉載
供稿：網友

這篇文章主要介紹了原生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程序設計有所幫助。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表

圖片精選

主站蜘蛛池模板： 水富县| 江油市| 新绛县| 雷波县| 景德镇市| 余干县| 微山县| 凌源市| 白玉县| 吉水县| 库车县| 西贡区| 福贡县| 江北区| 新化县| 宁波市| 贺州市| 宁国市| 汪清县| 高雄县| 广水市| 定襄县| 大英县| 澎湖县| 永嘉县| 池州市| 遂宁市| 渭源县| 祁连县| 贺兰县| 都江堰市| 彰化县| 甘肃省| 兴业县| 望城县| 哈密市| 泰宁县| 星子县| 色达县| 衡阳市| 新郑市|