利用JS实现贪吃蛇的游戏(具体分析)之终极游戏的封装

在前面三篇文章里,我们讲了三个不同的JS文件来一起实现最终的效果,但是在网页加载的时候,每一次都要下载三个JS文件 ,怎样耗费性能,所以我们利用沙箱的隔断作用域的原理,将三个文件放到一起来:最后在HTML结构中只调用一个文件就可以了.
JS实现完整的功能:并且加上了如果贪吃蛇的蛇头与蛇身体的某一个部位接触之后,游戏结束的功能.
这个功能的需求分析:
当贪吃蛇的蛇头与蛇身体的某一个部位接触那么游戏结束.
思路分析:
1.我们先获取蛇头的位置.然后再判断蛇头与蛇身体的部位之间的位置关系是否重叠,如果重叠的话,那么游戏结束,如果不重叠,游戏继续.(游戏继续就是什么都不做,也就是说我们只需要利用不带else的if语句来做一种条件的判断)
ps: if 一种条件判断
if-else 两种互斥条件的判断
if-else-if: 多种条件的判断

JS代码实现:

/*
** Create by Alex on 2018/8/5
*/

(function  ( window ) {
    var that = null;
    //创建游戏对象
    function Game ( map ) {
        this.food = new Food();
        this.snake = new Snake();
        this.map = map;
        that = this;
    }
    //游戏开始
    Game.prototype.start = function (  ) {
        this.food.render(this.map);
        this.snake.render(this.map);
        blindKey();
        snakeAtuoMove();
    }
    //让蛇一直动起来
    function snakeAtuoMove () {
       var timeID = setInterval(function (  ) {
           this.snake.snakeMove(this.food,this.map);
           this.snake.render(this.map);
           //----------------------------蛇的身体如果有重复游戏结束------------------------------
               var thisBody = this.snake.body[0];
               //为什么从一开始,因为0下标就是蛇头,是去判断蛇头与其他蛇身体的位置的关系
               for(var j = 1;j<this.snake.body.length;j++){
                   if(thisBody.x == this.snake.body[j].x && thisBody.y == this.snake.body[j].y) {
                       alert('Game over');
                       clearInterval(timeID);
                   }
           }
           //-----------------边界检测--------------------
           var snakeHeaderX = this.snake.body[0].x * this.snake.width;
           var snakeHeaderY = this.snake.body[0].y * this.snake.height;
           if(snakeHeaderX <=0 || snakeHeaderY <=0 || snakeHeaderX >= this.map.offsetWidth || snakeHeaderY >= this.map.offsetHeight ) {
               alert('Game over');
               clearInterval(timeID);
           }
       }.bind(that),300);
    }

    //4 添加按键改变蛇的方向
    function blindKey() {
        window.onkeydown = function(e) {
            //兼容性处理
            e = e || window.event;
            switch (e.keyCode) {
                case 37:
                    //改变蛇的方向为左.
                    if(this.snake.direction != "right"){
                        this.snake.direction = "left";
                    }
                    break;
                case 38:
                    //改变蛇的方向为上.
                    if(this.snake.direction != "bottom"){
                        this.snake.direction = "top";
                    }
                    break;
                case 39:
                    //改变蛇的方向为右.
                    if(this.snake.direction != "left"){
                        this.snake.direction = "right";
                    }
                    break;
                case 40:
                    //改变蛇的方向为下.
                    if(this.snake.direction != 'top'){
                        this.snake.direction = "bottom";
                    }
                    break;
            }
        }.bind(that)
    }
    window.Game = Game;
}(window));

