JS贪吃蛇

//var food;
var map;//设为全局变量便于在其他方法中的调用；
var snack;
var food;
var snackEyeR=null;
var snackEyeL=null;
var time;
var n=true;
function starts(){
 time=setTimeout('snack.move()',500);
// audio.play();
}
function stops(){
 clearTimeout(time);
// audio.pause();
}

function Map(){
 this.width=800;
 this.height=600;
 this._map=null；
 this.display=function(){
  this._map=document.createElement("div");
  document.getElementsByTagName("body")[0].appendChild(this._map);
  //给div设置样式
  this._map.style.width=this.width+"px";//食物可以将其划分为40块
  this._map.style.height=this.height+"px";//食物将其分为30块
  this._map.style.background="mediumseagreen";
  this._map.style.margin="20px auto";
  this._map.style.position="relative"; 
 }
}
//创建食物对象
function Food(){
  this.width=20;
  this.height=20;
  this._food=null;
 // 定义两个属性x,y 用来存储 食物的坐标(所占据的格子)
  this.x=0;
  this.y=0;
 
  this.display=function(){
   if(this._food==null){
    this._food=document.createElement("div");
    map._map.appendChild(this._food);
    this._food.style.width=this.width+"px";
    this._food.style.height=this.height+"px";
    this._food.style.background="yellow";
    this._food.style.borderRadius=this.height+"px";
    this._food.style.position="absolute";
   }
   //食物移动的格子是从0----39，移动的位置是食物本身大小的倍数
   this.x=Math.round(Math.random()*39);
   this.y=Math.round(Math.random()*29);
   this._food.style.left=this.x*this.width+"px";
   this._food.style.top=this.y*this.height+"px";;
  }
}

