一. 食物模块需求分析:
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)方法的使用过程.将在最后一小节具体介绍.