JavaScript Snake 完全版（ソースコード）_JavaScript スキル

JavaScript Snake のフルバージョンは完全にコメント化されており、オブジェクト指向になっています。

コードをコピー コードは次のとおりです:

<script><br> function $(id){return document.getElementById(id);}<br>/*************************************************** * **********<br>* javascript Snake 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> 方向: 0,<br> : 250,<br> //一時停止中かどうか<br> 一時停止中: true,<br> //行数<br> rowCount: 30,<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 ; <soling> var colorIndex = 0;<br>//初期移動方向を生成します<br>this.direction = math.floor（math.random（）*4）;<br>tbl.insertrow（-1）; <br> for(var col=0;col<this.colcount> var td=tr.insertCell(-1);<br> }<br> }<br> //产生20个松散节点<br> for(var i=0; i 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.どれ | e.charCode){<br> ケース 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> ケース 37:{//左<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){//ヘビが後ろ向きに歩くのを止めます<br> ブレーク;<br> }<br> Snake.direction = 0;<br> ブレーク;<br> }<br> case 39:{//right<br> ブレーク;<br> }<br> Snake.direction = 1;<br>break;<br> if(event.ctrlKey){<br> }<br> Snake.direction = 2;<br> Break;<br> }<br> } <br> }<br> }, 🎜> //移動<br> move: function(){<br> this .timer = setInterval(function(){<br> スネーク.erase();<br> スネーク .moveneStep (); <br> Snake.paint (); <br>}, this.speed); , <br> // 体を動かします <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> //食べ物を食べたことにより再現 A food<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> 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> //次にどこに行くかを探索します<br> stop: 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> //次のステップは次のステップに移動します if (x //绘制蛇身<br> paint: function(){<br> for(var i=0; i<this.body.length i> 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> 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> の場合(変数 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.速度時間>2000){<BR> return;<BR> }<BR> this.speed =time;<BR> this.pause();<BR> this.mo ve();<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 snake 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>