JS-part15.2-贪吃蛇案例

贪吃蛇

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