5,816 讀數

用 70 行 Javascript 重新创建一个简单的口袋妖怪游戏

经过 marinsborg8m2022/07/10

太長; 讀書

该游戏基于“谁是口袋妖怪？”来自口袋妖怪动漫系列。这是一个简单的游戏，它只有不到 70 行 JavaScript 代码。我还将教您如何免费部署它。这个游戏是一个完美的项目创意，您可以改进并添加到您的投资组合中。该应用程序非常简单。你展示一个随机口袋妖怪的精灵影子，让玩家猜测，然后增加或重置连胜计数器。

Companies Mentioned

featured image - 用 70 行 Javascript 重新创建一个简单的口袋妖怪游戏

介绍

“那个宝可梦是谁？”应该会给大多数人带来回忆。如果你不知道它是关于什么的，那么我建议你去寻找 Ash Ketchum 和他的口袋妖怪朋友皮卡丘的冒险经历。

在这篇文章中，我将向您展示如何使用 HTML、CSS 和 JavaScript 创建一个简单的口袋妖怪猜谜游戏。该游戏完全基于“那个口袋妖怪是谁？”来自口袋妖怪动漫系列。您可以在这里提醒自己它的样子。

这是一个简单的游戏，它只有不到 70 行 JavaScript 代码。您可以查看它的外观并在此处尝试。我还将教您如何免费部署它。这个游戏是一个完美的项目创意，您可以改进并添加到您的投资组合中。

我不会在这篇文章中教你太多 JavaScript，你可以从许多免费的在线教程中学习它。但是，我将教授创建这样的游戏所需的必要步骤。

如何开始？

让我们想象一下，您将此作为学校的作业或工作中的任务。有人刚刚向您展示了上面的视频，您需要重新创建它。你会怎么开始？

那么，您需要检查的第一件事是您需要拥有哪些数据。

在这种情况下，您需要拥有一个口袋妖怪精灵列表以及每个精灵的口袋妖怪名称。您通常从某些数据库、CSV 或 excel 文件中获取类似的数据。另一种选择是检查是否有任何提供所有这些的 Pokemon API 。

对我们来说幸运的是，有一个免费的PokeAPI可以提供我们需要的一切。在他们的网站上，您可以找到 API 文档，也可以测试 API。我们希望在应用程序启动时只调用一次 API。该调用的结果我们将保存到变量并在整个持续时间内使用它。

使用公共免费 API 时，请始终确保将调用次数降至最低，因为这会在有人付费的服务器上创建一些工作！

想出一个主意

现在，当您知道您拥有所有必要的数据时，您需要检查您的应用程序需要具备哪些功能。这就是所谓的功能需求。你把它们写下来，然后你开始实现你写的东西。所以这个应用程序的功能要求是：

从 API 获取所有 Pokemon 数据
显示随机口袋妖怪精灵的阴影
显示玩家正确猜测的当前连续性
玩家需要能够通过在输入字段中输入名称并按 Enter 键来猜测口袋妖怪的名字
如果玩家猜对了，则将连胜加一，否则将连胜重置为零
做出猜测后，通过显示它的精灵并打印它的名字来揭示口袋妖怪是什么
重复上述所有步骤，除了第一步

您还可以列出非功能性需求：

查找或创建类似于动漫背景的背景图像
找到一种类似于 Pokemon 字体的字体
在输入表单中添加一些 CSS 样式

执行

如您所见，该应用程序非常简单。您显示一个随机口袋妖怪的精灵阴影，让玩家猜测，然后增加或重置连胜计数器。最后一步显示口袋妖怪，然后得到一个新的。

打开您喜欢的文本编辑器。我喜欢使用 Visual Studio Code (VS Code)。创建三个文件——“ index.html ”、“ style.css ”和“ action.js ”。将所有三个文件放在同一个文件夹中。打开 index.html 并初始化它。在 VS Code 中，您只需键入 !然后按 Tab 键。如果您不使用 VS Code 并且不知道如何初始化 HTML 文件，您可以在此处查看。之后，只需在 head 标签内添加指向 CSS 和 JS 文件的链接。

在正文标签内，您需要添加一个将显示精灵的图像标签，一个供用户猜测的输入字段，以及一个显示正确猜测条纹的跨度字段。这些标签中的每一个都应该有一个唯一的 id 属性。我们现在已经完成了 HTML，这是到目前为止的样子：

 <!DOCTYPE html> <html lang="en"> <head> <!--For implementation details visit marinsborg.com--> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="action.js" defer></script> <link rel="stylesheet" href="style.css"> <title>Who's that Pokemon?</title> </head> <body> <img id="sprite"> <input type="text" placeholder="Who's that Pokemon?" id="guess"> <br> <span id="streak">Streak: 0</span> </body> </html>

现在让我们关注 action.js 文件。有整个游戏的逻辑。在 GitHub 上，你可以查看我的 action.js 文件，我几乎在每一行都评论了它的作用。这就是为什么我不会在这里逐行解释的原因。

正如你在文件中看到的那样，带有基本 URL 的 PokeAPI 可以接受额外的参数“limit”和“offset”。这样你就可以选择你想在 API 响应中得到什么口袋妖怪以及它们的数量。我将偏移量设置为 0 并限制为 150，所以我总是只会得到第一代的口袋妖怪。您可以随意更改此设置。

如上图所示 - API 将返回一个对象数组，每个对象包含口袋妖怪名称和 URL，您可以打开它们以获取有关该口袋妖怪的更多信息。口袋妖怪按它们的 PokeDex 编号排序，但是在数组中它们的编号减一，因为数组从零开始。这是您需要进行的唯一 API 调用。

在 JavaScript 中，您可以通过多种方式调用 API。我使用了fetch 功能。一旦从 API 获取数据并保存到变量中，游戏就可以开始了。

游戏从getPokemon()函数开始。该功能还用于在用户每次猜测时生成一个新的口袋妖怪。因此，在该功能开始时，需要在生成新的口袋妖怪之前进行一些清理。

生成口袋妖怪很简单 - 获取一个随机数，获取口袋妖怪名称和带有该数字的精灵并将其保存到变量中。之后通过将img src属性设置为 sprite URL 并将 CSS 属性亮度设置为零来显示 Pokemon 的影子。

之后，应用程序什么也不做，直到用户按下 Enter 键。您应该向输入字段添加一个事件侦听器，该侦听器将检查是否按下了 Enter 键，如果它是一个函数，则将调用checkGuess() 。

checkGuess()函数只是根据用户的猜测增加或重置连拍值并调用showPokemon()函数。 showPokemon()更新 HTML 上的连续值，显示 Pokemon 的 sprite，并显示 Pokemon 的名称。 2 秒后， getPokemon()函数将被调用，整个过程将重新开始。就是这样。