一、随机方块
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加减分开
-
-
食物产生在蛇身
-