本文详细介绍了如何使用HTML5 Canvas、JavaScript和CSS创建一个躲避小行星的游戏，涵盖了游戏概述、核心功能、游戏对象创建、键盘输入检测、对象运动、横向卷轴效果、声音添加、游戏结束和计分系统等方面。通过JavaScript实现游戏逻辑，包括创建小行星和火箭对象、检测键盘输入来控制火箭移动，并通过HTML5音频API添加背景音乐和效果音。此外，还增加了游戏难度，随着时间推移，小行星数量逐渐增多，提高了挑战性。
躲避小行星游戏
本文将使用 canvas 创建一个躲避小行星游戏。另外将重点介绍的两个方面是：如何使用 JavaScript 来检测键盘输入，以及如何在游戏中使用和处理 HTML5 音频。希望你能够喜欢！
1. 游戏概述
顾名思义，躲避小行星游戏的目标是非常明显的：当小行星向你冲来时，让火箭飞行和生存的时间尽可能长一些（如图91所示）。如果你碰上某颗小行星，游戏将结束，游戏的分数是通过火箭生存的时间来计算的。
躲避小行星游戏是一个“横向卷轴式”游戏，或者说它至少类似于这样的游戏，将会侧重于动态场景。
2. 核心功能
在创建游戏之前，首先需要构建一些基本框架。就创建躲避小行星游戏而言，这些框架就是基本的HTML、CSS以及JavaScript代码（作为将来要添加的高级代码的基础）。
2.1 构建 HTML 代码
在浏览器中创建游戏的优点在于可以使用一些构建网站的常用技术。也就是说，可以使用 HTML 语言来创建游戏的用户界面（UI）。现在的界面看上去不太美观，这是因为我们还没有使用 CSS 来设计用户界面的样式，但目前内容的原始结构是最重要的。
在你的计算机上为该游戏创建一个新目录，新建一个index.html文件，在其中加入以下代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Asteroid avoidance</title><link rel="stylesheet" href="style.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="./main.js"></script>
</head>
<body><div id="game"><div id="game-ui"><div id="game-intro"><h1>Asteroid avoidance</h1><p>Click play and then press any key to start.</p><p><a id="game-play" class="button" href="#">Play</a></p></div><div id="game-stats"><p>Time: <span class="game-score"></span> </p><p> <a class="game-reset" href="#">Reset</a> </p></div><div id="game-complete"><h1>Game over!</h1><p>You survived for <span class="game-score"></span> seconds. </p><p><a class="game-reset buyyon" href="#">Play</a></p></div></div><canvas id="game-canvas" width="800" height="600"><!-- 在此处插入后备代码 --></canvas></div>
</body>
</html>
我不打算过多解释这些 HTML 代码，因为它们比较简单，但你只要知道这就是游戏所需的所有标记即可。
2.2 美化界面
创建一个名为 style.css 的新文件，并把它和 HTML 文件放在相同的目录下。在该 CSS 文件中插入以下代码：
* {margin: 0;padding: 0;
}
html, body {height: 100%;width: 100%;
}
canvas {display: block;
}
body {background-color: #000;color: #fff;font-family: Verdana, Arial, sans-serif;font-size: 18px;height: 100%;
}
h1 {font-size: 30px;
}
p {margin: 0 20px;
}
a {color: #fff;text-decoration: none;
}
a:hover {text-decoration: underline;
}
a.button {background-color: #185da8;border-radius: 5px;display: block;font-size: 30px;margin: 40px 0 0 270px;padding: 10px;width: 200px;
}
a.button:hover {background-color: #2488f5;color: #fff;text-decoration: none;
}
#game {height: 600px;left: 50%;margin: -300px 0 0 -400px;position: relative;top: 50%;width: 800px;
}
#game-canvas {background-color: #001022;
}
#game-ui {height: 600px;position: absolute;width: 800px;
}
#game-intro, #game-complete {background-color: rgba(0, 0, 0, .5);margin-top: 100px;padding: 40px 0;text-align: center;
}
#game-stats {font-size: 14px;margin: 20px 0;
}
#game-stats, .game-reset {margin: 20px 20px 0 0;position: absolute;right: 0;top: 0;
}
2.3 编写 JavaScript 代码
在添加一些有趣的游戏逻辑之前，首先需要用JavaScript实现核心功能。创建一个名为 main.js 的新文件，并把它和 HTML 文件放在相同的目录下。在该 js 文件中插入以下代码：
$(document).ready(function () {const canvas = $('#game-canvas');const context = canvas.get(0).getContext("2d");// 画布尺寸const canvasWidth = canvas.width();const canvasHeight = canvas.height();// 游戏设置let playGame;// 游戏UIconst ui = $("#game-ui");const uiIntro = $("#game-intro");const uiStats = $("#game-stats");const uiComplete = $("#game-complete");const uiPlay = $("#game-play");const uiReset = $(".game-reset");const uiScore = $(".game-score");// 重至和启动游戏function startGame() {// 重置游戏状态uiScore.html("0");uiStats.show();// 初始游戏设置playGame = false;// 开始动画糖环animate();}//初始化游戏环境function init() {uiStats.hide();uiComplete.hide();uiPlay.click(function (e) {e.preventDefault();uiIntro.hide();startGame();});uiReset.click(function (e) {e.preventDefault();uiComplete.hide();startGame();});}// 动画循环，游戏的嫌味性就在这里function animate() {// 清除context.clearRect(0, 0, canvasWidth, canvasHeight);if (playGame) {setTimeout(animate, 33);}}init();
});
在你最喜欢的浏览器中运行该游戏，应该会看到一个更加美观的 UI。另外，你还可以单击 Play 按钮来显示游戏的主窗口，尽管它看上去也许还有些单调。
3. 创建游戏对象
躲避小行星游戏使用两个主要对象：小行星和玩家使用的火箭。我们将使用 JavaScript 类来创建这些对象。你也许会觉得奇怪，既然玩家只有一个，为什么还要通过一个类来定义它呢？简而言之，如果你以后需要在游戏中添加多个玩家，通过类创建玩家就会更容易一些。
3.1 创建小行星
通过类创建游戏对象意味着你可以在其他游戏中非常方便地重用和改变它们的用途。
第一步是声明主要变量，我们将使用这些变量来存储所有的小行星。同时，还需要声明另外一个变量，用于计算游戏中应该存在的小行星数目。在 JavaScript 代码顶部的 playGame 变量下面添加以下代码：
let asteroids;
let numAsteroids;
稍后你将会为这些变量赋值，但现在我们只建立小行星类。在startGame函数上面添加以下代码：
function Asteroid(x, y, radius, vX) {this.x = x;this.y = y;this.radius = radius;this.vX = vX;
}
这里存在一个速度属性，这是因为小行星只需要从右向左运动，即只需要 x 速度。这里不需要 y 速度，所以就省略了。
在开始创建所有小行星之前，需要建立数组来存储这些小行星，并声明实际需要使用的小行星数目。在startGame函数中的PlayGame变量下面添加以下代码：
asteroids = new Array();
numAsteroids = 10;
你也许认为 10 个小行星是一个很小的数目，但是当这些小行星在屏幕上消失时，你将重复使用它们，所以在游戏中你实际看到的小行星数目可以有无穷多个。你可以把这里的小行星数目看做屏幕上某一时刻可能出现的小行星总数。
创建小行星的过程其实就是一个创建循环的过程，循环的次数就是你刚才声明的小行星数目。在你刚才赋值的numAsteroids变量下面添加以下代码：
for (let i = 0; i < numAsteroids; i++) {const radius = 5 + (Math.random() * 10);const x = canvasWidth + radius + Math.floor(Math.random() * canvasWidth);const y = Math.floor(Math.random() * canvasHeight);const vx = -5 - (Math.random() * 5);asteroids.push(new Asteroid(x, y, radius, vX));
}
为了让每颗小行星的外观都与众不同，并且使游戏看上去更有趣一些，可以把小行星的半径设为一个介于 5 到 15 像素之间的随机数（ 5 加上一个介于 0 到 10 之间的随机数）。虽然 x 速度的值介于 -5 到 -10 之间，但你也可以采
最低0.47元/天 解锁文章
945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