//原来的Snake.js
(function  ( window ) {
    var list = [];
    //创建蛇的对象
    function Snake ( width,height,dir ) {
        this.width = width || 20;
        this.height = height || 20;
        this.direction = dir || 'right';
        this.body = [
            {x : 3,y : 1,bgColor : 'red'},
            {x : 2,y : 1,bgColor : 'yellow'},
            {x : 1,y : 1,bgColor  : 'purple'},
        ]
    }
    //渲染蛇到页面上
    Snake.prototype.render = function ( map ) {
        removeSnake(map);
        for(var i = 0;i<this.body.length;i++){
            var div1 = document.createElement('div');
            div1.style.width = this.width + 'px';
            div1.style.height = this.height + 'px';
            div1.style.backgroundColor = this.body[i].bgColor;
            div1.style.position = 'absolute';
            div1.style.left = this.body[i].x * this.width + 'px';
            div1.style.top = this.body[i].y * this.height + 'px';
            map.appendChild(div1);
            list.push(div1);
        }
    }
    //删除前面的蛇的函数
    function removeSnake (map) {
        for(var i = 0;i< list.length;i++) {
            map.removeChild(list[i]);
        }
        list.length = 0;
    }
    //蛇移动的函数
    Snake.prototype.snakeMove = 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;
        }
        //蛇头的移动
        switch ( this.direction ) {
            case 'right' :  this.body[0].x++; break;
            case 'left' :  this.body[0].x--; break;
            case 'top' :  this.body[0].y--; break;
            case 'bottom' :  this.body[0].y++; break;
        }

        //---------------------吃食物长身体-------------------------------
        var snakeHeaderX = this.body[0].x * this.width;
        var snakeHeaderY = this.body[0].y * this.height;
        var foodX = food.x;
        var foodY = food.y;
        if(snakeHeaderX == food.x && snakeHeaderY == food.y) {
            this.body.push({
                x : this.body[this.body.length - 1].x,
                y : this.body[this.body.length - 1].y,
                bgColor : getColorForRandom()
            })
            food.render(map);
        }
    }
    //随机产生一个十六进制的颜色的函数.
    function getColorForRandom(){
        var arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];  //下标0-15
        var str = "#";
        //循环产生 6个 0-15的数.
        for(var i = 0 ; i < 6; i++){
            var num = Math.floor(Math.random()*16);
            //根据这个随机数,在arr数组中去取值.
            str += arr[num];
        }
        return str;   //"#985700"
    }
    window.Snake = Snake;
}(window))


//原来Food.js的代码
(function  ( w ) {
    //定义一个空数组用来装生成的食物元素
    var list = [];
    //1.创建一个食物对象
    function Food ( width,height,bgColor ) {
        this.width = width || 20;
        this.height = height || 20;
        this.bgColor = bgColor || 'green';
    }
    //2.在构造函数的原型对象里添加一个在页面上渲染食物的方法
    Food.prototype.render = function ( map ) {
        //进入移动就清空前面的元素
        removeFood(map);
        //计算食物在页面该显示的位置
        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将食物的属性包起来
        var div1 = document.createElement('div');
        div1.style.backgroundColor = this.bgColor;
        div1.style.width = this.width + 'px';
        div1.style.height = this.height + 'px';
        div1.style.position = 'absolute';
        div1.style.left = this.x + 'px';
        div1.style.top = this.y + 'px';
        //将这个创建好的div显示到页面上
        map.appendChild(div1);
        //将创建的每一个div存入数组
        list.push(div1);
    }
    //3. 删除老食物的元素
    function removeFood (map) {
        for(var i = 0;i<list.length;i++) {
            map.removeChild(list[i]);
        }
        //清空数组
        list.length = 0;
    }
    //4.因为函数的作用域问题,现在需要将接口暴露出来
    //将给window对象添加一个food方法,这个方法的名字就是构造函数food
    w.Food = Food;
}(window))

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .map {
            width: 800px;
            height: 600px;
            background-color: #ccc;
            position: relative;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div class="map" id="map"></div>

<script src="Game.js"></script>
<script>
    var map = document.getElementById('map');
    var game = new Game(map);
    game.start();

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

贪吃蛇的案例在前端开发中基本不用,但是对于熟悉js语法,Dom操作,以及编程思路最重要的面向对象编程:找一个专门的人来实现这个功能,而这个是就是一个对象,有属性有方法来实现我们的功能.这个案例可以极大的促进面向对象编程的思路.