Document
var snake;var timer;var food;//创建蛇function Snake(){this.width=20;this.height=20;this.position='absolute';this.direct='';//3代表x坐标,2代表y坐标,red代表颜色,null代表当前的div为空,表示还没有创建this.snackbody=[[3,2,'red',null],[2,2,'blue',null],[1,2,'blue',null]];this.setDirect=function(keycode){ switch(keycode)             {                 case 37:                     this.direct='left';                     break;                 case 38:                     this.direct='up';                     break;                 case 39:                     this.direct='right';                     break;                 case 40:                     this.direct='down';                     break;             }} this.show=function(){ for(var i=0;i
0;i--) { //变换x坐标 this.snackbody[i][0]=this.snackbody[i-1][0];//横坐标 this.snackbody[i][1]=this.snackbody[i-1][1];//纵坐标 } switch(this.direct) { case 'right': this.snackbody[0][0]=this.snackbody[0][0]+1; break; case 'down': this.snackbody[0][1]=this.snackbody[0][1]+1; break; case 'left': this.snackbody[0][0]=this.snackbody[0][0]-1; break; case 'up': this.snackbody[0][1]=this.snackbody[0][1]-1; break; default: return; } //判断蛇吃到食物---------------------------------------------------------------             if(this.snackbody[0][0]==food.x&&this.snackbody[0][1]==food.y)             {                 var x=this.snackbody[length][0];                 var y=this.snackbody[length][1];                 this.snackbody.push([x,y,'blue',null]);                 food.show();             }//判断是否已经撞墙 if(this.snackbody[0][0]<0 || this.snackbody[0][0]>19 ||this.snackbody[0][1]<0 ||this.snackbody[0][1]>19)             {                 alert('撞墙死');                 clearTimeout(timer);                 return;             } // this.show(); }}//创建食物function Food(){this.width=20;this.height=20;this.position='absolute';this.color='#00ff00';this._food=null;this.x=0;this.y=0;//show函数this.show=function(){if(this._food==null) { this._food=document.createElement('div'); this._food.style.width=this.width+'px'; this._food.style.height=this.height+'px'; this._food.style.position=this.position; this._food.style.backgroundColor=this.color; document.getElementById('Map').appendChild(this._food); } this.x=Math.floor(Math.random()*20); this.y=Math.floor(Math.random()*20); this._food.style.left=this.x*this.width+'px'; this._food.style.top=this.y*this.height+'px';}}function onload(){snake = new Snake(); //实例化蛇类对象         snake.show();food=new Food();food.show();timer = setInterval('snake.move()',500);}function onkeyd(event){ if(event.keyCode==38)//上 { snake.setDirect(38); //alert('shagn'); } if(event.keyCode==39)//上 { snake.setDirect(39); } if(event.keyCode==40)//上 { snake.setDirect(40); } if(event.keyCode==37)//上 { snake.setDirect(37); }}
#Map{width:400px;height:400px;position:absolute;background-color:#c8c8c8;}  
  
 

写的不是太好,但是基本功能能够实现。大家可以参考一下我的思路。