介绍 “那个宝可梦是谁？”应该会给大多数人带来回忆。如果你不知道它是关于什么的，那么我建议你去寻找 Ash Ketchum 和他的口袋妖怪朋友皮卡丘的冒险经历。 在这篇文章中，我将向您展示如何使用 HTML、CSS 和 JavaScript 创建一个简单的口袋妖怪猜谜游戏。该游戏完全基于“那个口袋妖怪是谁？”来自口袋妖怪动漫系列。您可以 提醒自己它的样子。 在这里 这是一个简单的游戏，它只有不到 70 行 JavaScript 代码。 。我还将教您如何免费部署它。这个游戏是一个完美的项目创意，您可以改进并添加到您的投资组合中。 您可以查看它的外观并在此处尝试 我不会在这篇文章中教你太多 JavaScript，你可以从许多免费的在线教程中学习它。但是，我将教授创建这样的游戏所需的必要步骤。 如何开始？ 让我们想象一下，您将此作为学校的作业或工作中的任务。有人刚刚向您展示了上面的视频，您需要重新创建它。你会怎么开始？ 那么，您需要检查的第一件事是您需要拥有哪些数据。 在这种情况下，您需要拥有一个口袋妖怪精灵列表以及每个精灵的口袋妖怪名称。您通常从某些数据库、CSV 或 excel 文件中获取类似的数据。另一种选择是检查是否有任何提供所有这些的 Pokemon   。 API 对我们来说幸运的是，有一个免费的 可以提供我们需要的一切。在他们的网站上，您可以找到 API 文档，也可以测试 API。我们希望在应用程序启动时只调用一次 API。该调用的结果我们将保存到变量并在整个持续时间内使用它。 PokeAPI 使用公共免费 API 时，请始终确保将调用次数降至最低，因为这会在有人付费的服务器上创建一些工作！ 想出一个主意 现在，当您知道您拥有所有必要的数据时，您需要检查您的应用程序需要具备哪些功能。这就是所谓的功能需求。你把它们写下来，然后你开始实现你写的东西。所以这个应用程序的功能要求是： 从 API 获取所有 Pokemon 数据 显示随机口袋妖怪精灵的阴影 显示玩家正确猜测的当前连续性 玩家需要能够通过在输入字段中输入名称并按 Enter 键来猜测口袋妖怪的名字 如果玩家猜对了，则将连胜加一，否则将连胜重置为零 做出猜测后，通过显示它的精灵并打印它的名字来揭示口袋妖怪是什么 重复上述所有步骤，除了第一步 您还可以列出非功能性需求： 查找或创建类似于动漫背景的背景图像 找到一种类似于 Pokemon 字体的字体 在输入表单中添加一些 CSS 样式 执行 如您所见，该应用程序非常简单。您显示一个随机口袋妖怪的精灵阴影，让玩家猜测，然后增加或重置连胜计数器。最后一步显示口袋妖怪，然后得到一个新的。  打开您喜欢的文本编辑器。我喜欢使用 Visual Studio Code (VS Code)。创建三个文件——“   ”、“   ”和“   ”。将所有三个文件放在同一个文件夹中。打开 index.html 并初始化它。在 VS Code 中，您只需键入 !然后按 Tab 键。如果您不使用 VS Code 并且不知道如何初始化 HTML 文件，您 。之后，只需在 head 标签内添加指向 CSS 和 JS 文件的链接。 index.html style.css action.js 可以在此处查看 在正文标签内，您需要添加一个将显示精灵的图像标签，一个供用户猜测的输入字段，以及一个显示正确猜测条纹的跨度字段。这些标签中的每一个都应该有一个唯一的 id 属性。我们现在已经完成了 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"> <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。我使用了 。一旦从 API 获取数据并保存到变量中，游戏就可以开始了。 fetch 功能 游戏从 函数开始。该功能还用于在用户每次猜测时生成一个新的口袋妖怪。因此，在该功能开始时，需要在生成新的口袋妖怪之前进行一些清理。 getPokemon() 生成口袋妖怪很简单 - 获取一个随机数，获取口袋妖怪名称和带有该数字的精灵并将其保存到变量中。之后通过将 属性设置为 sprite URL 并将 CSS 属性亮度设置为零来显示 Pokemon 的影子。 img src 之后，应用程序什么也不做，直到用户按下 Enter 键。您应该向输入字段添加一个 器，该侦听器将检查是否按下了 Enter 键，如果它是一个函数，则将调用  。 事件侦听 checkGuess()   函数只是根据用户的猜测增加或重置连拍值并调用 函数。  更新 HTML 上的连续值，显示 Pokemon 的 sprite，并显示 Pokemon 的名称。 2 秒后，  函数将被调用，整个过程将重新开始。就是这样。 checkGuess() showPokemon() showPokemon() getPokemon() 造型 好的，现在是时候为这款游戏添加一些风格了，让它看起来与视频中的相似。如您所知，CSS 用于样式设置。您可以查看 ，它包含的内容不多。而且我很确定你可以比我做得更好。毕竟，我只是一个后端开发人员。  我的 CSS 文件 我找到了一张背景图片，您可以 。我还发现了一种与 Pokemon 字体非常相似的字体。您也 。设置背景图像很容易 - 在 CSS 文件中，您需要将属性“背景图像”添加到带有图像路径的主体标签。 在此处查看和下载 可以从我的存储库下载它  Sprite 始终显示在屏幕左侧，而文本和口袋妖怪名称显示在右侧。要制作只有两列的效果，您可以使用  。在 HTML 中，您需要添加一个带有“row”类的父 div，在该 div 中，您需要添加两个带有“column”类的 div。 flexbox 在 CSS 中加载自定义字体也很简单。使用@font-face 可以设置字体的名称和字体的路径。之后，您可以使用该字体及其名称。使用该字体设计“谁是那个口袋妖怪？”屏幕右侧还有口袋妖怪的名字。 您可以随意设置输入字段和条纹的样式，我只是在输入字段中添加了圆角并对齐文本。我也改变了大小。您可以检查您喜欢的内容，也可以使用我的值。 您需要添加的最后一件事是移动设备的样式。如果浏览器窗口的宽度为 500 像素或更小，它会与 一起添加，您可以在其中设置新的 CSS 属性。您需要更改列显示为行，减小字体大小并增加输入字段的宽度。这就是造型。正如我所说，你可以做得比我做得更好，这是让它看起来与视频相似的最低要求。 @media 规则 下一步 在本教程中，我向您展示了如何实现“谁是口袋妖怪？”带有 HTML、CSS 和 JavaScript 的游戏。如果您在某些方面遇到困难，您可以阅读 action.js 文件中的评论，或者在此处或 问我。您也可以关注我那里的新帖子。 Twitter 上 为了练习，您可以实施一些新功能来改进此游戏并使其独一无二。例如： 添加按钮，用户可以单击以更改口袋妖怪的世代以猜测 添加一个可以播放语音“谁是那个口袋妖怪？”的功能第一次加载游戏。 创建一个显示高分的新变量。 添加一个计时器，将在获得新口袋妖怪之间倒计时 您可以实施很多想法，这样您将获得一些新经验并学习新事物。 完成后，您可以 以便在您的作品集或简历中展示它。只需按照 。 轻松地免费部署此游戏， 这个简单的指南 也在 发布。 这里

Amazon

Fetch

Mozilla

Twitter

YouTube

Free programming tutorials and project ideas

Writer

該音頻是用故事的原始語言製作的！

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

加密货币增长：创建有效的用户角色

Telegram：加密岛通往大陆的桥梁

如何将您的工作流程提高 10 倍：17 个必备应用程序

扬帆起航：利用数据湖开发生产级 RAG 应用程序

加密货币增长：创建有效的用户角色

Telegram：加密岛通往大陆的桥梁

如何将您的工作流程提高 10 倍：17 个必备应用程序

扬帆起航：利用数据湖开发生产级 RAG 应用程序

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps