知识点
面向对象思想,原型添加方法的练习,私有的函数
功能实现
1、搭建页面
放一个容器盛放游戏场景 div#map,设置样式。
2、分析对象
- 游戏对象
- 蛇对象
- 食物对象
3、创建食物对象
Food
- 属性:所在位置、宽高度、颜色
- x
- y
- width
- height
- color
- 方法
- init 随机创建一个食物对象,并输出到map上
①创建Food的构造函数,并设置属性
②通过原型设置init方法,实现随机产生食物对象,并渲染到map上。理由:如果直接在Food的构造函数中写初始化方法,调用一次需要开辟一块内存,多次调用就要开辟多个内存。但在原型上添加方法则只需要开辟一次内存,节省了空间。
③通过自调用函数,进行封装,通过window暴露Food对象。------------自调用函数作用:不会发生变量污染(函数外面变量不会覆盖函数内部变量)
window.Food = Food;
4、创建蛇对象
Snake
- 属性
- width 蛇节的宽度 默认20
- height 蛇节的高度 默认20
- body 数组,蛇的头部和身体,第一个位置是蛇头
- direction 蛇运动的方向 默认right 可以是 left top bottom
- 方法
- init 把蛇渲染到map上
①创建Snake的构造函数,并设置属性。
②通过原型设置init方法,把蛇渲染到map上。
③通过自调用函数,进行封装,通过window暴露Snake对象。
5、创建游戏对象
用来管理游戏中的所有对象和开始游戏 。
Game
- 属性
- food
- snake
- map 容器
- 方法
- start 开始游戏(绘制所有游戏对象)
①创建Game的构造函数,并设置属性。
②通过原型设置start方法,渲染食物对象和蛇对象,即调用食物和蛇的init方法
③通过自调用函数,进行封装,通过window暴露Game对象。
游戏的逻辑
1、蛇移动的方法
- 在蛇对象(snake.js)中,在Snake的原型上新增move方法
1. 让蛇移动起来,把蛇身体的每一部分往前移动一下
2. 蛇头部分根据不同的方向决定往哪里移动
2、让蛇自己动起来
- 在game.js中 在原型上添加runSnake方法,开启定时器调用蛇的move和init方法,让蛇动起来
- 判断蛇是否撞墙
var maxX = this.map.offsetWidth / this.snake.width;
var maxY = this.map.offsetHeight / this.snake.height;
var headX = this.snake.body[0].x;
var headY = this.snake.body[0].y;
//横坐标,撞墙|ू・ω・` )
if (headX < 0 || headX >= maxX) {
console.log(headX+"-----"+maxX)
clearInterval(timerId);
alert('Game Over');
}
if (headY < 0 || headY >= maxY) {
clearInterval(timerId);
alert('Game Over');
}
3、控制蛇的移动方向
-在game.js中 在原型上添加bindKey方法,通过键盘控制蛇的移动方向
-e.keyCode
4、判断蛇是否吃到食物
-在Snake的move方法中,在移动的过程中判断蛇是否吃到食物
-如果蛇头和食物的位置重合代表吃到食物
-吃到食物,往蛇节的最后加一节
-吃到后,把现在的食物对象删除,并重新随机渲染一个食物对象
私有函数
-私有方法是不能被外部访问的方法
-创建私有方法:使用自调用函数包裹
有两个私有函数
-删除食物的私有函数
-当食物被吃后需要删除原来的食物,在渲染之前就可以调用
删除蛇的私有函数
-蛇吃到食物后需要增加一节,这时需要重新渲染小蛇,在渲染之前就可以调用
自调用函数的参数
//传入window对象
(function (window, undefined) {
var document = window.document;
}(window, undefined))