基于HTML5的贪吃蛇游戏的设计与实现
基于HTML5的贪吃蛇游戏的设计与实现
功能要求:
贪吃蛇游戏是一款经典的单机休闲游戏,玩家通过上下左右按键控制蛇头的移动方向使其向指定方向前进,并吃掉随机位置上产生食物来获得分数。每吃掉一次食物,贪吃蛇的蛇身都会变长,并且会继续在随机位置上产生下一个食物。如果蛇头撞到墙壁或蛇身,则判定游戏失败。根据游戏的难度可以设置不同的游戏速度,蛇的爬行速度越快,游戏难度越大。
实现效果:
一、界面布局设计
1. 整体界面设计
1)使用<div>划分区域
2)CSS外部样式表snake.css
2. 信息展示区设计
使用<div>划分区域<!--状态信息栏--><div id="status"><!--历史最高分--><div class="box">历史最高分:<span id="bestScore">0</span></div><!--当前分数--><div class="box">当前分数:<span id="currentScore">0</span></div></div>
3.主游戏界面设计
1)使用<canvas>元素制作游戏画面
2)使用<button>元素制作按钮
二、数据模型设计
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,下40if(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");//如果尚未记录最高分,则重置为0if (bestScore == null) bestScore = 0;//将历史最高分更新到状态栏中var best = document.getElementById("bestScore");best.innerHTML = bestScore;}
8. 游戏重新开始
玩家重新开始游戏有两种方式:
1)一是当蛇碰撞到墙壁或者自身导致游戏失败时会自动重新开始游戏
function gameRefresh() {……代码略……//如果返回值不为0,表示游戏失败if (code != 0) {……代码略……window.location.reload(); //重新加载页面}
}
2)二是点击“重新开始”按钮强制重新开始游戏。
<button onclick="window.location.reload()">重新开始</button>
四、部分代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>贪吃蛇游戏的设计与实现</title><link rel="stylesheet" href="css/snake.css"></head><body><div id="container"><h3>基于HTML5的贪吃蛇小游戏</h3><hr><!--状态信息栏--><div id="status"><!--历史最高分--><div class="box">历史最高分:<span id="bestScore">0</span></div><!--当前分数--><div class="box">当前分数:<span id="currentScore">0</span></div></div><!--设置游戏画布--><canvas id="myCanvas" width="400" height="400" style="border:1px solid"></canvas><div><button onclick="window.location.reload()">重新开始</button></div></div><script>//=====================// 游戏参数设置//=====================//游戏界面刷新的间隔时间(数字越大,蛇的速度越慢)var time = 200;//蛇身长var t = 3;//记录蛇运行轨迹,用数组记录每一个坐标点var snakeMap = [];//蛇身单元大小var w = 10;// 方向代码:左37,上38,右39,下40var 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");//如果尚未记录最高分,则重置为0if (bestScore == null)bestScore = 0;//将历史最高分更新到状态栏中var best = document.getElementById("bestScore");best.innerHTML = bestScore;}
备注:完整代码请下载附件
https://download.csdn.net/download/YQEMMMM/13055758
基于HTML5的贪吃蛇游戏的设计与实现相关推荐
- 基于React的贪吃蛇游戏的设计与实现
代码地址如下: http://www.demodashi.com/demo/11818.html 贪吃蛇小游戏(第二版) 一年半前层用react写过贪吃蛇小游戏https://github.com/c ...
- 基于单片机的贪吃蛇游戏设计_前端入门,基于html,css,javascript的贪吃蛇游戏
源代码: 贪吃蛇 .box1{ font-size: 15px; float:left; display: block; margin-right: 150px; } .box2{ font-size ...
- 基于FPGA的VGA显示对贪吃蛇游戏的设计
基于FPGA的VGA显示对贪吃蛇游戏的设计 摘要 目前,电子数码产品已经进入了人生活的方方面面,而大多数电子产品都依靠显示屏来传递信息,由此可见用电路对显示屏进行控制的研究有很大的实用价值和市场需求. ...
- java贪吃蛇设计流程_JAVA版贪食蛇(贪吃蛇)游戏的设计与实现(含录像)
JAVA版贪食蛇(贪吃蛇)游戏的设计与实现(含录像)(任务书,开题报告,外文翻译,毕业论文12000字,程序代码,MySQL数据库,答辩PPT,答辩视频录像) 摘要 "贪食蛇"游戏 ...
- 基于EasyX的贪吃蛇游戏
基于EasyX的贪吃蛇游戏 一.预备知识 二.游戏逻辑 1.贪吃蛇元素 2.贪吃蛇规则 三.游戏设计 1.地图设计 2.移动设计 3.速度设计 4.整体设计 一.预备知识 1.使用EasyX必须要知道 ...
- python贪吃蛇的实验报告_贪吃蛇游戏课程设计实验报告
DOC 可编辑修改 -------- 为你整理各种最新最全办公范文 -------- 双击可以删除 爱心 --- 用心 --- 恒心 贪吃蛇游戏课程设计实验报告 辽 宁 科 技 大 学 课程设计说明书 ...
- Linux下基于SDL库贪吃蛇游戏
Linux下基于SDL库贪吃蛇游戏 SDL(Simple DirectMediaLayer)是一套开放源代码的跨平台多媒体开发库,使用C语言写成.SDL提供了数种控制图像.声音.输出入的函数,让开 ...
- JAVAJ2ME贪吃蛇游戏的设计
JAVAJ2ME贪吃蛇游戏的设计 1.包含源程序,数据库脚本.代码和数据库脚本都有详细注释. 2.课题设计仅供参考学习使用,可以在此基础上进行扩展完善 代码已经上传github,下载地址https:/ ...
- 如何用html做一个贪吃蛇,如何用HTML5制作贪吃蛇游戏
如何用HTML5制作贪吃蛇游戏 发布时间:2020-07-09 15:09:59 来源:亿速云 阅读:122 作者:Leah 如何用HTML5制作贪吃蛇游戏?很多新手对此不是很清楚,为了帮助大家解决这 ...
最新文章
- git---远程仓库版本回滚
- 什么?你还在使用fastjson,性能太差了
- 映射date类型_JPA 日历映射到日期示例
- python基础案例教程_python基础教程 10-11例子如何执行
- 黄聪:wordpress如何开启文章格式post format
- 计算机控制cs,计算机控制
- 查看mysql主从复制是否成功的命令_mysql主从复制 - hong查理的个人空间 - OSCHINA - 中文开源技术交流社区...
- Android基础夯实--你了解Handler有多少?
- 前端学习(2379):加入git管理
- mqtt服务器apollo的搭建和测试工具paho的使用
- 为什么要使用 Node.js
- 数据结构与算法面试题80道(35)
- 基于实例数据详解准确率和召回率
- 【HNOI 2016】大数
- [代码]获取源页的控件值
- 指纹识别算法MZFinger5.0
- 化繁从简,别让思维打了结
- html如何引入lrc文件,lrc文件怎么打开?lrc是什么文件?
- 正多边形和多面体的对称群
- 董宝珍:赔钱别赖公司 股民该怨自己
热门文章
- MySQL不香吗,为啥京东放弃它拥抱Elasticsearch?
- 记一道简单的Java面试题,但答错率很高!
- ssh+json开发实例
- golang 将对象转换成string_Golang 匿名 struct 解码数据技巧
- centos连接xrdp桌面黑屏_小鹅通|视频直播桌面共享模式|视频直播OBS使用教程
- MySQL高级-内存管理及优化
- spring 14-Spring框架JDBC操作
- PAT1105:Spiral Matrix
- css实现文字太长,显示省略号
- java两种不同单例模式_关于Java里的两种单例模式