贪吃蛇
1. 分析需求
+ 我们把一个贪吃蛇拆成四个模块
1-1. 食物模块 - 生成一个食物, 随机一个位置
1-2. 蛇模块 - 生成一个蛇, 给蛇加一节, 移动, 判断吃到食物, 死亡
1-3. 游戏规则 - 跑的多快, 游戏计分, 游戏怎么开始, 怎么结束, 吃到食物做什么, 撞墙做什么
1-4. 整合, 点击什么开始, 点击什么结束, ...
2. 书写食物模块
+ 创建一个标签, 类名是 food
+ 计算一个位置
+ 插入到 地图里面
3. 书写蛇模块
+ 准备一个数组,存储蛇 [head, body, body]
+ 准备一个变量, 存储方向
+ 准备一个方法, 计算下一个头出现的位置
+ 准备一个方法, 能给蛇加一节
=> 通过调用 pos 方法, 知道下一节的坐标
=> 如果原先 snake 数组里面有东西, 把原先的第一个改成 body
=> 如果原先没有东西, 直接写一个 div 放进去, 类名是 head
+ 准备一个方法, 初始化一个蛇
=> 按照你自己的设置, 初始化几节都行
+ 准备一个方法, 让蛇移动一格
=> 把数组里面最后一个删除
=> 从页面把最后一个移出
=> 加一个头
+ 准备一个方法, 判断蛇是不是死亡
=> x < 0 || y < 0 || x > 800 || y > 600
=> 循环遍历所有的 body
+ 准备一个方法, 判断是不是吃到食物
=> 和 food 坐标一样
4. 游戏规则模块
+ 初始化的时候
=> 要 new 一个 Food
=> new Snake
+ 准备一个变量表示等级
+ 准备一个方法, 根据等级开始游戏
=> 设置一个定时器, 时间根据 level 来决定
+ 准备一个方法, 暂停
=> 关闭定时器
+ 准备一个方法, 重新开始
=> 重新加载页面
=> window.locationreload()
+ 准备一个方法, 能根据按键修改方向
=> 给 document 绑定一个键盘按下事件
=> 根据 keycode 判断方向更改
+ 准备一个方法, 更改记分牌
=> 准备一个变量, 记录吃到多少个食物
=> 根据吃到食物的数量来更新记分牌
模块化开发
+ 准备一个 main.js