js实现简单的贪吃蛇

预览图:

1、食物的代码

//食物的代码
  (function(){
    var element=[];
    function Food(width,height,color){
      this.width= width || 20;
      this.height=height || 20;
      this.color=color ||'red';
      this.x=0;
      this.y=0;
    }
    Food.prototype.init=function(map){
      remove();
      var div=document.createElement('div')
      div.style.position='absolute'
      div.style.width=this.width+'px'
      div.style.height=this.height+'px'
        div.style.backgroundColor =this.color
      this.x=(Math.floor(Math.random()*map.offsetWidth/this.width)*this.width);
       this.y=(Math.floor(Math.random()*map.offsetHeight/this.height)*this.height);
       div.style.left= this.x+'px'; 
       div.style.top= this.y+'px';
      map.appendChild(div)
      element.push(div)
    }
     function remove(){
      element.forEach(function(item,i){
        item.parentNode.removeChild(item);
      })
      element.length=0;
    }
    
      window.Food=Food;

  }());

2、蛇的代码

 //贪吃蛇的代码
 (function(){
   var element=[];
  function Snake(width,height,direction){
    this.width=width||20;
    this.height=height || 20;
    this.direction = direction ||'right';
    this.obj=[
    {x:3,y:2,color:'#2DF60C'},
    {x:2,y:2,color:'#F06868'},
    {x:1,y:2,color:'#F06868'}
    ];
  }
  Snake.prototype.init=function(map){
    remove();
    for (var i = 0; i < this.obj.length; i++) {
      var div=document.createElement('div')
       map.appendChild(div)
      div.style.position='absolute'
      div.style.width=this.width+'px'
      div.style.height=this.height+'px'

      div.style.backgroundColor =this.obj[i].color;
      div.style.left=this.obj[i].x*this.width+'px';
      div.style.top=this.obj[i].y*this.height+'px';
     
     
      element.push(div)

    }
    
  }
  Snake.prototype.move=function(food,map){
  
    for (var i = this.obj.length-1; i > 0;i--) {
      this.obj[i].x=this.obj[i-1].x;
      this.obj[i].y=this.obj[i-1].y;
    }
    switch(this.direction){
      case 'right': this.obj[0].x+=1; break;
      case 'left': this.obj[0].x-=1;  break;
      case 'top': this.obj[0].y-=1;  break;
      case 'bottom': this.obj[0].y+=1;  break;
    }

      var headX=this.obj[0].x*this.width;  

      var headY=this.obj[0].y*this.height;
    if(headX==food.x && headY == food.y){

      var last=this.obj[this.obj.length-1];
      this.obj.push({
        x:last.x,
        y:last.y,
        color:last.color
        })
      food.init(map);
    }

  }

     function remove(){
      for (var i = element.length-1; i>=0; i--) {

        element[i].parentNode.removeChild(element[i]);
      }
      
      element.length=0;
      }
      window.Snake=Snake;
 }());

3、游戏对象的代码

   //启动贪吃蛇的游戏对象
  (function(){
  var that=null;
  var timeId;
  function Game(map){
    this.food=new Food();
    this.snake=new Snake();
    this.map=map;
    that=this;
  }
  Game.prototype.init=function(){
    this.food.init(this.map)
    this.snake.init(this.map)
    this.runSnake(this.food,this.map)
    this.bindKey();
  }
  Game.prototype.runSnake=function(food,map){

   timeId= setInterval(function(){
      this.snake.move(food,map);
      var flag=isGameOver();
      if(flag){
        return;
      }
      this.snake.init(map);
    }.bind(that),150)
  }
  Game.prototype.bindKey=function(){

    document.addEventListener('keydown',function(e){
   
      switch(e.keyCode){
        case 37:
          if(this.snake.direction==='right') return; 
          this.snake.direction='left';  
          break;
        case 38:
          if(this.snake.direction==='bottom') return; 
          this.snake.direction='top'
           break;
        case 39:
          if(this.snake.direction==='left') return;
          this.snake.direction='right'
           break;
        case 40:
          if(this.snake.direction==='top') return;
          this.snake.direction='bottom';
           break;
      }
    }.bind(that),false)

    }
  function isGameOver(){
    var maxX=that.map.offsetWidth / that.snake.width;
    var maxY=that.map.offsetHeight / that.snake.height;
    var head=that.snake.obj[0];
    if(head.x<0 || head.x >= maxX || head.y< 0 || head.y >= maxY){
      clearInterval(timeId)
      alert('撞墙了');
      return true;
    }
  }
  window.Game=Game;
 }());

4、贪吃蛇执行文件的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    .map {
      width: 800px;
      height: 600px;
      background-color: #CCC;
      position: relative;
    }
  </style>
</head>
<body>
<!--画出地图,设置样式-->
<div class="map"></div>
<script src="Food.js"></script>
<script src="Snake.js"></script>
<script src="Game.js"></script>
<script>


  //初始化游戏对象
  var gm = new Game(document.querySelector(".map"));

  //初始化游戏---开始游戏
  gm.init();

  

</script>
</body>
</html>