//创建-----蛇
function Snack(){
 this.width=20;
 this.height=20;
 //创建一个记录蛇的变量
 this.directions=null;
 this.snackArr=[
   [8,5,"red",null,],
   [7,5,"white",null,],
   [6,5,"white",null,]
  ];
 //利用数组创建蛇头，蛇身，蛇尾，显示蛇眼睛；
 this.display=function(){
  for(var i=0;i<this.snackArr.length;i++){
   //加if是为了确保蛇只被创建一次
  if(this.snackArr[i][3]==null){
    this.snackArr[i][3]=document.createElement("div");
    map._map.appendChild(this.snackArr[i][3]);
    this.snackArr[i][3].style.height=this.height+"px";
    this.snackArr[i][3].style.width=this.width+"px";
    this.snackArr[i][3].style.borderRadius=this.height+"px";
    this.snackArr[i][3].style.background=this.snackArr[i][2];
    this.snackArr[i][3].style.position="absolute";
  }
      //  创建蛇眼睛
  if(snackEyeL==null&&snackEyeR==null){
   snackEyeL=document.createElement("div");
   snackEyeR=document.createElement("div");
   snackEyeL.style.position="absolute";
   snackEyeR.style.position="absolute";
   snackEyeL.style.width=5+"px";
   snackEyeR.style.width=5+"px";
   snackEyeR.style.height=5+"px";
   snackEyeL.style.height=5+"px";
   snackEyeL.style.borderRadius=5+"px";
   snackEyeR.style.borderRadius=5+"px";
   snackEyeL.style.background="black";
   snackEyeR.style.background="black";
   
   snackEyeR.style.top=2+"px";
   snackEyeR.style.left=10+"px";
   snackEyeL.style.top=12+"px";
   snackEyeL.style.left=10+"px";
   this.snackArr[0][3].appendChild(snackEyeR);
   this.snackArr[0][3].appendChild(snackEyeL);
  }
  
  this.snackArr[i][3].style.left=this.snackArr[i][0]*this.width+"px";
  this.snackArr[i][3].style.top=this.snackArr[i][1]*this.height+"px";
  } 
  }
 
 //获取蛇移动的方向
 this.setDirect=function(direct){
   switch (direct){
     case 37:
     this.directions="left";
     break;
     case 38:
     this.directions="up";
     break;
     case 39:
     this.directions="right";
     break;
     case 40:
      this.directions="down";
     break;
     case 32:
      if(n){
           stops();
           console.log("stops")
           n=false;
          }else{
           starts();
           console.log("starts")
           n=true;
          } 
         break;
    default:
     break;
   }
//       
  }
  //蛇移动的方法
 this.move=function(){
不为空的话则进行蛇的移动
  if(this.directions!=null){
    // 控制蛇身 移动
    for (var i=this.snackArr.length-1;i>0;i--){
     //此处判断的是数组中[i][0]的大小
//     将大的数即数的位置是小的【i-1】，赋给小的数即位置是大的【i】；
     this.snackArr[i][0]=this.snackArr[i-1][0];
     this.snackArr[i][1]=this.snackArr[i-1][1];
    } 
       switch(this.directions){
    case "up":this.snackArr[0][1]-=1;
    //此处设置蛇的眼睛方向的改变
    
    //蛇头动；
       snackEyeL.style.left=2+"px";
       snackEyeL.style.top=3+"px";
       snackEyeR.style.top=3+"px";
       snackEyeR.style.left=10+"px";
     break;
    case "down":this.snackArr[0][1]+=1;
       snackEyeL.style.left=2+"px";
       snackEyeL.style.top=3+"px";
       snackEyeR.style.top=3+"px";
       snackEyeR.style.left=10+"px";
     break;
    case "left":this.snackArr[0][0]-=1;
       snackEyeL.style.left=10+"px";
       snackEyeL.style.top=12+"px";
       snackEyeR.style.top=2+"px";
       snackEyeR.style.left=10+"px";
       break;
    case "right":this.snackArr[0][0]+=1;
       snackEyeL.style.left=10+"px";
       snackEyeL.style.top=12+"px";
       snackEyeR.style.top=2+"px";
       snackEyeR.style.left=10+"px";
       break;
    default:break;
    }
     }
      
  //    1,判断蛇头 碰撞食物
//  分析: 2,随机改变食物的位置, 3,同时蛇身体加一节
  if(this.snackArr[0][0]==food.x&&this.snackArr[0][1]==food.y){
   food.display();
   
  // 添加一节  蛇身  到 snackArr中
   var x=this.snackArr[this.snackArr.length-1][0];
   var y=this.snackArr[this.snackArr.length-1][1];
   this.snackArr.push([x,y,'pink',null]);
   }
  
  // 判断碰到墙壁就死亡
  if(this.snackArr[0][0]<0 || this.snackArr[0][0]>39 || this.snackArr[0][1]<0 || this.snackArr[0][1]>29){
   audio.pause();
   alert('Game Over!');
   return false;
    }
    //判断碰到自身就死亡
  //1.判断蛇头和蛇的其他块的位置一样时
  for(var i=1;i<this.snackArr.length;i++){
   if(this.snackArr[0][0]==this.snackArr[i][0]&&this.snackArr[0][1]==this.snackArr[i][1])
   {
    alert("撞到自己啦，gameOver!");
    audio.pause();
   }
  }
  //通过蛇对象，调用显示蛇
    snack.display();
//    console.log("s");
    time=setTimeout("snack.move()",500);
  }

页面加载函数：

window.onload=function(){
 map=new Map();
 map.display();
 
 food=new Food();
 food.display();
 
 snack=new Snack();
// snack.display();
//因为move中调用了此函数
 snack.move(); 
 
//添加背景音乐
 audio=document.createElement("audio");
 audio.src="music/小旭音乐 - 贪吃蛇大作战-夺宝模式.mp3";
 document.body.appendChild(audio);
 document.getElementsByTagName("body")[0].onkeydown=function(event){
  audio.play();
  snack.setDirect(event.keyCode);
	 }
}