javascript實現貪吃蛇，javascript貪吃蛇
<html><head><style>body{ background:#444;}.rect{border:1px solid #94F;width:680px;height:680px;}.gridred{width:38px;height:38px;background:red;border:1px #555 solid;float:left}.gridgreen{width:38px;height:38px;background:green;border:1px #555 solid;float:left}.gridblue{width:38px;height:38px;background:blue;border:1px #555 solid;float:left}.st{width:100;height:40;font-size: 30;font-family:Georgia;color:#F40;margin:0.5cm;top:800px;background:#FFF;text-align:center;}h1.important{ color:#FFFF00;}</style><script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script><script>var Max=17;//格子數var direction=3;//蛇正在爬行的方向1左 2上 3右 4下var snack=new Array();var arr=new Array();var foodx,foody;var time;var gameover1=1;//獲得下一個食物的座標function getrand(){ foodx=Math.round(Math.random()*20)%Max; foody=Math.round(Math.random()*20)%Max;}//判斷下一個食物的座標合法性function rand(){getrand();while(arr[foodx][foody]) getrand(); var before=document.getElementById(foodx+"_"+foody); before.setAttribute("class","gridblue");}//開始遊戲function begin(){if(!gameover1)return ;gameover1=0;console.log(foodx);var bu=document.getElementById("beg");bu.disabled=true; snack.push([8,8]); var before=document.getElementById(8+"_"+8); arr[8][8]=1; before.setAttribute("class","gridred"); rand(); time=setInterval("go()",850);}//遊戲結束function gameover(){ clearInterval(time); gameover1=1; alert("gameover!"); var bu=document.getElementById("beg"); bu.disabled=false; for(var i=0;i<snack.length;i++) { var x=snack[i][0]; var y=snack[i][1];arr[x][y]=0;var bu=document.getElementById(x+"_"+y);bu.setAttribute("class","gridgreen"); } var bu=document.getElementById(foodx+"_"+foody);bu.setAttribute("class","gridgreen"); snack.length=0;}//判斷是否出界function legal(x,y){ if(x>=0&&x<Max&&y>=0&&y<Max) return true; return false;}//蛇行走function go(){if(gameover1)return ;var x=snack[snack.length-1][0];var y=snack[snack.length-1][1];switch(direction) { case 1:y-=1;break; case 2:x-=1;break; case 3:y+=1;break; case 4:x+=1;break; } if(!legal(x,y)) { gameover(); return false; } if(arr[x][y]==1) { gameover(); return false; } arr[x][y]=1; snack.push([x,y]); var before=document.getElementById(x+"_"+y); before.setAttribute("class","gridred"); if(!(x==foodx&&y==foody)) { var point=snack.shift(); arr[point[0]][point[1]]=0; var last=document.getElementById(point[0]+"_"+point[1]); last.setAttribute("class","gridgreen"); } else { rand(); } return true;}function map()//產生地圖{ arr.length=Max; for(var i=0;i<Max;i++) { arr[i]=new Array(); arr[i].length=Max; } for(var i=0;i<Max;i++) for(var j=0;j<Max;j++) { arr[i][j]=0; } var x=document.getElementById("body"); for(var i=0;i<Max*Max;i++) { var local=document.createElement("div"); local.setAttribute("class","gridgreen"); local.id=parseInt(i/Max)+'_'+parseInt(i%Max);x.appendChild(local); }}//監測鍵盤按鍵$(document).ready(function(){$("html").keydown(function(event){ keycommand(event.which);});});//按鍵命令觸發function keycommand(which){ if(which!=32&&(which<37||which>40)) return ; switch (which) { case 32:stop();break; case 37:changeDirection(1);break; case 38:changeDirection(2);break; case 39:changeDirection(3);break; case 40:changeDirection(4);break; }}//改變蛇的方向function changeDirection(x){ if(Math.abs(x-direction)==2) return ; direction = x; clearInterval(time); if(go()) time=setInterval("go()",800-snack.length*15+50);}</script></head><body onload="map()" ><br/><h1 align="center" class="important">貪吃蛇</h1><div align="center"><div class="rect" id="body" ></div></div><div align="center"><button id="beg" onclick="begin()" class="st">start</button></div></body></html>
首先：
貪吃蛇運動的控制變數：速度，方向，長度。這三個變數是全域變數。
控制方向：綁定一個onkeycode事件：www.phpweblog.net/...8.html 在這裡面尋找操作按鍵對應的keycode。
速度和長度的變化：直接改變變數即可。
然後設定移動的間隔時間：用setTimeout(function(){},1000);設定函數執行的間距時間。
用javascript寫貪吃蛇中蛇的轉向原理或代碼
前進，蛇身數組取(去)尾添頭,轉向也一樣。
不過添加頭部的位置由觸發的方向決定。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
