javascript貪吃蛇完整版 註解完整,物件導向 複製程式碼 程式碼如下: 貪吃蛇Snake v2.4 <BR> body{<BR> 9pt;<BR> }<BR> table{<BR> border-collapse: collapse;<BR> border-collapse: collapse;<BR> td{<BR> height: 10px;<BR> width : 10px;<BR> font-size: 0px;<BR> }<BR> .filled{<BR> 🎜><BR><script><BR> function $(id){return document.getElementById(id);}<BR>/**************************************************** **********<BR>* javascript貪吃蛇v2.4 <br /><BR>* v2.4修正了蛇身顏色可以隨著蛇前進而移動<BR>*** ************************************************** *********/<BR> //貪婪<BR> tbl: null,<BR> /**<BR> * body: 蛇身,陣列放蛇的每一節,<BR> * 資料結構{x:x0, y:y0, color:color0},<um * 資料結構{x:x0, y:y0, color:color0},<🠟; <BR> **/<BR> ,右,下,左, 按鍵盤方向鍵可以改變它<BR> direction: 0,<BR> //定時器<BR> speed: 250,<BR> //是否已暫停<BR> paused: true,<BR> //行數<BR> colCount: 30,<BR> //初始化<BR> init : function(){<BR> var colors = ['red','orange','yellow','green','blue','purple』 ("main");<BR> var x = 0;<BR> var y //產生初始移動方向<BR> this.direction = Math.floor( Math.random()*4);<BR> //建構table<BR> var tr=this.tbl.insertRow(-1) ;<BR> for(var col=0;col<this.colCount;col ) {<BR> }<BR> }<BR> //產生20個鬆散節點<BR> for(var i=0; i<10; i ){< ath.random()*this.colCount);<BR> y = Math.floor(Math.random()*this.rowCount);<BR> colorIndex = Math.floor(Math.rand CellFilled(x,y)) {<BR> }<BR> // 產生蛇頭<BR> <BR> x = Math.floor(Math.random()*this.colCount);<BR> if(!this.isCellFilled( !this.isCellFilled(!this.isCellFilled(!this.isCellFilled) !this.isCellFilled(!this.isCellFilled(!this.isCellFilled) x,y)){< .cells[ x].style.backgroundColor = "black";<BR> , body.push({x:x,y: break;<BR> }<BR> } <BR> this.paused = true;<BR> // if (!e)e=window.event;<BR> | e.which | e.charCode){<BR> 情況 13: {<BR> if(Snake.paused){<BR> Snake.move();<BR> Snake.paused = false;<BR> }<BR> 其他{<BR> // 若無暫停,且停止行動<BR> Snake.paused = true;<BR> 休息;<BR> }<BR> case 37:{//left<BR> > }<BR> <BR> break;<BR> }<BR> case 38:{//up<BR> //快捷鍵在這裡起作用<BR> if(event.ctrlKey){<BR> Snake.speedUp(-20) ;<BR> break;<BR> > }<BR> break;<BR> }<BR> if(Snake.direction==3){//阻止蛇倒轉<BR> }<BR> = 1;<BR> break;<BR> case 40:{//down<BR> Snake.speedUp(20);<BR> }<BR> if(Snake.direction==0){//阻止蛇倒退走<BR> break;<BR> }<BR> Snake.direction = 2;<BR> break;<BR> }<BR> } <BR> }<BR> },<BR> this.timer = setInterval(function(){<BR> Snake.erase();< .moveOneStep();<BR> Snake.paint();<BR> //移動一節身體<BR> moveOneStep: function(){<BR> if(this.checkNextStep()==-1){<BR> clearInterval(this.timer);<BR> );<BR> return;<BR> } <BR> if(this.checkNextStep()==1){<BR> var _x = _point.x;<BR> var _y = _point.y;<BR> var _color = this.getColor(_x,_y);<BR> this.body.unshift({x:_x,y: 食物,所以再產生一個食物<BR> this.generateDood();<BR> //window.status = this.toString();<BR> var point = this.getNextPos();<BR>;<BR> //保留第一節的顏色<BR> var color = this.body[0].color;<BR> ngth- 1; i ){<BR> this.body[i].color = this.body[i 1].color;<BR> 節, 蛇尾加一節,呈現蛇前進的效果<BR> this.body.pop();<BR> , //window.status = this .toString();<BR> },<BR> //探索下一步將走到何處<BR> pause: function(){<BR> this.paint();<BR> },<BR> getNextPos: function(){<BR> var x = this.body[0].x;<BR> var color = this.body[0].color ;<BR> //上<BR> if(this.direction==0){< }<BR> //向右<BR> eldse if(this. ){<BR> x ;<BR> else if(this.direction==2){<BR> y ;<BR> > else{<BR> x--;< //回傳一個座標<BR> return {x:x,y:y};<BR> 的下一步是什麼<BR> checkNextStep: function(){<BR> 🎜> var y = point.y;<BR> if (x<0||x>=this.colCount||y<0||y>=this.rowCount){<BR> return -1 for( var i=0; i<this.body.length; i ){<BR> if(this.body[i].x==x&this return -1 ;//碰到自己的身體,遊戲結束<BR> }<BR> 🎜> return 1;//有東西<BR> }<BR> return 0;/// 空地<BR> },<BR> for(var i=0; i<this.body.length; i ) {<BR> this.eraseDot(this.body[i].x, this.body[i].y);<BR> ,<BR> // 膚色蛇身<BR> Paint: function(){<BR> this.paintDot(this.body[ i].x, this.body[i].y,this.body[i].color);<BR> }<BR> : function(x ,y) {<BR> this.tbl.rows[y].cells[x].style.backgroundColor = "";<BR> tbl .rows[y].cells[x].style.backgroundColor = color;<BR> },<BR> //得到一個座標上的顏色< return this .tbl.rows[y].cells[x].style.backgroundColor;<BR> },<BR> //用於調試< var str = "" ;<BR> for(var i=0; i<this.body.length; i ){<BR> }:" this.body[i].color " - ";<BR> }<BR> 一個座標點有沒有填入<BR> isCellFilled: function(x ,y){<BR> if(this.tbl.rows[y].cells[x].style.backgroundColor == ""){<BR> }<BR> 回復true ;<BR> },<BR> // 重新開始<BR> restart: function(){< clearInterval(this.timer);<BR> }<BR> }<BR> =0; i<this.rowCount;i ){<BR> this.tbl.deleteRow(0);<BR> ];<BR> this.init();<BR>這個速度= 250;<BR> },<BR> // 加速中<BR> 🎜> if(this.speed time<10|| this.速度時間>2000){<BR> return;<BR> this.pause();<BR> this.move ();<BR> > } ,<BR> //產生食物。<BR> generateDood: function(){<BR> var Colors = ['red','orange',' yellow','green','blue','purple','#ccc'];<BR> var x = Math.floor(Math.random()*this.colCount);<BR> var y = Math.floor(Math.random()*this.rowCount);<BR> var colorIndex = Math.floor(Math. random()*7);<BR> if(!this.isCellFilled(x,y)){<BR> this.tbl.rows[y].cells[x].style.backgroundColor = Colors[colorIndex];<BR> }<BR> }<BR> };<BR></script><BR><body onload="Snake.init();"><BR>/*************************************************** * *********<br /><BR>* JavaScript スネーク v2.4<br /><BR>**************** * ********************************************/< ;br /><BR><table id="main" border="1" cellpacing="0" cellpadding="0"></table><BR><input type="button" id ="btn" value="开始/暂停止" />点左边按钮または按Enter开始/暂停止游戏<br /><BR><input type="button" id="reset" value="再新开始" /><br /><BR><input type="button" id="upSpeed" value="加速" />点左边按钮または按Ctrl ↑加速<br /><BR><input type="button" id="downSpeed" value="减速" />点左边按钮または按Ctrl ↓减速<BR><script><BR> $('btn').onclick = function(){<BR> if(Snake.paused){<BR> Snake.move();<BR> Snake.paused = false;<BR> }<BR> else{<BR> Snake.pause(); <BR> Snake.paused = true;<BR> }<BR> };<BR> $("reset").onclick = function(){<BR> Snake.restart();<BR> this.blur( );<BR> };<BR> $("upSpeed").onclick = function(){<BR> Snake.speedUp(-20);<BR> };<BR> $("downSpeed").onclick = function(){<BR> Snake.speedUp(20);<BR> };<BR></script><BR></body><BR></html><BR>