基于HTML5的贪吃蛇游戏的设计与实现
基于HTML5的贪吃蛇游戏的设计与实现
功能要求：
贪吃蛇游戏是一款经典的单机休闲游戏，玩家通过上下左右按键控制蛇头的移动方向使其向指定方向前进，并吃掉随机位置上产生食物来获得分数。每吃掉一次食物，贪吃蛇的蛇身都会变长，并且会继续在随机位置上产生下一个食物。如果蛇头撞到墙壁或蛇身，则判定游戏失败。根据游戏的难度可以设置不同的游戏速度，蛇的爬行速度越快，游戏难度越大。
实现效果：
一、界面布局设计
1. 整体界面设计
1）使用
2）CSS外部样式表snake.css
2. 信息展示区设计
使用划分区域
历史最高分：0
当前分数：0
3.主游戏界面设计
1）使用
二、数据模型设计
1. 创建贪吃蛇模型
2. 蛇身移动模型
3. 蛇吃食物模型
三、游戏逻辑实现
1. 游戏准备
1）设置贪吃蛇的初始状态，包括蛇身长度、首次出现的位置和移动方向等。
2）在游戏启动方法GameStart()
随机生成贪吃蛇的蛇头坐标
x = Math.floor(Math.random() * width / w) * w;
y = Math.floor(Math.random() * height / w) * w;
随机生成蛇的前进方向
direction = 37 + Math.floor(Math.random() * 4);
2. 绘制蛇身
1）自定义drawSnake()专门用于绘制贪吃蛇。
ctx.fillRect(x, y, w, w) //填充最新位置的矩形蛇身
var lastBox = snakeMap.shift(); //删除第一个坐标记录
ctx.clearRect(lastBox[‘x’], lastBox[‘y’], w, w); //清除蛇尾最后一个矩形蛇身，以达到移动效果
2）自定义gameRefresh()刷新画面（每200毫秒刷新一次）
3. 处理蛇头移动
1）使用document对象的onkeydown方法监听并获取用户按键
document.onkeydown = function(e) {
// 根据按键更新前进方向code：左37，上38，右39，下40
if(e.keyCode==37||e.keyCode==38||e.keyCode==39||e.keyCode==40)
direction = e.keyCode;
}
4.绘制随机位置的食物
1）声明drawFood()方法用于在游戏画布的随机位置绘制食物
function drawFood() {
//随机生成食物坐标
foodX = Math.floor(Math.random() * width / w) * w;
foodY = Math.floor(Math.random() * height / w) * w;
//内部填充颜色
ctx.fillStyle = "#FF0000";
//绘制矩形
ctx.fillRect(foodX, foodY, w, w);
}
5. 吃到食物判定
1）修改gameRefresh()方法，追加吃到食物判定
//吃到食物判定
if (foodX == x && foodY == y) {
//吃到一次食物加10分
//更新状态栏中的当前分数
//在随机位置绘制下一个食物
//蛇身长度加1
}
6. 碰撞检测
1）首先创建detectCollision()函数用于进行蛇与障碍物的碰撞检测
function detectCollision() {
//蛇头碰撞到了四周的墙壁，则游戏失败
//蛇头碰撞到了蛇身，则游戏失败
}
2）修改gameRefresh()方法，在根据方向移动蛇头位置的switch语句后面添加游戏失败判定的相关代码，通过判断detectCollision()函数的返回值确定当前的游戏状态。
//碰撞检测，返回值0表示没有撞到障碍物
//如果返回值不为0，表示游戏失败
if (code != 0) {
//如果当前得分高于历史最高分，则更新历史最高分记录
//返回值1表示撞到墙壁
//返回值2表示撞到蛇身
//重新加载页面
}
7. 显示历史最高分
1）使用HTML5 Web存储API中的localStorage进行历史最高分记录的读取。
2）声明showBestScore()方法用于获取并在状态栏展示历史最高分。
function showBestScore() {
//从本地存储数据中读取历史最高分
bestScore = localStorage.getItem("bestScore");
//如果尚未记录最高分，则重置为0
if (bestScore == null) bestScore = 0;
//将历史最高分更新到状态栏中
var best = document.getElementById("bestScore");
best.innerHTML = bestScore;
}
8. 游戏重新开始
玩家重新开始游戏有两种方式：
1）一是当蛇碰撞到墙壁或者自身导致游戏失败时会自动重新开始游戏
function gameRefresh() {
……代码略……
//如果返回值不为0，表示游戏失败
if (code != 0) {
……代码略……
window.location.reload(); //重新加载页面
}
}
2）二是点击“重新开始”按钮强制重新开始游戏。
四、部分代码
贪吃蛇游戏的设计与实现
基于HTML5的贪吃蛇小游戏
历史最高分：0
当前分数：0