javascript寫的貪喫蛇(循環遍歷DOM思路,非數組)

文章來源：http://www.kaifadi.com/javascript/218.html

<mce:script type="text/javascript"><!-- var snake={ st:500,//速度初始爲0.5秒移動一次,數值越小速度越快！ num:0, start:function(){//初始化,建立外圍DIV框架，鍵盤事件,食物或蛇的初始數量和位置 div=document.createElement('div'); div.style.cssText="position:absolute;margin:0;padding:0;left:300px;top:20px;width:400px;height:400px;border:1px solid #000;"; div.id='kj'; div1=document.createElement('div'); div1.style.cssText="position:absolute;margin:0;padding:0;left:300px;top:430px;width:400px;height:100px;"; document.body.appendChild(div); document.body.appendChild(div1); div1.innerHTML='鍵盤上↑↓←→代表方向控制，小鍵盤上0加速，1減速，空格暫停!'; document.οnkeydοwn=function(e){snake.dir(e||window.event);} this.createshe(0,200); this.createshe(20,200); this.createfood(); }, pause:function(){//遊戲暫停 clearTimeout(this.tt); }, createfood:function(){//產生選區內的一個隨機座標的食物(SPAN標籤)！ this.x=Math.round(Math.random()*19)*20; this.y=Math.round(Math.random()*19)*20; this.p=document.getElementsByTagName("p");//獲得所有蛇對象 while(this.checkbody(this.x,this.y)) {//進行循環判斷，讓隨即生成的食物位置不能和蛇的位置重合，重合就重刷隨機數！ this.x=Math.round(Math.random()*19)*20; this.y=Math.round(Math.random()*19)*20; } this.food=document.createElement("span"); this.food.style.cssText="position:absolute;width:20px;height:20px;background:green;border:1px solid #ccc;"; this.food.style.left=this.x+"px"; this.food.style.top=this.y+"px"; document.getElementById('kj').appendChild(this.food); }, createshe:function(a,b){//用P標籤創建蛇！ var sna=document.createElement("p"); sna.style.cssText="position:absolute;margin:0;padding:0;width:20px;height:20px;background:red;border:1px solid #ccc;"; sna.style.left=parseInt(a)+"px"; sna.style.top=parseInt(b)+"px"; this.x1=parseInt(a); this.y1=parseInt(b); document.getElementById('kj').appendChild(sna); }, dir:function(e){//方向控制 var edir; if(typeof(this.tt)!='undefined'){clearTimeout(this.tt);}//防止方向鍵多次鍵入導致速度不斷增加! if(typeof(direction)!='undefined') {edir=Math.abs(direction-e.keyCode)==2?direction:e.keyCode;}//反向無效！ else {edir=e.keyCode;} switch(edir) { case 37:this.gox = -20;this.goy=0; direction=37; this.move(); break;//左 case 39:this.gox = 20; this.goy=0; direction=39; this.move(); break;//右 case 38:this.gox = 0; this.goy=-20;direction=38; this.move(); break;//上 case 40:this.gox = 0; this.goy=20; direction=40; this.move(); break;//下 case 32:this.pause(); break;//暫停 case 96:this.st=this.st-100;this.move();break;//加速 case 97:this.st=this.st+100;this.move();break;//減速 } }, move:function(){//響應鍵盤進行移動的事件 w=this.x1+this.gox;//每喫一次食物獲得一次座標 h=this.y1+this.goy; if(w<0||w>=400||h<0||h>=400||this.checkbody(w,h))//進行邊界檢測和自身的碰撞檢測 { clearTimeout(this.tt); alert("Game over!吃了"+this.num+"個食物!"); window.location.reload();//遊戲結束重新刷新頁面！ } if(this.x1==this.x&&this.y1==this.y) {//判斷蛇頭是否遇到食物的位置，如果是就移除食物，重新生成，否則就是刪除最開始建立的蛇，也就是蛇尾！ document.getElementById('kj').removeChild(this.food); this.num++; this.createfood(); } else { document.getElementById('kj').removeChild(this.p[0]); } this.createshe(w,h); this.tt=setTimeout("snake.move()",this.st); }, checkbody:function(a,b){//檢查蛇是否碰到自身的方法 this.p=document.getElementsByTagName("p"); for(var i=0,j=this.p.length;i<j;i++) { if(this.p[i].style.left==a+"px"&&this.p[i].style.top==b+"px")return true; } } } window.οnlοad=function(){ snake.start(); } // --></mce:script>