javascript贪吃蛇完整版(源码)_javascript技巧

javascript贪吃蛇完整版 注释完整，面向对象

复制代码 代码如下:

   


<script><BR> function $(id){return document.getElementById(id);}<BR>/**************************************************************<BR>* javascript贪吃蛇 v2.4 <br /><BR>* v2.4修正了蛇身颜色可以随着蛇前进而移动<BR>**************************************************************/<BR> //贪吃蛇类<BR> var Snake = {<BR> tbl: null,<BR> /**<BR> * body: 蛇身，数组放蛇的每一节，<BR> * 数据结构{x:x0, y:y0, color:color0},<BR> * x,y表示坐标,color表示颜色<BR> **/<BR> body: [],<BR> //当前移动的方向,取值0,1,2,3, 分别表示向上,右,下,左, 按键盘方向键可以改变它<BR> direction: 0,<BR> //定时器<BR> timer: null,<BR> //速度<BR> speed: 250,<BR> //是否已经暂停<BR> paused: true,<BR> //行数<BR> rowCount: 30,<BR> //列数<BR> colCount: 30,<BR> //初始化<BR> init: function(){<BR> var colors = ['red','orange','yellow','green','blue','purple','#ccc'];<BR> this.tbl = $("main");<BR> var x = 0;<BR> var y = 0;<BR> var colorIndex = 0;<BR> //产生初始移动方向<BR> this.direction = Math.floor(Math.random()*4);<BR> //构造table<BR> for(var row=0;row<this.rowCount;row++){<BR> var tr=this.tbl.insertRow(-1);<BR> for(var col=0;col<this.colCount;col++) {<BR> var td=tr.insertCell(-1);<BR> }<BR> }<BR> //产生20个松散节点<BR> for(var i=0; i<10; i++){<BR> x = Math.floor(Math.random()*this.colCount);<BR> y = Math.floor(Math.random()*this.rowCount);<BR> 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> while(true){<BR> x = Math.floor(Math.random()*this.colCount);<BR> y = Math.floor(Math.random()*this.rowCount);<BR> if(!this.isCellFilled(x,y)){<BR> this.tbl.rows[y].cells[x].style.backgroundColor = "black";<BR> this.body.push({x:x,y:y,color:'black'});<BR> break;<BR> }<BR> }<BR> this.paused = true;<BR> //添加键盘事件<BR> document.onkeydown= function(e){<BR> if (!e)e=window.event;<BR> switch(e.keyCode | e.which | e.charCode){<BR> case 13: {<BR> if(Snake.paused){<BR> Snake.move();<BR> Snake.paused = false;<BR> }<BR> else{<BR> //如果没有暂停，则停止移动<BR> Snake.pause();<BR> Snake.paused = true;<BR> }<BR> break;<BR> }<BR> case 37:{//left<BR> //阻止蛇倒退走<BR> if(Snake.direction==1){<BR> break;<BR> }<BR> Snake.direction = 3;<BR> break;<BR> }<BR> case 38:{//up<BR> //快捷键在这里起作用<BR> if(event.ctrlKey){<BR> Snake.speedUp(-20);<BR> break;<BR> }<BR> if(Snake.direction==2){//阻止蛇倒退走<BR> break;<BR> }<BR> Snake.direction = 0;<BR> break;<BR> }<BR> case 39:{//right<BR> if(Snake.direction==3){//阻止蛇倒退走<BR> break;<BR> }<BR> Snake.direction = 1;<BR> break;<BR> }<BR> case 40:{//down<BR> if(event.ctrlKey){<BR> Snake.speedUp(20);<BR> break;<BR> }<BR> if(Snake.direction==0){//阻止蛇倒退走<BR> break;<BR> }<BR> Snake.direction = 2;<BR> break;<BR> }<BR> }<BR> }<BR> },<BR> //移动<BR> move: function(){<BR> this.timer = setInterval(function(){<BR> Snake.erase();<BR> Snake.moveOneStep();<BR> Snake.paint();<BR> }, this.speed);<BR> },<BR> //移动一节身体<BR> moveOneStep: function(){<BR> if(this.checkNextStep()==-1){<BR> clearInterval(this.timer);<BR> alert("Game over!/nPress Restart to continue.");<BR> return;<BR> }<BR> if(this.checkNextStep()==1){<BR> var _point = this.getNextPos();<BR> var _x = _point.x;<BR> var _y = _point.y;<BR> var _color = this.getColor(_x,_y);<BR> this.body.unshift({x:_x,y:_y,color:_color});<BR> //因为吃了一个食物，所以再产生一个食物<BR> this.generateDood();<BR> return;<BR> }<BR> //window.status = this.toString();<BR> var point = this.getNextPos();<BR> //保留第一节的颜色<BR> var color = this.body[0].color;<BR> //颜色向前移动<BR> for(var i=0; i<this.body.length-1; i++){<BR> this.body[i].color = this.body[i+1].color;<BR> }<BR> //蛇尾减一节， 蛇尾加一节，呈现蛇前进的效果<BR> this.body.pop();<BR> this.body.unshift({x:point.x,y:point.y,color:color});<BR> //window.status = this.toString();<BR> },<BR> //探寻下一步将走到什么地方<BR> pause: function(){<BR> clearInterval(Snake.timer);<BR> this.paint();<BR> },<BR> getNextPos: function(){<BR> var x = this.body[0].x;<BR> var y = this.body[0].y;<BR> var color = this.body[0].color;<BR> //向上<BR> if(this.direction==0){<BR> y--;<BR> }<BR> //向右<BR> else if(this.direction==1){<BR> x++;<BR> }<BR> //向下<BR> else if(this.direction==2){<BR> y++;<BR> }<BR> //向左<BR> else{<BR> x--;<BR> }<BR> //返回一个坐标<BR> return {x:x,y:y};<BR> },<BR> //检查将要移动到的下一步是什么<BR> checkNextStep: function(){<BR> var point = this.getNextPos();<BR> var x = point.x;<BR> var y = point.y;<BR> if(x<0||x>=this.colCount||y<0||y>=this.rowCount){<BR> return -1;//触边界，游戏结束<BR> }<BR> for(var i=0; i<this.body.length; i++){<BR> if(this.body[i].x==x&&this.body[i].y==y){<BR> return -1;//碰到自己的身体,游戏结束<BR> }<BR> }<BR> if(this.isCellFilled(x,y)){<BR> return 1;//有东西<BR> }<BR> return 0;//空地<BR> },<BR> //擦除蛇身<BR> erase: function(){<BR> for(var i=0; i<this.body.length; i++){<BR> this.eraseDot(this.body[i].x, this.body[i].y);<BR> }<BR> },<BR> //绘制蛇身<BR> paint: function(){<BR> for(var i=0; i<this.body.length; i++){<BR> this.paintDot(this.body[i].x, this.body[i].y,this.body[i].color);<BR> }<BR> },<BR> //擦除一节<BR> eraseDot: function(x,y){<BR> this.tbl.rows[y].cells[x].style.backgroundColor = "";<BR> },<BR> paintDot: function(x,y,color){<BR> this.tbl.rows[y].cells[x].style.backgroundColor = color;<BR> },<BR> //得到一个坐标上的颜色<BR> getColor: function(x,y){<BR> return this.tbl.rows[y].cells[x].style.backgroundColor;<BR> },<BR> //用于调试<BR> toString: function(){<BR> var str = "";<BR> for(var i=0; i<this.body.length; i++){<BR> str += "x:" + this.body[i].x + " y:" + this.body[i].y + " color:" + this.body[i].color + " - ";<BR> }<BR> return str;<BR> },<BR> //检查一个坐标点有没有被填充<BR> isCellFilled: function(x,y){<BR> if(this.tbl.rows[y].cells[x].style.backgroundColor == ""){<BR> return false;<BR> }<BR> return true;<BR> },<BR> //重新开始<BR> restart: function(){<BR> if(this.timer){<BR> clearInterval(this.timer);<BR> }<BR> for(var i=0; i<this.rowCount;i++){<BR> this.tbl.deleteRow(0);<BR> }<BR> this.body = [];<BR> this.init();<BR> this.speed = 250;<BR> },<BR> //加速<BR> speedUp: function(time){<BR> if(!this.paused){<BR> if(this.speed+time<10||this.speed+time>2000){<BR> return;<BR> }<BR> this.speed +=time;<BR> this.pause();<BR> this.move();<BR> }<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>

/*************************************************************

* javascript贪吃蛇 v2.4

**************************************************************/


点左边按钮或按Enter开始/暂停游戏



点左边按钮或按Ctrl + ↑加速

点左边按钮或按Ctrl + ↓减速
<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>