利用JS实现贪吃蛇的游戏(具体分析)之二蛇模块的分析

一.需求分析:
1. 在页面上初始化一条蛇长3个食物宽度,并且初始化移动方向是向右
2. 让蛇可以在页面上移动
3. 让蛇吃掉食物后,身体变长

二.思路分析:
1.同样利用构造函数完成对蛇的初始化,但是除了构造蛇的宽度,高度,颜色外,还需要将蛇分成三个单元(红色,黄色,绿色),这三个单元对应不同的地图x,y坐标.

2.将蛇的对象渲染到页面上,利用渲染食物的方法,来渲染蛇到页面上,但是问题是食物只有一个,而蛇却是有很多节,那么我们利用一个数组this.body[
{x:3,y:1,bgColor:’red’},
{x:2,y:1,bgColor:’yellow’},
{x:1,y:1,bgColor:’green’},
]
其中xy对应的是蛇在地图上xy坐标,每一节的颜色也不一样.那么我们遍历this.body数组里的元素将需要的数据取出来设置成CSS样式写入DIV中,最后显示在页面上就可以了.(Ps:每一节都是一个div,所以循环一次就会生成一个div,最后蛇吃食物身体变长也是将数据加在this.body里面,在经过render()函数渲染到页面上).
3.在本节中我们只设计让蛇移动的函数,snakemove(),这里面做到蛇的移动,以及吃食物身体变长的功能那个.

第二:吃食物长身体的设计:
先判断食物的坐标与蛇头的坐标是否重叠,如果重叠那么就长身体,长身体的方法就是:给this.body数组里面添加x,y,bgcolor等信息.根据刚才蛇移动的方法:蛇头是根据方向移,而蛇身是移动到前面一个身体部分,那么最后还剩原来下一节身体(但是被我们清除了),刚好如果蛇吃了食物,那么把这节身体添加到this,body数组中最后渲染到页面上就可以了.

第三：我们利用一个数组list用来装蛇的每一节单元(div)(也就是棋盘上一个一个的格子),它的作用就是用来删除老的格子.

三.代码实现

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

//创建蛇的函数与方法封装
(function  ( window ) {
    var list = []; //用来存放蛇的div
    //蛇的构造函数
    function Snake ( width,height,dir ) {
        this.width = width || 20;
        this.height = height || 20;
        this.direction = dir || 'right';
        this.body = [
            //xy对应的在地图上面的坐标
            {x : 3,y : 1,bgColor : 'red'},
            {x : 2,y : 1,bgColor : 'yellow'},
            {x : 1,y : 1,bgColor : 'green'},
        ];
    }

    //将蛇渲染到页面的方法
    Snake.prototype.render = function ( map ) {
        //每次渲染新蛇的时候删除老蛇
        removeSnake(map);
        //要将每一节身体都添加到页面所以用遍历数组的方法
        for(var i = 0;i<this.body.length;i++){
            var snakeBodyUnit = this.body[i]; //取出来是一个对象
            //创建设的身体标签将这些属性包起来
            var div1 = document.createElement('div');
            div1.style.width = this.width + 'px';
            div1.style.height = this.height + 'px';
            div1.style.position = 'absolute';
            div1.style.left = snakeBodyUnit.x * this.width + 'px';
            div1.style.top = snakeBodyUnit.y * this.height + 'px';
            div1.style.backgroundColor = snakeBodyUnit.bgColor;
            //渲染到页面
            map.appendChild(div1);
            //将蛇的div对象放入数组中
            list.push(div1);
        }
    }

    //删除蛇每次移动之后的残留下的DIV
    function removeSnake ( map ) {
        for(var i = 0;i<list.length;i++){
            map.removeChild(list[i]);
        }
        //清空数组 //必须清空因为清楚了前面的div,但是
        //它的空间还在只不过是empty,后面的div不是从0开始的.
        list.length = 0;
    }

    //蛇移动的函数
    Snake.prototype.snakemove = function ( food,map ) {
        //1.蛇身的移动
        for(var i = this.body.length - 1;i > 0;i--){ //此处不能大于0
            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 snakeHeadX = this.body[0].x * this.width;
        var snakeHeadY = this.body[0].y * this.height;
        //获取事物的位置
        var foodX = food.x;
        var foodY = food.y;
        if(snakeHeadX == foodX && snakeHeadY == foodY) {
            this.body.push ( {
                x : this.body[ this.body.length - 1 ].x,
                y : this.body[ this.body.length - 1 ].y,
                bgColor : getColorForRandom ()
            } );
            //食物吃了,重新生成一个食物.
            food.render ( map ); //调用食物对象的render方法,重新的生成一个坐标再渲染,就感觉产生了一个新的食物.
        }
    }

    //随机产生一个十六进制的颜色的函数.
    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));