标签：nod 计数器 return back 单元 计数 单元格 cell big
废话不多说，下面是源码，希望大牛们指出问题
| <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一周时随手写的贪吃蛇，然后就没再深入学习了，现在要重新学起
标签：nod 计数器 return back 单元 计数 单元格 cell big
原文地址：http://www.cnblogs.com/CaoAChun/p/7472631.html
