<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪吃蛇</title>
<style>
P{
font-size:20pt;
font-family:宋体;
text-align:center;
}
#line{
border:1px solid #CCC;
}
.box1{
float:left;
margin-left:700px;
margin-top:10px;
}
.box2{
float:right;
margin-right:700px;
margin-top:10px;
}
canvas{
border:1px solid;
margin-left:700px;
margin-top:20px;
}
button{
width:100px;
height:30px;
color:white;
font-size:15pt;
background-color:#F96;
margin-left:900px;
margin-top:10px;
}
</style>
<script type="text/javascript">
function gameStart(){
//生成画布
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");
//画布长宽
var width = 500;
var height = 500;
//单位大小
var w = 10;
//蛇坐标
var x = Math.floor(Math.random() * width / w) * w;
var y = Math.floor(Math.random() * height / w) * w;
//食物坐标
var foodX = 0;
var foodY = 0;
//蛇前进方向
var direction = 37 + Math.floor(Math.random() * 4);
//蛇坐标集合
var snakeMap = [];
//蛇长度
var size = 1;
//得分
var grade = 0;
//蛇速度
var speed = 200;
showBestScore();
//蛇移动
var interval = window.setInterval(gameRefresh,speed);
function gameRefresh(){
switch(direction){
case 37: x-=w; break;
case 38: y-=w; break;
case 39: x+=w; break;
case 40: y+=w; break;
}
if(x > width || y > height || x < 0 || y < 0){
alert("游戏结束！");
var bestScore = localStorage.getItem("bestScore");
if(bestScore == null){
bestScore = 0;
}
if(bestScore < grade){
document.getElementById("bestScore").innerHTML = grade;
localStorage.setItem("bestScore",grade);
}
window.location.reload();
}
for(var i = 0;i < snakeMap.length;i++){
if(parseInt(snakeMap[i].x) == x && parseInt(snakeMap[i].y) == y){
alert("游戏结束！");
var bestScore = localStorage.getItem("bestScore");
if(bestScore == null){
bestScore = 0;
}
if(bestScore < grade){
document.getElementById("bestScore").innerHTML = grade;
localStorage.setItem("bestScore",grade);
}
window.location.reload();
}
}
if(snakeMap.length >= size){
var lastBox = snakeMap.shift();
cxt.clearRect(lastBox['x'],lastBox['y'],w,w);
}
snakeMap.push({'x':x,'y':y});
cxt.fillStyle = "blue";
cxt.fillRect(x,y,w,w);
if(foodX == x && foodY == y){
drawFood();
size++;
grade += 10;
document.getElementById("currentScore").innerHTML = grade;
}
}
document.onkeydown = function(e){
if(e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40){
direction = e.keyCode;
}
}
function drawFood(){
foodX = Math.floor(Math.random() * width / w) * w;
foodY = Math.floor(Math.random() * height / w) * w;
cxt.fillStyle = "red";
cxt.fillRect(foodX,foodY,w,w);
}
function showBestScore(){
var bestScore = localStorage.getItem("bestScore");
if(bestScore == null){
bestScore = 0;
}
var best = document.getElementById("bestScore");
best.innerHTML = bestScore;
}
drawFood();
}
</script>
</head>
<body onload="gameStart()">
<p>基于HTML5的贪吃蛇小游戏</p>
<div id="line"></div>
<div id="status">
<div class="box1">
历史最高分：<span id="bestScore">0</span>
</div>
<div class="box2">
当前分数：<span id="currentScore">0</span>
</div>
</div>
<canvas width=500 height=500 id="canvas"></canvas>
<div id="btn">
<button onclick="window.location.reload()">重新开始</button>
</div>
</body>
</html>
基于HTML的贪吃蛇小游戏
需积分: 0 9 浏览量
更新于2023-11-12
收藏 2KB ZIP 举报
**贪吃蛇小游戏详解**
贪吃蛇是一款深受全球玩家喜爱的经典小游戏，它的基本玩法是控制一个不断增长的蛇在有限的区域内移动，通过吃食物来延长自己的长度，同时避免撞到自身或边界。这个小游戏的实现主要依赖于HTML、CSS和JavaScript这三种Web开发技术。在"基于HTML的贪吃蛇小游戏"中，我们将深入探讨如何运用这些技术来构建一款简单的在线版本。
HTML（HyperText Markup Language）是网页的基础结构语言，负责定义页面的元素和布局。在这个游戏中，HTML将用于创建游戏界面的基本框架，包括游戏区域、得分显示以及控制按钮等。例如，可以创建一个大的div元素作为游戏区域，内部包含用于显示蛇和食物的小div元素。此外，还需要用HTML来设置按钮，以便玩家可以开始和暂停游戏。
CSS（Cascading Style Sheets）用于美化和控制HTML元素的样式。在贪吃蛇游戏中，CSS将用于设置游戏界面的颜色、边框、位置等视觉效果。例如，可以为蛇和食物设置不同的背景色，使它们在界面上更显眼；还可以使用CSS动画来实现蛇的移动效果，使其看起来更加流畅。
然后，JavaScript是关键的动态部分，它负责处理游戏逻辑和用户交互。在这个项目中，JavaScript将用于实现以下功能：
1. 初始化游戏状态，包括蛇的位置、长度、速度，以及食物的位置。
2. 处理键盘事件，根据玩家的输入改变蛇的移动方向。
3. 更新游戏状态，如蛇的移动、碰撞检测（蛇身、边界、食物）、得分计算等。
4. 利用DOM操作（Document Object Model，HTML与JavaScript之间的桥梁）更新HTML元素以反映当前游戏状态，如蛇的位置、长度、得分等。
5. 实现游戏循环，确保游戏在每一步都能正确进行。
在"HTML-master"这个文件夹中，通常会包含以下文件：
- `index.html`：主页面，包含HTML结构和内联CSS。
- `style.css`：外部CSS文件，用于存储所有样式规则。
- `script.js`：外部JavaScript文件，实现游戏的逻辑。
- 可能还会有其他图像资源文件，如图标或者背景图片。
通过学习和实践这个基于HTML的贪吃蛇小游戏，你可以深入理解Web开发的基础，包括页面布局、事件处理、DOM操作以及简单的游戏逻辑。这对于想要入门Web开发或者提升前端技能的开发者来说，是一个很好的练习项目。同时，这也是一个有趣的编程挑战，因为它需要你将抽象的编程概念转化为直观的游戏体验。
HTML-master.zip （1个子文件） 
HTML-master 
2.html 4KB175 浏览量
2023-12-15 上传
122 浏览量
2008-06-15 上传
5星 · 资源好评率100%129 浏览量
2020-10-15 上传
2021-04-19 上传
108 浏览量
5星 · 资源好评率100%134 浏览量
2019-05-25 上传
资源评论
Older司机渣渣威
- 粉丝: 350
- 资源: 202
最新资源
- 基于MATLAB的汽车计数 用于检测和跟踪录制的视频中的汽车，显示汽车总数 程序包运行
- 【IT教程网】D10_01_进程与并发_子进程.wmv
- 【IT教程网】8.第3章文本_处理文件.wmv
- 【IT教程网】D10_02_进程与并发_管理进程.wmv
- 【IT教程网】D10_04_进程与并发_线程延迟和线程化的事件处理.wmv
- 【IT教程网】D10_03_进程与并发_Python中的线程.wmv
- 【IT教程网】28.第8章操作系统什锦_Python中跨平台的UNIX编辑(二).wmv
- 软件可以帮助用户快速批量抓取网页上的图片，并保存到本地，方便后续使用和管理
- 【IT教程网】D09_02_包管理_创建egg.wmv
- 【IT教程网】D11_01_创建GUI_一个简单的PyGTK应用.wmv
- 【IT教程网】D11_03_创建GUI_使用Curese创建Apache日志浏览器.wmv
- 【IT教程网】D11_02_创建GUI_使用PyGTK创建Apache日志浏览器.wmv
- Message2Message3.md
- K230驱动，出USB然后IDE不识别的情况下可以使用，我分享给小伙伴们测试用一下
- 中国对各国农产品进出口数据（1999-2022年）.zip
- IOException如何解决.md
