module4-02-面向对象编程案例 随机方块、贪吃蛇
一、随机方块
1.1 设计思路
-
主要是为了理解面向对象编程
-
主要分为两个主体对象
-
第一个
-
管理随机方块的生成
-
-
-
第二个
-
工具对象
-
比如生成随机数、随机rgb
-
二、贪吃蛇
分析对象
-
游戏对象 Game
-
蛇对象 Snake
-
食物对象 Food
2.1 创建食物对象
-
创建Food的构造函数,并设置属性
-
x、y、width、height、color
-
-
通过原型设置方法
-
render 随机创建一个事物对象并输出到map上
-
-
通过自调用函数,进行封装,通过window暴露Food对象
2.2 创建蛇对象
-
创建Snake的构造函数,并设置属性
-
width:蛇节的宽度 默认20
-
height:蛇节的高度 默认20
-
body:数组,蛇的头部和身体,第一个位置是蛇头
-
direction:蛇运动的方向 默认right 可以实left top bottom
-
-
通过原型设置方法
-
render:随机创建一个蛇对象,并输出到map上
-
-
通过自调用函数,进行封装,通过window暴露Snake对象
2.3 创建游戏对象
-
创建Game的构造函数,并设置属性
-
food
-
snake
-
map
-
-
通过原型设置方法
-
start:开始游戏(绘制所有游戏对象,渲染食物对象和蛇对象)
-
-
通过自调用函数,进行封装,通过window暴露Game对象
2.4 游戏逻辑
写蛇的move方法
-
在蛇对象(snake.js)中,在Snake的原型上新增move方法
-
① 让蛇动起来,把蛇身体的每一部分往前移动一下
-
每次动都要执行删除原本的身体
-
在蛇对象中蛇每移动一次,都要把原来的部分删除掉再从新渲染
-
可以参考选择水果案例保证每一个都执行可以用i = length - 1的for循环或者while
-
-
② 蛇头部分根据不同的方向决定往哪里移动
蛇自动动起来
-
可以封装一个私有函数(在闭包里面定义的函数),在闭包里面定义一个变量that,创建构造函数的时候让that指向this就可以让这个私有函数访问到Snake
-
然后增加判断条件,计算出蛇头的xy然后跟最大的maxX,maxY进行比较,超出则停止计时器
蛇改变方向
-
封装一个私有函数bindKey,绑定一个onkeydown时间,然后根据e.keycode来判断按下了什么键再决定direction
蛇吃到食物
-
放在蛇动起来的那个函数中,判断蛇头和食物的位置是否相等,相等的话为body增加一个与最后一节蛇身相同的值
2.5 自调用函数的问题
-
在整合所有文件的时候会出现两个
(function () {...})()
重叠的情况 -
如果没有加分号的话,会认为第一个括号为上一段表达式的调用(即把上一个表达式看成函数),一般会报错,因为上一个表达式一般不返回函数。
-
为了避免这种情况,可以在两个括号的开头和结尾都加上分号
2.6 自调用函数的参数
-
一般可以为自调用函数参数传入(window,undefined)
-
原因是将全局作用域的window变成局部作用域,更符合查找规则,同时可以减少总字符数
-
低版本的浏览器有时候对于undefined有不同的定义(比如undefined会被更改),传进去以防万一
2.7 遇到的问题
-
上下左右是否能按与并发问题
-
先判断是否可以按下(比如向上运动,就不可以再按上或下)将按下的键保存在数组中
-
-
游戏结束蛇头在外边
-
把蛇的渲染与body[0]的xy加减分开
-
-
食物产生在蛇身
-