您现在的位置是：网站首页> 编程资料编程资料

JavaScript躲避行星游戏实现全程_javascript技巧_

2023-05-24 418人已围观

简介 JavaScript躲避行星游戏实现全程_javascript技巧_

1. 游戏概述

顾名思义，躲避小行星游戏的目标是非常明显的：当小行星向你冲来时，让火箭飞行和生存的时间尽可能长一些（如图91所示）。如果你碰上某颗小行星，游戏将结束，游戏的分数是通过火箭生存的时间来计算的。

躲避小行星游戏是一个“横向卷轴式”游戏，或者说它至少类似于这样的游戏，将会侧重于动态场景。

2. 核心功能

在创建游戏之前，首先需要构建一些基本框架。就创建躲避小行星游戏而言，这些框架就是基本的HTML、CSS以及JavaScript代码（作为将来要添加的高级代码的基础）。

2.1 构建 HTML 代码

在浏览器中创建游戏的优点在于可以使用一些构建网站的常用技术。也就是说，可以使用 HTML 语言来创建游戏的用户界面（UI）。现在的界面看上去不太美观，这是因为我们还没有使用 CSS 来设计用户界面的样式，但目前内容的原始结构是最重要的。

在你的计算机上为该游戏创建一个新目录，新建一个index.html文件，在其中加入以下代码：

Asteroid avoidance
Asteroid avoidance
Click play and then press any key to start.
Play
Time: 
Reset
Game over!
You survived for  seconds. 
Play

我不打算过多解释这些 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; // 游戏UI const 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 之间，但你也可以采用同样的方法来设置它（ -5 减去一个 0 到 5 之间的数）。因为你需要让小行星按从右向左的方向运动，所以使用的是一个负的速度值，这说明 x 的位置将随着时间的推移而减小。

计算每颗小行星的 x 位置看上去有些复杂，但其实非常简单。在开始启动游戏的时候，如果让所有的小行星全部显示在屏幕上，就让人觉得有些太奇怪了。因此在游戏开始之前，最好把小行星放在屏幕的右侧，当游戏开始时才让它们按从右向左的顺序穿过屏幕。

为此，首先需要把 x 位置设为 canvas 元素的宽度，然后加上小行星的半径。这意味着如果你现在画出小行星，那么它应该位于屏幕的右侧。如果仅仅这样做，那么所有的小行星将会排成一行，所以下一步我们需要把 x 位置加上一个介于 0 到画布宽度之间的随机值。与 x 位置相比，y 位置简单一些，它只是一个介于 0 到画布高度之间的随机值。

这样可以产生一个与画布尺寸相同的方框，方框中随机分布着一些小行星。当游戏开始时，这些小行星将穿过可见的画布。

最后一步是把一个新的小行星推送到数组中，做好移动和绘制小行星的准备。

3.2 创建玩家使用的火箭

首先声明用于建立玩家的初始化变量。在 JavaScript 顶部的 numAsteroids 变量下面添加以下代码：

let player;

该变量将用于存储玩家对象的引用，但现在我们还没有定义玩家对象。在Asteroid 类下面添加以下代码：

function Player(x, y) { this.x = x; this.y = y; this.width = 24; this.height = 24; this.halfWidth = this.width / 2; this.halfHeight = this.height / 2; this.vX = 0; this.vY = 0; }

你应该熟悉以上代码的某些部分，例如位置和速度属性。其余属性用于描述玩家使用的火箭的尺寸，包括整个尺寸和一半的尺寸。绘制火箭和执行碰撞检测时，你需要使用这些尺寸。

最后一步是创建一个新的玩家对象。为此，在 startGame 函数中的numAsteroids变量下面添加以下对象：

player = new Player(150, canvasHeight / 2);

通过以上代码，玩家的位置将垂直居中，并且距离画布左边界 150 像素。

现在还不能看到任何效果，稍后当你开始着手移动所有的游戏对象时，将会从视觉上看到这种效果。

4. 检测键盘输入

本游戏将使用键盘来控制游戏。更确切地说，你将使用方向键来四处移动玩家使用的火箭。如何才能实现这种控制呢？这比控制鼠标输入更难吗？不，其实非常简单。下面我来教你怎么做。

4.1 键值

在处理键盘输人时，首先需要知道哪一个按键被按下了。在 JavaScript 中，普通键盘上的每一个按键都分配了一个特定的键值（key code）。通过这些键值，可以唯一确定按下或释放了哪个键。稍后你将学习如何使用键值，现在我们首先需要了解每个按键所对应的数值。

例如，键 a 到 z （无论在什

上一篇：基于useImperativeHandle的使用解析_React_

下一篇：react中使用antd及immutable示例详解_React_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网