贪吃蛇 js实现
原博文写于新浪微博-2012-07-04，现在重新整理至此。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>贪吃蛇---By 晨风</title> <style type="text/css"> .table_back{width:320px;height:320px;border-bottom:1px solid black;border-right:1px solid black;} .floor{border-left:1px solid black;border-top:1px solid black;font-size:1px;} </style> </head> <body> <script type="text/javascript"> function Snake(){ var Snake_this=this; this.floors={}; //记录网盘，以操作网盘 this.direction=0; //记录移动方向 this.offset=[[0, -1], [-1, 0], [0, +1], [+1, 0]]; this.colors=["#f0f", "#c00", "#0c0", "#c00", "#880", "#808", "#088"]; //食物的颜色 this.colorIndex=0; //记录下一个食物的颜色 //创建网盘 this.table_back=document_createElement_x_x("table"); this.table_back.className="table_back"; this.table_back.cellPadding="0px"; this.table_back.cellSpacing="0px"; for(var i=0;i<20;i++){ var tr=this.table_back.insertRow(i); for(var j=0;j<20;j++){ var td=tr.insertCell(j); td.className="floor"; td.innerHTML=" "; this.floors[[i,j]]={ td:td, pos:[i,j], color:"", type:"space" }; } } document.body.a(this.table_back); var documentKeydown=function(e){ //用来处理按键事件，记录按键的方向并改变全局变量this.direction e=event; var code=e.keyCode||e.which||e.charCode; if(code<37||code>40) return; var direction=code-37;//方向左:37,上:38，右:39，下:40 if (Snake_this.offset[direction][0] == Snake_this.offset[Snake_this.direction][0] && Snake_this.offset[direction][1] == -Snake_this.offset[Snake_this.direction][1]) return; // 不回头 if (Snake_this.offset[direction][1] == Snake_this.offset[Snake_this.direction][1] && Snake_this.offset[direction][0] == -Snake_this.offset[Snake_this.direction][0]) return; // 不回头 Snake_this.direction = direction; if(e.preventDefault) e.preventDefault(); //若事件有默认动作则取消时间的默认动作 if (e.stopPropagation) e.stopPropagation(); //阻止把事件分派到其他节点 e.cancelBubble = true; e.returnValue = false; }; if (document.addEventListener) //监听事件 document.addEventListener("keydown", documentKeydown, true); else if (document.attachEvent) document.attachEvent("onkeydown", documentKeydown); this.replay(); }; Snake.prototype={ replay:function(){ this.direction=0; this.colorIndex=0; //初始化网盘，也就是初始化this.floors数组和它里面的td的style让网页现在初始 for(var i=0;i<20;i++){ for(var j=0;j<20;j++){ var now_floor=this.floors[[i,j]]; now_floor.td.style.backgroundColor=""; now_floor.color=""; now_floor.type="space"; } } this.bodys=[]; //数组里装的是对象，表示蛇的身体格子 var center=[10,10]; for(var i=0;i<3;i++){ //初始化蛇身，开始是三个格子 this.bodys.push({ floor:this.floors[center], color:this.colors[this.colorIndex] }); this.colorIndex=(this.colorIndex+1)%7; //colors数组共有七个颜色 } clearInterval(this.timer); //初始头部第一个格子，剩下的两个格子会在move函数里被改变，可是刚开始时会被覆盖，移动三个就不会了 this.bodys[0].color="#000"; this.bodys[0].floor.color=this.bodys[0].color; this.bodys[0].floor.type="body"; this.bodys[0].floor.td.style.backgroundColor=this.bodys[0].color; this.randmoFool(); //随机投放食物 clearInterval(this.timer); var self=this; //这步很重要，找bug找了很久啊啊。。因为不这样，下面这句直接用this.move时这个this就是setInterval的this了 this.timer=setInterval(function(){self.move();},500); }, gameOver:function(){ clearInterval(this.timer); alert("Game Over!"); }, move:function(){ var head=[ this.bodys[0].floor.pos[0]+this.offset[this.direction][0], this.bodys[0].floor.pos[1]+this.offset[this.direction][1] ]; if(!this.floors[head]||this.floors[head].type=="body"){ this.gameOver(); return; } var tail=this.bodys[this.bodys.length-1].floor.pos; if(this.floors[head].type=="food"){ this.bodys.push({color:this.floors[head].color}); this.randmoFool(); } for(var i=this.bodys.length-1;i>0;i--){ this.bodys[i].floor=this.bodys[i-1].floor; } this.bodys[0].floor = this.floors[head]; this.bodys[0].floor.color = this.bodys[0].color; this.floors[tail].color = ""; this.floors[tail].type = "space"; this.floors[tail].td.style.backgroundColor=""; for(var i=0;i<this.bodys.length;i++){ this.bodys[i].floor.color = this.bodys[i].color; this.bodys[i].floor.type = "body"; this.bodys[i].floor.td.style.backgroundColor=this.bodys[i].color; } }, randmoFool:function(){ var pos; do{ pos=[ Math.floor(Math.random()*20), Math.floor(Math.random()*20) ]; }while(this.floors[pos].type!="space"); this.floors[pos].type="food"; //this.floors[[2,3]].td.style.backgroundColor="red"; this.floors[pos].td.style.backgroundColor=this.colors[this.colorIndex]; //alert(this.colors[this.colorIndex]); this.floors[pos].color=this.colors[this.colorIndex]; //alert("hi"); this.colorIndex=(this.colorIndex+1)%7; } }; var s=new Snake(); </script> </body> </html>
