如何制作JavaScript游戏？

JavaScript允许我们做很多很酷的事情，制作游戏也是其中之一。是的，除了让我们的网站更具吸引力、更美观之外，我们还可以使用JavaScript创建各种各样的游戏。

那么让我们看看如何使用HTML和JavaScript创建游戏。

为了创建游戏，我们将使用HTML Canvas，所以在进一步之前，我们需要了解HTML Canvas这个术语。

HTML Canvas

<Canvas>是众多HTML元素之一。它主要用于借助脚本语言（通常是JavaScript）即时绘制图形。这个元素作为图形的容器，并在其上绘制真实的图形，你必须使用像JavaScript这样的脚本语言。它还提供了各种方法/函数，可以用来绘制路径和多种类型的图像，如圆形、盒子等，以及添加图像。

Canvas元素还可以用于许多其他事情。其中一些如下所示

1. 它可用于绘制文本。
2. 它可用于绘制图形。
3. 它可用于移动图形，如弹跳球，或动画任何其他东西。
4. 它可以提供交互；例如，它可以响应多种JavaScript事件。

让我们看一个如何创建Canvas的例子

创建Canvas的语法

示例

输出

我们使用canvas元素创建了游戏区域。它也是创建HTML、JavaScript游戏应用程序的最佳选择，因为它提供了开发游戏所需的所有功能。

.getContext("2d")

这是<canvas>元素的一个内置对象，称为getContext("2d")对象，它包含了在<canvas>中绘制图形所需的所有方法/函数和属性。

让我们通过创建游戏区域并准备绘制来开始开发我们的游戏

第一步：游戏区域

为了创建游戏区域，我们将使用Canvas元素，正如我们上面已经讨论过的。

程序

程序说明

在上面的程序中，我们创建了一个函数“startGame();”，其中我们后来调用了mygameArea对象的start()方法。方法“start()”然后创建一个canvas并将其作为第一个子节点插入到body元素中。

输出

第二步：游戏组件

在这一步中，我们将使用构造函数创建一个组件，该构造函数允许我们将该组件添加到我们的游戏区域。

对象构造函数称为“component”，我们将创建我们的第一个组件，名为“mygamecomponent:”

让我们借助以下示例了解如何创建游戏组件

程序说明

在上面的程序中，我们创建了一个名为“mygameComponent”的对象，用于在“myGamestart();”函数的主体内部创建我们的游戏组件。

输出

第三步：帧

为了给我们的游戏添加生命并使其为行动做好准备，我们必须以每秒50帧的速度刷新/更新游戏区域。例如，一部电影的刷新率至少为60帧/秒。

所以首先，我们必须创建一个函数“updateMyGame()”，并且在该函数的对象中，我们必须添加一个时间间隔，该时间间隔将每20毫秒执行一次函数UpdateMyGame();，这相当于每秒50次。此外，我们还必须添加名为clear()的函数，用于清除整个游戏区域（或整个canvas）。

在“component”构造函数内部，我们将调用一个用于处理组件绘制的函数，称为“Update()”函数。

UpdateMyGame();函数调用clear();和update();方法。

由于以上所有工作，我们的游戏组件以每秒50帧的速度在canvas上绘制并清除。

我们可以通过以下示例来理解它

程序

输出

第四步：为组件添加移动

为了显示蓝色矩形每秒被绘制50次，每次“updateGameArea()”函数执行时，我们都会将“a”位置（水平面）改变1像素。

改变位置

我们可以使用A和B坐标来改变位置或将我们的游戏组件定位在游戏区域。

第五步：创建控制按钮

游戏必须有控制来玩游戏或控制游戏组件。

在这里，我们将创建两个控制按钮来控制我们的矩形框的移动。我们必须为每个按钮创建几个函数。

我们必须在组件的构造函数中创建新属性，并将它们命名为speed A，speed B。我们将使用这些属性作为速度指示器。

我们还必须在组件的构造函数中添加一个名为“newPos();”的新函数，该函数将使用speedA、speedB属性将组件从游戏区域/画布中的一个位置移动到另一个位置（或改变位置）。newPos();函数将在“updatemygame();”函数的主体中，在绘制组件之前被调用。

示例

输出

第六步：创建一些障碍物

众所周知，任何游戏如果没有包含任何困难/障碍物，那它就什么都不是。

让我们看看如何通过创建一个新组件并将其添加到游戏区域来创建障碍物。

示例

我们可以通过采用上述程序中使用的步骤，创建任意数量的限制/障碍物。

注意：在每一帧中更新所有组件（或障碍物）也很重要。

输出

为障碍物提供移动

如果游戏中有障碍物，但它们是静态的，没有人会喜欢玩那个游戏。

为了让我们的障碍物移动，我们必须在每次更新时改变“myfirstObstacle.x”的属性。

示例

如果你撞到障碍物会怎样

众所周知，在任何游戏中，如果用户撞到任何障碍物，游戏就结束了。

为此，我们需要在组件的构造函数中创建一个新方法，该方法将从游戏开始时检查我们的蓝色框与其他限制（或任何其他组件）的碰撞。该方法必须在每次接收到帧更新时重复执行（或者我们可以说该方法应该每秒调用50次）。我们还必须在**mygamearea**的对象中添加stop();方法，该方法将清除20毫秒的时间间隔。

程序

输出

创建随机大小的障碍物

为了让我们的游戏更难更有趣，添加随机大小的障碍物，这样用户就可以不断地向不同方向移动蓝色方框以避免撞到障碍物。

程序

输出

第七步：显示用户得分

显示用户得分有许多不同的方法，但为了使这个游戏尽可能简单，我们将使用最简单的方法之一。

在此方法中，我们首先需要创建一个新变量，例如**“userscore”**，并且还需要创建另一个组件来显示用户得分。

众所周知，在canvas上书写任何文本与在canvas上创建/绘制一个盒子是完全不同的。因此，有必要使用附加参数调用组件的构造函数，该参数将告诉构造函数组件的类型，在这种情况下是“text”类型。

在组件的构造函数中，我们将测试组件的类型，例如，如果它是**“text”**类型的组件，一旦我们检查了组件的类型，我们将使用**“fillText”**方法。

最后，我们将使用**FrameNo**属性来计算分数。为了实现这一点，我们必须修改**“updateGameArea();”**函数的一些代码，该函数将使用**FrameNo**属性并写入canvas分数。

程序

输出

注意：你还可以为这个游戏添加许多其他功能，使其更具吸引力。例如，背景图片、音效等。