功能要求：
贪吃蛇游戏是一款经典的单机休闲游戏，玩家通过上下左右按键控制蛇头的移动方向使其向指定方向前进，并吃掉随机位置上产生食物来获得分数。每吃掉一次食物，贪吃蛇的蛇身都会变长，并且会继续在随机位置上产生下一个食物。如果蛇头撞到墙壁或蛇身，则判定游戏失败。根据游戏的难度可以设置不同的游戏速度，蛇的爬行速度越快，游戏难度越大。
实现效果：
1. 整体界面设计
1）使用<div>划分区域
2）CSS外部样式表snake.css
2. 信息展示区设计
3.主游戏界面设计
1）使用<canvas>元素制作游戏画面
2）使用<button>元素制作按钮
1. 创建贪吃蛇模型
2. 蛇身移动模型
3. 蛇吃食物模型
1. 游戏准备
1）设置贪吃蛇的初始状态，包括蛇身长度、首次出现的位置和移动方向等。
2）在游戏启动方法GameStart（）
？ ? 随机生成贪吃蛇的蛇头坐标
？ ? 随机生成蛇的前进方向
2. 绘制蛇身
1）自定义drawSnake（）专门用于绘制贪吃蛇。
2）自定义gameRefresh（）刷新画面（每200毫秒刷新一次）
3. 处理蛇头移动
1）使用document对象的onkeydown方法监听并获取用户按键
4.绘制随机位置的食物
1）声明drawFood（）方法用于在游戏画布的随机位置绘制食物
5. 吃到食物判定
1）修改gameRefresh（）方法，追加吃到食物判定
6. 碰撞检测
1）首先创建detectCollision（）函数用于进行蛇与障碍物的碰撞检测
2）修改gameRefresh（）方法，在根据方向移动蛇头位置的switch语句后面添加游戏失败判定的相关代码，通过判断detectCollision（）函数的返回值确定当前的游戏状态。
7. 显示历史最高分
1）使用HTML5 Web存储API中的localStorage进行历史最高分记录的读取。
2）声明showBestScore（）方法用于获取并在状态栏展示历史最高分。
8. 游戏重新开始
玩家重新开始游戏有两种方式：
1）一是当蛇碰撞到墙壁或者自身导致游戏失败时会自动重新开始游戏
2）二是点击“重新开始”按钮强制重新开始游戏。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery