原生JS 贪吃蛇游戏步骤记录

1.设计基础布局
    标题 容器 地图

2.绘制蛇
    使用二维数组保存蛇的位置(蛇其实就是在页面存在的几个小点)
    循环这个二维数组 使用div来绘制蛇
    这里使用定位来设置位置(别漏了map的相对定位)

3.移动蛇
    根据蛇的方向移动 不同的位置
    使用定时器 间隔调用

4.绑定按键事件
    操纵蛇的方向
    因为步骤3 使用了定时器
    所以方向改变了之后步骤3的代码再次执行 就回根据新的方向移动了

5.随机生成食物
    首先计算 最大的 x跟 y坐标
    随机生成坐标
    生成食物
    添加到页面上

6.吃食物的判断
    在蛇移动的代码中
    增加判断失误位置的代码
    吃到了 变长 重新生成食物
    反之 跟之前一样的逻辑

7.增加3个新功能 （穿墙 / 吃自己，游戏结束 / 食物不在蛇身上）

8.食物方块颜色随机