用js编写一个网页版的贪吃蛇

今天教大家如何用js编写一个网页版的贪吃蛇。

具体效果如下:

var Block=function(col,row,size)
{
  this.col=col;
  this.row=row;
  this.size=size;
    };
//定义Block函数的原型方法draw；
Block.prototype.draw =function()
{
  ctx.fillRect(this.col*this.size,this.row*this.size,this.size,this.size)
}

首先给出最基础的定义，这是定义一个方块，其实就是蛇的组成部分。需要把方块画出来，填充满。

//定义对象蛇
var snake ={
  body:[
    new Block(20,20,10),
    new Block(20,21,10),
    new Block(20,22,10)
   ],
  direction:"right",
  };

//定义画蛇的函数
snake.draw=function()
{
   for(var i=0;i<this.body.length;i++)
  {
     this.body[i].draw();
        }
   };

再是定义蛇，这里面的蛇的初始化的身体是有三个部分组成的，也就有三个Block。

snake.move = function()
         {
          var head = this.body[0];

if(snake.direction=="right")
     {    
     var newhead=new Block(head.col+1,head.row,head.size)
            }
  
  if(snake.direction =="left")
   
     { 
     var newhead = new Block(head.col-1,head.row,head.size); 
           }  
 if(snake.direction=="up")
     {
     var newhead=new Block(head.col,head.row-1,head.size)
           }
    if(snake.direction=="down")
     {
     var newhead=new Block(head.col,head.row+1,head.size)
           } 
          if(newhead.col<0 || newhead.col>39 )
          {
           clearInterval(intervalId);
           gameover();
          }
          
          if(newhead.row<0 || newhead.row>39 )
          {
           clearInterval(intervalId);
           gameover();
          }
 for(var i=0;i<this.body.length;i++)
{
    if(this.body[i].col==newhead.col &&this.body[i].row==newhead.row)
  {
    clearInterval(intervalId);
    gameover();
      }
          }         
     this.body.unshift(newhead);
     if(newhead.col==apple.posX &&newhead.row==apple.posY)
{  
    score=score+100;
    while(true)
  {
     var checkApple =false;
     apple.posX=Math.floor(Math.random()*40);
     apple.posY=Math.floor(Math.random()*40);
     for(var i=0; i<this.body.length;i++)
   {
     if(this.body[i].col==apple.posX &&this.body[i].row==apple.posY)
          checkApple=true;
                        }
       if(!checkApple)
       break;
      }  
  }
else{
     this.body.pop();
        }         
         };

然后这一部分是核心，定义的是蛇的上下左右移动，还有食物的刷新。当蛇吃到食物之后的处理。

完整的核心代码如上，也并没有想象中那么难。欢迎和我讨论有关程序的问题，也可以答疑。关注公众号：诗一样的代码，交一个朋友。