js 实现网页贪吃蛇

    我现在大二下学期了，老师正好在教web 前端设计，所以写个js 实现网页贪吃蛇 供大家参考

   

   我们先js 来写一个储存蛇身坐标点类：

         

function Stack()                                 
{
 var stack=new Array(10);
 var realStackLength=0;
 var currentLength=10;          //蛇身走坐标的实际数量
 var movePoint=0;                   //相当一个指针 ，用来扫描蛇个个坐标点
//-----------------判断movePoint是否越界---------------------- 
 this.IsStackEmpty=function(){    
   if(movePoint==0)
   {
    return false;
    }
    return true;
  }
//----------------判断是否达到蛇的头部----------------------  
 this.IsStackFull=function(){
   if(movePoint==currentLength-1)
   {
    return false;
    }
   return true;
  }
//----------------添加一个坐标点----------------
 this.Push=function(point){
   if(!this.IsStackFull()) this.growStack();
   //++realStackLength;
   stack[movePoint++]=point;
   //if(!this.IsStackEmpty())return false;
    
  }
//---------------从开始取出个个坐标点----------------------------
 this.Pop=function()
 {
  if(!this.IsStackEmpty()){ return false;}
  var point=stack[--movePoint];
  return point;
  }
// ------------翻倍增长坐标数组------------------------------
 this.growStack=function()
 {
  var oldStack=new Array(currentLength);
  oldStack=stack;
  currentLength=currentLength*2;
  var stack=new Array(currentLength);
  stack=oldStack;
  }

//--------------得到实际长度--------------------------------------
 this.getRealStackLength=function()
 {
  realStackLength=0;
  for(var i=0;i<currentLength;i++)
  {
   ++realStackLength;
   if(stack[i]==null)
   {
    //alert(realStackLength);
    //alert(i);
    return realStackLength-1;
    }
   }//alert(realStackLength);
  
  }
//---------------得到首元素-------------------------------------------- 
 this.getHeadE=function()
 {
  return stack[this.getRealStackLength()-1];
  }

//---------------删除最后坐标------------------------------------
 
 this.removeStackLast=function(){
  var length = this.getRealStackLength();
  for(var i=0;i<length;i++)
  {
   stack[i]=stack[i+1];
   if(i==length-1)
   {
    --movePoint;
    //alert(i);
    stack[i]=null;
    }
   } 
  }
//---------------要指针会到头部--------------------------------------
 this.AgainRepointPop=function()
 {
  movePoint=this.getRealStackLength();
  }
}

 

 

下面创造蛇 和 蛇的移动：

 

var timerId;                                                 //获取蛇移动定时器的ID
var foodTimerId;                              
var fristStartThread=false;                     //是否第一次开始
var frist=true;
var borderTop=70;
var borderLeft=170;
var snakeBody;                                     //蛇体
var foodPoint;
var foodEat=false;                              //是否吃到东西
var keyLeft=false;                                //判断上下左右
var keyUp=false;
var keyRight=true;
var keyDown=false;

function startTimer()
{
 timerId=setInterval(RunGame,300);
 }
 
//-----------------------------------------------
function endTimer()
{
 clearInterval(timerId);
 }
//--------------------------------------------------
//------------初始蛇---------------------------------
function initSnakeL()
{
 snakeBody=new Stack();
 for(var i=0;i<3;i++)
 {
  snakeBody.Push(new Point(i*10,0));
  }
 frist=false;
 }
// ---------------------------------------------------------
function selfGo()
{
 var frontPoint =snakeBody.getHeadE();
 if(keyLeft)
 {
  snakeBody.Push(new Point(frontPoint.x-10,frontPoint.y));
  }
 else if(keyUp)
 {
  snakeBody.Push(new Point(frontPoint.x,frontPoint.y-10));
  }
 else if(keyRight)
 {
  snakeBody.Push(new Point(frontPoint.x+10,frontPoint.y));
  }
 else if(keyDown)
 {
  snakeBody.Push(new Point(frontPoint.x,frontPoint.y+10));
  }
}
 
