greedy_snake

• A extremely simple js & html5 canvas based snake game. (贪吃蛇游戏)
• Author: Notus([email protected])
• Demo

基本步骤

1. 画制可见的表格，蛇及食物的初始位置

   • 横向 30 个格子 竖向 30 个格子,每个格子边长 15, 画布总大小 450*450px
   • 在第一行绘制一条蛇 5 节身体
   • 在最中心的位置放置默认食物
   • 每个格子的最上角顶点坐标用来代表此格子坐标
   • 整个蛇包含两个部分：蛇头、蛇身，蛇头含方向

2. 让蛇动起来

   • 让它蛇头动起来,跟着键盘的方向键，上下左右移动，利用键盘的监听事件
   • 让蛇的身体跟着蛇头来移动。算法如下：
     • 产生一个新的蛇头（根据老的蛇头）
     • 产生一个新的蛇身（不要蛇尾，即蛇数组最后一个元素丢弃）
     • 把新的蛇头添加到蛇身

3. 让蛇吃食物

   • 碰撞算法
   • 增加蛇的长度，添加一个新的蛇尾
   • 将食物移除,产生一个新的随机食物

4. 蛇自己运动，使用 setInterval 函数

5. 计算分数

Reference

• 六星教育培训课程