接触js一周时随手写的贪吃蛇，然后就没再深入学习了，现在要重新学起

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了接触js一周时随手写的贪吃蛇，然后就没再深入学习了，现在要重新学起相关的知识，希望对你有一定的参考价值。

废话不多说，下面是源码，希望大牛们指出问题

  <html>
  <head>
  <meta charset="utf-8"/>
  <title>地图</title>
  <style>
  #mainDiv
  {
  width: 40%;
  margin: 40px auto;
  }
  .tableStyle
  {
  border-style: solid;
  border-color: black;
  border-width: thin;
  }
  .divStyle
  {
  color: black;
  background-color: black;
  overflow: hidden;
  }
  .snackStyle
  {
  color: crimson;
  background-color: crimson;
  overflow: hidden;
  }
  .headStyle
  {
  color: red;
  background-color: red;
  overflow: hidden;
  }
  .frogStyle
  {
  color: green;
  background-color: green;
  overflow: hidden;
  }
  .borderStyle
  {
  color: darkred;
  background-color: darkred;
  overflow: hidden;
  }
  </style>
  <script type="text/javascript">
  /*方向，1：向右、2：向下、3：向左、4：向上*/
  var direction=1;
  /*地图行列大小，以及单元格像素值*/
  var x,y,w,h;
  /*青蛙、头部、尾部单元格*/
  var frog,head,tail;
  /*速度*/
  var speed;
  /*计数器*/
  var count;
  /*初始化地图行列大小*/
  function getXY()
  {
  x=y=parseInt(document.getElementById("x").value.trim());
  w=h=550/x;
  }
  /*初始化地图*/
  function terrainFactory()
  {
  var div=document.getElementById("mainDiv");
  var table=document.createElement("table");
  table.setAttribute("cellspacing","0px");
  table.setAttribute("cellpadding","0px");
  table.className="tableStyle";
  for(var i=0;i<x;i++)
  {
  var tr=document.createElement("tr");
  for(var j=0;j<y;j++)
  {
  var td=document.createElement("td");
  var divChild=document.createElement("div");
  /*divChild.style.width="30px";
  divChild.style.height="30px";
  divChild.style.backgroundColor="red";*/
  if(i==0)
  {
  var name=""+j;
  }
  else
  {
  var name=""+(i*y+j);
  }
  divChild.innerHTML=name;
  divChild.setAttribute("id",name);
  divChild.setAttribute("style","width:"+w+"px;height:"+h+"px");
  divChild.className="divStyle";
  td.appendChild(divChild);
  tr.appendChild(td);
  }
  table.appendChild(tr);
  }
  div.appendChild(table);
  addBorder();
  }
  /*添加边框*/
  function addBorder()
  {
  var div=document.getElementById("mainDiv");
  var table=div.firstElementChild;
  /*第一行的td*/
  var tdFirstItems=table.firstElementChild.childNodes;
  /*更改第一行所有的边框*/
  for(var i=0;i<tdFirstItems.length;i++)
  {
  tdFirstItems[i].firstElementChild.className="borderStyle";
  }
  /*最后一行的td*/
  var tdLastItems=table.lastElementChild.childNodes;
  for(var i=0;i<tdLastItems.length;i++)
  {
  tdLastItems[i].firstElementChild.className="borderStyle";
  }
  /*左边和右边*/
  var trItems=table.childNodes;
  for(var i=1;i<trItems.length-1;i++)
  {
  /*左边框*/ trItems[i].firstElementChild.firstElementChild.className="borderStyle";
  /*右边框*/
  trItems[i].lastElementChild.firstElementChild.className="borderStyle";
  }
  }
  /*新建小蛇*/
  function snakeFactory()
  {
  direction=Math.floor(Math.random()*4)+1;
  var headNum=randomLocation(x-4,3,y-4,3);
  head=document.getElementById(""+headNum);
  head.className="headStyle";
  head.innerHTML=headNum;
  switch(direction)
  {
  /*向右*/
  case 1:
  var temp=document.getElementById(""+(headNum-1));
  temp.className="snackStyle";
  temp.innerHTML=headNum;
  tail=document.getElementById(""+(headNum-2));
  tail.className="snackStyle";
  tail.innerHTML=headNum-1;
  break;
  /*向下*/
  case 2:
  var temp=document.getElementById(""+(headNum-y));
  temp.className="snackStyle";
  temp.innerHTML=headNum;
  tail=document.getElementById(""+(headNum-2*y));
  tail.className="snackStyle";
  tail.innerHTML=headNum-y;
  break;
  /*向左*/
  case 3:
  var temp=document.getElementById(""+(headNum+1));
  temp.className="snackStyle";
  temp.innerHTML=headNum;
  tail=document.getElementById(""+(headNum+2));
  tail.className="snackStyle";
  tail.innerHTML=headNum+1;
  break;
  /*向上*/
  case 4:
  var temp=document.getElementById(""+(headNum+y));
  temp.className="snackStyle";
  temp.innerHTML=headNum;
  tail=document.getElementById(""+(headNum+2*y));
  tail.className="snackStyle";
  tail.innerHTML=headNum+y;
  break;
  }
  }
  /*新建青蛙*/
  function frogFactory()
  {
  var frogNum=randomLocation(x-2,1,y-2,1);
  frog=document.getElementById(""+frogNum);
  if(frog.className=="divStyle")
  {
  frog.className="frogStyle";
  }
  else
  {
  frogFactory();
  }
  }
  /*移动算法*/
  /*方向，1：向右、2：向下、3：向左、4：向上*/
  function move(num)
  {
  document.getElementById("model").nextElementSibling.innerHTML="速度为："+speed;
  switch(direction)
  {
  case 1:
  var headlocation=parseInt(head.innerHTML);
  /*吃青蛙*/
  if(document.getElementById(headlocation+1+"").className=="frogStyle")
  {
  eatFrog(headlocation+1);
  break;
  }
  /*撞墙或者撞到自己了*/ if(document.getElementById(headlocation+1+"").className=="borderStyle"||document.getElementById(headlocation+1+"").className=="snackStyle")
  {
  location.reload();
  }
  else
  {
  moveDetail(headlocation+1);
  }
  break;
  case 2:
  var headlocation=parseInt(head.innerHTML);
  /*吃青蛙*/
  if(document.getElementById(headlocation+y+"").className=="frogStyle")
  {
  eatFrog(headlocation+y);
  break;
  }
   
  /*撞墙或者撞到自己了*/ if(document.getElementById(headlocation+y+"").className=="borderStyle"||document.getElementById(headlocation+y+"").className=="snackStyle")
  {
  location.reload();
  }
  else
  {
  moveDetail(headlocation+y);
  }
  break;
  case 3:
  var headlocation=parseInt(head.innerHTML);
  /*吃青蛙*/
  if(document.getElementById(headlocation-1+"").className=="frogStyle")
  {
  eatFrog(headlocation-1);
  break;
  }
  /*撞墙或者撞到自己了*/
  if(document.getElementById(headlocation-1+"").className=="borderStyle"||document.getElementById(headlocation-1+"").className=="snackStyle")
  {
  location.reload();
  }
  else
  {
  moveDetail(headlocation-1);
  }
  break;
  case 4:
  var headlocation=parseInt(head.innerHTML);
  /*吃青蛙*/
  if(document.getElementById(headlocation-y+"").className=="frogStyle")
  {
  eatFrog(headlocation-y);
  break;
  }
  /*撞墙或者撞到自己了*/
  if(document.getElementById(headlocation-y+"").className=="borderStyle"||document.getElementById(headlocation-y+"").className=="snackStyle")
  {
  alert("GAME OVER!GG思密达!");
  location.reload();
  }
  else
  {
  moveDetail(headlocation-y);
  }
  break;
  }
  if(num==1)
  {
  count++;
  if(count%10==0)
  {
  speed-=10;
  }
  setTimeout("move(1)",speed);
  }
  else
  {
  setTimeout("move(0)",speed);
  }
  }
  /*吃青蛙*/
  function eatFrog(intLoction)
  {
  head.className="snackStyle";
  head.innerHTML=intLoction;
  head=document.getElementById(intLoction+"");
  head.className="headStyle";
  head.innerHTML=intLoction;
  frogFactory();
  }
  /*移动细节*/
  function moveDetail(intLoction)
  {
  head.className="snackStyle";
  head.innerHTML=intLoction;
  head=document.getElementById(intLoction+"");
  head.className="headStyle";
  head.innerHTML=intLoction;
  tail.className="divStyle";
  tail=document.getElementById(tail.innerHTML);
  }
  /*随机位置*/
  function randomLocation(x_big,x_small,y_big,y_small)
  {
  var smallNum=Math.floor(Math.random()*(y_big-y_small+1))+y_small;
  var bigNum=Math.floor(Math.random()*(x_big-x_small+1))+x_small;
  return y*bigNum+smallNum;
  }
  /*键盘监听*/
  /*方向，1：向右、2：向下、3：向左、4：向上*/
  function listenKey(event)
  {
  var value=event.keyCode;
  switch(value)
  {
  case 87:
  case 38:
  if(direction==1||direction==3)
  {direction=4;}
  break;
  case 65:
  case 37:
  if(direction==2||direction==4)
  {direction=3;}
  break;
  case 83:
  case 40:
  if(direction==1||direction==3)
  {direction=2;}
  break;
  case 68:
  case 39:
  if(direction==2||direction==4)
  {direction=1;}
  break;
  }
  }
  /*开始游戏*/
  function start(obj)
  {
  obj.setAttribute("disabled","disabled");
  getXY();
  terrainFactory();
  snakeFactory();
  frogFactory();
  if(document.getElementById("model").value.trim()=="常规模式")
  {
  speed=500;
  move(0);
  }
  else
  {
  speed=500;
  count=0;
  move(1);
  }
  }
  </script>
  </head>
  <body onkeyup="listenKey(event)">
  <div>
  <label>设置地图的边长：</label>
  <select id="x">
  <option>10</option>
  <option>11</option>
  <option>22</option>
  <option>25</option>
  <option>50</option>
  <option>55</option>
  <option>110</option>
  </select>
  <select id="model">
  <option>常规模式</option>
  <option>加速模式</option>
  </select>
  <label></label>
  <input type="button" value="开始游戏" onclick="start(this)" />
  </div>
  <div id="mainDiv">
  </div>
  </body>
  </html>

以上是关于接触js一周时随手写的贪吃蛇，然后就没再深入学习了，现在要重新学起的主要内容，如果未能解决你的问题，请参考以下文章

HTML5+CSS+JS 贪吃蛇demo

JavaScrip写的贪吃蛇

贪吃蛇“大作战”

JS学习——贪吃蛇代码（简易版）

JS学习——贪吃蛇代码（简易版）

JS学习——贪吃蛇代码（简易版）