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

2023-06-30 03:06:43 112人浏览泡泡鱼

摘要

本篇内容介绍了“javascript面向对象怎么实现贪吃蛇游戏”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1 工具对象(Tools.js)

本篇内容介绍了“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;i<this.body.length;i++){            var block=this.body[i];            var div=document.createElement('div');            div.style.width=this.width+'px';            div.style.height=this.height+'px';            div.style.backgroundColor=block.bgc;            div.style.left=block.x*this.width+'px';            div.style.top=block.y*this.height+'px';            div.style.position = 'absolute';            map.appendChild(div);            snakeDivs.push(div);//添加蛇divs        }    }    //3 蛇的移动    Snake.prototype.move=function(food,map){        //逻辑上从后往前 先蛇身再蛇头        //蛇身每一节替换上次的位置        for(var i=this.body.length-1;i>0;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页面

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <meta Http-equiv="X-UA-Compatible" content="IE=edge">    <title>Page Title</title>    <meta name="viewport" content="width=device-width, initial-scale=1">    <style>    #map{        background-color: lightgray;        width: 800px;        height: 500px;        margin: 0 auto;        position: relative;    }    #tag{    width: 200px;    height: 100px;    background-color: gray;    position: absolute;    left:300px;    top:200px;    line-height: 100px;    text-align: center;    display: none;    }    </style></head><body>    <div id='map'>        <span id='tag'>Game Over</span>    </div>    <script src="js/Tools.js"></script>    <script src="js/Food.js"></script>    <script src="js/Snake.js"></script>    <script src="js/Game.js"></script></body></html>

6 运行界面

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