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

一. 食物模块需求分析:
1.在页面地图上显示一个食物的方块盒子,位置是随机显示的.
2.需要盒子被蛇吃后要消失,并且重新随机生成新的食物盒子
二. 食物的设计思路分析:
1.将一块地图分割成一个一个的方格,而这个方格刚好是食物盒子的大小.这样我们可以先确定食物盒子在地图上的X,Y坐标,再利用X,Y坐标来定位食物盒子的left,top的值.比如:上图红色的坐标是:(4,3)
2.将所有新建的食物盒子用一个数组把他们存放起来,这样就可以做到删除被蛇吃掉的食物,同时不影响新食物的创建

代码实现:

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

//创建一个食物自执行函数

(function  ( window ) {
    var list = [];//存放创建的食物盒子数组
    //构造函数用来构造食物对象
    function Food ( width,height,bgColor ) {
        this.width = width || 20;
        this.height = height || 20;
        this.bgColor = bgColor || 'green';
    }
    //设计在页面上随机显示的公有函数
    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;
        //创建一个元素将食物盒子的样添加进来
        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';
        //将食物盒子渲染到地图页面上
        map.appendChild(div1);
        //将创建的食物盒子放入数组中
        list.push(div1);
    }

    //删除被蛇吃掉的食物函数
    function removeFood (map)  {
        for(var i = 0;i<list.length;i++){
            map.removeChild(list[i]);
        }
        //重置数组
        list.length = 0;
    }

    //暴露接口
    /**
     暴露接口的原因,因为这里用的是自执行函数,目的是为了防止变量的污染(在不同的函数内
     可以定义相同的变量名),但是调用函数的接口必须漏出来,因为在外面还需要用到这些方法,所以将
     这些方法添加到window对象里面去,这样window作为全局对象,在任何地方都可以使用的到
     */
    window.Food = Food;
}(window))

三. 需要注意的点:
1. 自调用函数的作用:
(Function( 形参 ) {
}(实参))
这个函数是自己就会调用执行,目的是为了防止变量名的污染.但是还是要暴露接口出来供外部使用,此时的做法是:
//暴露接口
/**
暴露接口的原因,因为这里用的是自执行函数,目的是为了防止变量的污染(在不同的函数内
可以定义相同的变量名),但是调用函数的接口必须漏出来,因为在外面还需要用到这些方法,所以将
这些方法添加到window对象里面去,这样window作为全局对象,在任何地方都可以使用的到
*/
(Function( window ) {
//为window动态添加一个方法或者属性,成为一个全局方法或者属性,在其他地方也可以使用.
Window.接口数据名 = 接口方法/属性;
}(window))
2. 利用数组list来存放食物创建的Div对象,然后在需要的时候就可以遍历数组来删除前面不需要的食物(被蛇吃过的食物),如果不删除它们会一直显示在地图上.
3. 特别注意:removeFood(map)方法的使用过程.将在最后一小节具体介绍.