基于HTML5的贪吃蛇游戏的设计与实现 |
您所在的位置：网站首页 › 蛇的模型图片 › 基于HTML5的贪吃蛇游戏的设计与实现 |
基于HTML5的贪吃蛇游戏的设计与实现
|
基于HTML5的贪吃蛇游戏的设计与实现
功能要求： 贪吃蛇游戏是一款经典的单机休闲游戏，玩家通过上下左右按键控制蛇头的移动方向使其向指定方向前进，并吃掉随机位置上产生食物来获得分数。每吃掉一次食物，贪吃蛇的蛇身都会变长，并且会继续在随机位置上产生下一个食物。如果蛇头撞到墙壁或蛇身，则判定游戏失败。根据游戏的难度可以设置不同的游戏速度，蛇的爬行速度越快，游戏难度越大。 实现效果：  一、界面布局设计
1. 整体界面设计 1）使用划分区域 2）CSS外部样式表snake.css 2. 信息展示区设计 使用划分区域 历史最高分：0 当前分数：03.主游戏界面设计 1）使用元素制作游戏画面 2）使用元素制作按钮 二、数据模型设计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 重新开始 //===================== // 游戏参数设置 //===================== //游戏界面刷新的间隔时间（数字越大，蛇的速度越慢） var time = 200; //蛇身长 var t = 3; //记录蛇运行轨迹，用数组记录每一个坐标点 var snakeMap = []; //蛇身单元大小 var w = 10; // 方向代码：左37，上38，右39，下40 var direction = 37; //蛇的初始坐标 var x = 0; var y = 0; //食物的初始化坐标 var foodX = 0; var foodY = 0; //当前得分 var score = 0; //历史最高分纪录 var bestScore = 0; //画布的宽和高 var width = 400; var height = 400; //根据id找到指定的画布 var c = document.getElementById("myCanvas"); //创建2D的context对象 var ctx = c.getContext("2d"); // 获得历史最高分记录 showBestScore(); //开始游戏 GameStart(); //===================== // 显示历史最高分记录 //===================== function showBestScore() { //从本地存储数据中读取历史最高分 bestScore = localStorage.getItem("bestScore"); //如果尚未记录最高分，则重置为0 if (bestScore == null) bestScore = 0; //将历史最高分更新到状态栏中 var best = document.getElementById("bestScore"); best.innerHTML = bestScore; }备注：完整代码请下载附件 https://download.csdn.net/download/YQEMMMM/13055758
|
【本文地址】