JavaScript Snake full version (source code)_javascript skills

The full version of javascript Snake is fully commented and object-oriented

Copy code The code is as follows:

<script><br> function $(id){return document.getElementById(id);}<br>/***************************************************** **********<br>* javascript Snake v2.4 <br /><br>* v2.4 corrects the color of the snake body to move as the snake moves forward<br>* *************************************************** ***********/<br> //Greedy snakes <br> var Snake = {<br> tbl: null,<br> /**<br> * body: snake body, array containing each section of the snake, <br> * data structure {x:x0, y:y0, color:color0}, <br> * x, y represents coordinates, color represents color <br> **/<br> body: [],<br> //Current moving direction, values ​​0,1,2 ,3, means up, right, down and left respectively. Press the keyboard direction keys to change it. <br> direction: 0,<br> : 250,<br> //Whether it has been paused<br> paused: true,<br> //Number of rows<br> rowCount: 30,<br> colCount: 30,<br> //Initialization<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> //Generate Initial movement direction<br> this .direction = Math.floor(Math.random()*4);<br>                                                                                                                                                                                                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>                                                                                                                                     break; <BR> Break; <BR>} <BR> case 38: {// up <BR> // Shinbar to play here <BR> if (event.ctrlkey) {<BR> Snake.speedup (-20) (-20) ;<BR> break;<BR> }<BR> if(Snake.direction==2){//Stop the snake from walking backwards<BR> break;<BR> }<BR> Snake.direction = 0;<BR> break;<BR> }<BR> case 39:{//right<BR> break;<BR> }<BR> Snake.direction = 1;<BR> break;<BR>                                                                       if(event.ctrlKey){<BR>                                                              }<BR>                                                                                                                                                                                            Snake.direction = 2;<BR> break;<BR> }<BR> } <BR> }<BR> },<BR> //Move<BR> move: function(){<BR> this.timer = setInterval(function(){<BR> Snake. erase();<BR> Snake .moveneStep (); <BR> Snake.paint (); <BR>}, this.speed); <BR>}, <BR> // Move the body <BR> Moveonetep: Function () {<BR> if(this.checkNextStep()==-1){<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> //Reproduced because of eating a food A food<BR> this.generateDood();<BR> return;<BR> }<BR> //window.status = this.toString();<BR> var point = this.getNextPos();<BR> //Keep the color of the first section<BR> var color = this.body[0].color;<BR> i Effect<BR> this.body.pop();<BR> this.body.unshift({x:point.x,y:point.y,color:color});<BR> //window.status = this .toString();<BR> },<BR> //Explore where to go next<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>                                                                                                                                                                                          else if(this.direction==1 ){<BR>                                                       }<BR>                                                                                                                                                                             >                                                                                        <BR> //Check will be moved to What is the next step? if (x<0 || i ;//When it touches your own body, the game ends<BR>                                                                                                              }<BR>                                                                                                                                                                                                                                                                                                       {<BR>            this.eraseDot(this.body[i].x, this.body[i].y);<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. 무작위()*7);<br>            if(!this.isCellFilled(x,y)){<br>               this.tbl.rows[y].cells[x].style.BackgroundColor = colors[colorIndex];<br>           }<br>        }<br>    };<br></script>

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

* 자바스크립트 스네이크 v2.4

**************** * *********************************************/< ;br />

点左边按钮或按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>