//---------------创建蛇-----------------------------------
function makeSnake()
{ 
 createFood();
 selfGo();
 
 var boo= eatFood()
 
 if(!boo)
 {
  snakeBody.removeStackLast();
  }
 
 

 var divs = document.getElementsByTagName("div");
 for(var i = 0;i<divs.length;i++)
 {
  //alert(divs[i].id);
  if(divs[i].id!="controlDiv"&&divs[i].id!="bodyBorderDiv"&&divs[i].id!="foodDiv")
   document.body.removeChild(divs[i]);
 }
 for(var i=0;i<snakeBody.getRealStackLength();i++)
 {
   var d= document.createElement("div");
   d.className='snakeSigleDiv';
   //alert(snakeBody.Pop().x);
   var point=snakeBody.Pop();
   d.style.top=point.y+borderTop+"px";
   d.style.left=point.x+borderLeft+"px";
   //alert(point.x+" "+point.y);
   document.body.appendChild(d); 
 }
 
 snakeBody.AgainRepointPop();
}
//------------键盘按下-------------------------------------------
document.onkeydown = grabEvent;
function grabEvent(e){
 
 var frontPoint =snakeBody.getHeadE();

 //alert(frontPoint.x+" "+frontPoint.y);

 switch(e.keyCode)
 {
  case 37:
    keyLeft=true;
    keyUp=false;
    keyRight=false;
    keyDown=false;         //左
  break;
  case 38:
    keyLeft=false;
    keyUp=true;
    keyRight=false;
    keyDown=false; 
  break;
  case 39:
    keyLeft=false;
    keyUp=false;
    keyRight=true;
    keyDown=false; 
  break;
  case 40:
    keyLeft=false;
    keyUp=false;
    keyRight=false;
    keyDown=true; 
   //snakeBody.Push(new Point(frontPoint.x,frontPoint.y+10));
   
  break;
 }
} 

//------------------------------蛇吃食物--------------------------------------

function eatFood()
{
 var pointE=snakeBody.getHeadE();
 if(keyLeft||keyRight)
 {
  if((Math.abs(pointE.y-foodPoint.y)==0)&&(Math.abs(pointE.x-foodPoint.x)==0))
  {
   var divs = document.getElementsByTagName("div");
   for(var i = 0;i<divs.length;i++)
   {
     if(divs[i].id=="foodDiv")
    document.body.removeChild(divs[i]);
   }
   foodEat=false;
   return true; 
  }
  else
  {
   return false;
  }
 }
 else if(keyUp||keyDown)
 {
  if((Math.abs(pointE.y-foodPoint.y)==0)&&(Math.abs(pointE.x-foodPoint.x)==0))
  {
   var divs = document.getElementsByTagName("div");
   for(var i = 0;i<divs.length;i++)
   {
     if(divs[i].id=="foodDiv")
     document.body.removeChild(divs[i]);
   }
   foodEat=false;
   return true; 
  }
  else
  {
   return false;
  }
 }
}

//----------------------创建食物--------------------------------------------
function createFood()           
{
 if(!foodEat)
 {
  while(true)
  {
  var x=Math.random()*1000;
  var y=Math.random()*1000;
  x+="";
  y+="";
  //alert("");
  var x1 =x.substring(0,2);
  var y1 =y.substring(0,2);
  x=parseInt(x1)*10;
  y=parseInt(y1)*10;
  if((170<x&&x<450)&&(70<y&&y<550))
  { 
   foodEat=true;
   var d=document.createElement("div");
   d.className='snakeSigleDiv';
   d.id="foodDiv";
   d.style.top=y+"px";
   d.style.left=x+"px";
   document.body.appendChild(d);
   foodPoint=new Point(x-170,y-70);
   break;
   }
  }
 }
}

//------------开始---------------------------------------
function RunGame()
{
 if(frist)
  initSnakeL();
  makeSnake();
 }