CODE:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <style type="text/css">
  5. .snake{ background:#090}
  6. .food0{ background:#f90}
  7. .food1{ background:#f00}
  8. .bar{ background:#000}
  9. #state{ color:#090; font-weight:bold}
  10. </style>
  11. <script type="text/javascript">
  12. var rows = 16;
  13. var cells = 30;
  14. var squareWidth = 20;
  15. var speed = 5000;
  16. var borderWidth = 5;
  17. var times = 200;//0.2秒
  18. var start = 0;
  19. var pause = 0;
  20. var sUp;
  22. window.onload = function createMap()
  23. {
  24. mapWidth = eval(cells*squareWidth+2*borderWidth);
  25. mapHeight = eval(rows*squareWidth+2*borderWidth);
  26. mapLeft = (document.body.clientWidth-mapWidth)/2;
  27. mapTop = (document.body.clientHeight-mapHeight)/2;
  28. document.body.innerHTML += "<div id=\"map\" style=\"position:absolute; left:" + mapLeft + "px; top:" + mapTop + "px; width:" + mapWidth + "px; height:" + mapHeight + "px; border:" + borderWidth + "px solid #789;\"></div>";
  30. gameMap = new Array()
  31. for(y=0;y<rows;y++)
  32. {
  33. gameMap[y]=new Array();
  34. for(x=0;x<cells;x++)
  35. {
  36. gameMap[y][x]='0';
  37. }
  38. }
  39. snakeX = parseInt(Math.random()*cells);
  40. snakeY = parseInt(Math.random()*rows);
  41. createSnake();
  42. createFood();
  43. createBar();
  44. snakeDIV = map.all.tags("DIV");
  45. }
  47. function createSnake()//创建蛇
  48. {
  49. map.innerHTML += "<div x=\"" + snakeX + "\" y=\"" + snakeY + "\" style=\"position:absolute; left:" + snakeX * squareWidth + "px; top:" + snakeY * squareWidth + "px; width:" + squareWidth + "px; height:" + squareWidth + "px; overflow:hidden;\" class=\"snake\"></div>";
  50. gameMap[snakeY][snakeX]='s';
  51. }
  53. function createFood()//创建食物
  54. {
  55. foodX = parseInt(Math.random() * cells);
  56. foodY = parseInt(Math.random() * rows);
  57. if(gameMap[foodY][foodX]=='0')
  58. {
  59. map.innerHTML += "<span id=\"food\" style=\"position:absolute; left:" + foodX * squareWidth + "; top:" + foodY * squareWidth + "; width:" + squareWidth + "; height:" + squareWidth +"; overflow:hidden;\" class=\"food" + parseInt(Math.random() * 2) + "\"></span>"
  60. gameMap[foodY][foodX]='f';
  61. }
  62. else
  63. {
  64. createFood();
  65. }
  66. }
  68. function createBar()//创建障碍物
  69. {
  70. barX = parseInt(Math.random() * cells);
  71. barY = parseInt(Math.random() * rows);
  72. if(gameMap[barY][barX]=='0')
  73. {
  74. map.innerHTML += "<span id=\"bar\" style=\"position:absolute; left:" + barX * squareWidth + "; top:" + barY * squareWidth + "; width:" + squareWidth + "; height:" + squareWidth +"; overflow:hidden;\" class=\"bar\"></span>"
  75. gameMap[barY][barX]='b';
  76. }
  77. else
  78. {
  79. createBar();
  80. }
  81. }
  83. document.onkeydown = function keyDown(){
  84. key = event.keyCode;
  85. switch(key)
  86. {
  87. case 37://左
  88. snakeGo(-1,0);
  89. document.getElementById("state").innerHTML = "左行";
  90. break;
  91. case 39://右
  92. snakeGo(1,0);
  93. document.getElementById("state").innerHTML = "右行";
  94. break;
  95. case 38://上
  96. snakeGo(0,-1);
  97. document.getElementById("state").innerHTML = "上行";
  98. break;
  99. case 40://下
  100. snakeGo(0,1);
  101. document.getElementById("state").innerHTML = "下行";
  102. break;
  103. case 32://空格键
  104. if(start == 1)
  105. {
  106. pause = 1;
  107. document.getElementById("state").innerHTML += "（暂停）";
  108. clearTimeout(sUp);
  109. }
  110. break;
  111. }
  112. return false;
  113. }
  115. function snakeGo(x,y)
  116. {
  117. goX = x;
  118. goY = y;
  119. if(start == 0)
  120. {
  121. speedUp();
  122. start = 1;
  123. move();
  124. }
  125. else
  126. {
  127. if(pause == 1)
  128. {
  129. speedUp();
  130. pause = 0;
  131. move();
  132. }
  133. }
  134. }
  135. function speedUp()//蛇越行越快
  136. {
  137. times -= 4;
  138. if(times > 4)
  139. {
  140. sUp = setTimeout("speedUp()",speed);
  141. }
  142. }
  144. function move()//移动并判断蛇前面是什么
  145. {
  146. snakeX += goX;
  147. snakeY += goY;
  148. if(snakeY<0||snakeY>=rows||snakeX<0||snakeX>=cells)
  149. {
  150. gameOver("撞墙了");
  151. }
  152. else
  153. {
  154. snakeFront = gameMap[snakeY][snakeX];
  155. if(snakeFront == '0')//蛇前面为空
  156. {
  157. crawl();
  158. }
  159. else if(snakeFront == 'f')//蛇前面为食物
  160. {
  161. eat();
  162. }
  163. else if(snakeFront == 'b')//蛇前面为障碍物
  164. {
  165. gameOver("撞到障碍物");
  166. }
  167. else if(snakeFront == 's')//蛇前面为蛇
  168. {
  169. gameOver("咬到自己了");
  170. }
  171. }
  173. }
  175. function gameOver(type)//游戏结束
  176. {
  177. document.getElementById("state").innerHTML = "游戏结束";
  178. reStart = confirm("^_^啊哦~，"+type+"，重新开始吗？")
  179. if(reStart)
  180. {
  181. window.location.reload();//刷新页面
  182. }
  183. }
  185. function crawl()//蛇前是空地时
  186. {
  187. //清除蛇尾，创建蛇头，产生爬行效果
  188. gameMap[snakeDIV[0].y][snakeDIV[0].x] = '0';
  189. snakeDIV[0].removeNode(true);
  190. createSnake();
  191. if(pause == 0)
  192. {
  193. setTimeout("move()",times);
  194. }
  195. }
  197. function eat()//蛇前面是食物时
  198. {
  199. createSnake();//增加一个蛇的节点
  200. document.getElementById("food").removeNode(true);//清除食物
  201. createFood();//创建食物
  202. if(pause == 0)
  203. {
  204. setTimeout("move()",times);
  205. }
  206. }
  207. </script>
  208. <title>贪食蛇</title>
  209. </head>
  210. <body>
  211. <h2>贪食蛇</h2>
  212. <hr style="color:#333" size="1px" />
  213. <p style="font-size:13px;">说明：1.绿色方块代表蛇，橙色或红色方块代表食物，黑色方块代表障碍物。2.用方向键控制蛇的方向，空格键暂停，方向键开始。<br />当前状态：<span id="state">准备开始</span><br />Author:Yoky</p>
  214. </body>
  215. </html>


[提示：你可先修改部分代码，再按运行]