JavaScript面向对象实现贪吃蛇游戏

本文实例为大家分享了面向对象的贪吃蛇实现代码，供大家参考，具体内容如下

1 工具对象(Tools.js)

因为要随机生成食物，所以先将生成min-max范围内随机整数的方法提取出来。randomNum属性就是生成的随机数。

function Tools(min,max){
    min = Math.ceil(min);
    max = Math.floor(max);
    this.randomNum=Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值

}

2 食物对象(Food.js)

//为避免命名冲突，使用自调用函数
(function(){
    var foodDivs=[];
  //1 定义食物对象
  function Food(options){
      options=options||{};//封装属性的对象
      this.backgroundColor=options.backgroundColor||'green';
      this.width=options.width||20;
      this.height=options.height||20;
      this.x=options.x||0;
      this.y=options.y||0;
  }
  //2 渲染到map上
  Food.prototype.render=function(map){

      removeFood();
      var div=document.createElement('div');
      this.x=new Tools(0,map.offsetWidth/this.width-1).randomNum;
      this.y=new Tools(0,map.offsetHeight/this.height-1).randomNum;
      div.style.width=this.width+'px';
      div.style.height=this.height+'px';
      div.style.backgroundColor=this.backgroundColor;
      div.style.left=this.x*this.width+'px';
      div.style.top=this.y*this.height+'px';
      div.style.position = 'absolute';
      map.appendChild(div);
      foodDivs.push(div);
  }
  function removeFood(){
    for(var i=foodDivs.length-1;i>=0;i--){
        foodDivs[i].parentNode.removeChild(foodDivs[i]);//先从页面删除
        foodDivs.splice(i,1);//删除指定位置元素  //再从数组实际删除
    }
  }
  window.Food=Food;//暴露Food，外部才能访问
})();

3 蛇对象(Snake.js)

(function(){
    var snakeDivs=[];
    //1 蛇构造函数
    function Snake(options){
        options=options||{};
        this.body=[
            {x:3,y:2,bgc:'red'},
            {x:2,y:2,bgc:'blue'},
            {x:1,y:2,bgc:'blue'}
        ];
        this.width=options.width||20;
        this.height=options.height||20;      
        this.direction=options.direction||'right';      
    }
    //2 渲染到map上
    Snake.prototype.render=function(map){
        removeSnake();
        for(var i=0;i0;i--){
            this.body[i].x=this.body[i-1].x;
            this.body[i].y=this.body[i-1].y;
        }
        //蛇头移动
        var head=this.body[0];
        switch(this.direction){
              case 'left':
              head.x-=1;
              break;
              case 'up':
              head.y-=1;
              break;
              case 'right':
              head.x+=1;
              break;
              case 'down':
              head.y+=1;
              break;
        }
        if(head.x===food.x&&head.y===food.y){//蛇头与食物重合
            var last=this.body[this.body.length-1];
            this.body.push({
                x:last.x,
                y:last.y,
                bgc:last.bgc
            });  
            food.render(map);//这里就包括移除前面的食物这一操作           
        }        
    }
    function removeSnake(){
       for(var i=snakeDivs.length-1;i>=0;i--){
           snakeDivs[i].parentNode.removeChild(snakeDivs[i]);//先从页面删除
           snakeDivs.splice(i,1);//删除指定位置元素  //再从数组实际删除
       }
    }
    window.Snake=Snake;
})();

4 游戏对象(Game.js)

主要是控制游戏的开始，以及按键对应的行为在游戏中的含义，将蛇和食物这两个对象组织在一起。

 (function(){
var that;
 function Game(){
     this.food=new Food();
     this.snake=new Snake();
     that=this;
 }
 Game.prototype.start=function(map){
    this.snake.render(map);
    this.food.render(map);
    var head=this.snake.body[0];
    var span=document.getElementById('tag');
    var timerId=setInterval(function(){
       that.snake.move(that.food,map);
       that.snake.render(map);

       if((head.x>map.offsetWidth/that.snake.width-2)||head.x<=0){
         clearInterval(timerId);
         span.style.display='block';//提示Game Over
       }
       if((head.y>map.offsetHeight/that.snake.height-2)||head.y<=0){
        clearInterval(timerId);
        span.style.display='block';//提示Game Over
      }
    },150);
  
    console.log(map.offsetWidth/this.snake.width-1);
    bindKey();
}
function bindKey(){
    document.addEventListener('keydown',function(e){
        switch(e.keyCode){//left 37 up 38 right 39 down 40
            case 37:
            that.snake.direction='left';
            break;
            case 38:
            that.snake.direction='up';
            break;
            case 39:
            that.snake.direction='right';
            break;
            case 40:
            that.snake.direction='down';
            break;
        }
    });
}
window.Game=Game;
})()
var Game=new Game();
var map=document.getElementById('map');
Game.start(map);

5 index.html

显示的html页面

    
    
    
    
    


    

        Game Over
    
    
    
    
    

6 运行界面

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。