功能要求：

 

　　贪吃蛇游戏是一款经典的单机休闲游戏，玩家通过上下左右按键控制蛇头的移动方向使其向指定方向前进，并吃掉随机位置上产生食物来获得分数。每吃掉一次食物，贪吃蛇的蛇身都会变长，并且会继续在随机位置上产生下一个食物。如果蛇头撞到墙壁或蛇身，则判定游戏失败。根据游戏的难度可以设置不同的游戏速度，蛇的爬行速度越快，游戏难度越大。

 

　　实现效果：

 

　　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）二是点击“重新开始”按钮强制重新开始游戏。