如何使用 Javascript 创建 Twitch 聊天游戏

直播正成为一种越来越受欢迎的娱乐形式。随着直播的普及，主播们也在寻求更多与粉丝互动的方式。通过创建能够自动让粉丝参与互动的系统，主播们打造出了诸如“Twitch Plays Pokemon”之类的爆款内容，在这个内容中，评论者可以通过在聊天室输入特定指令来操控宝可梦进行游戏。

在本教程中，我们将构建一个基本的 Twitch 聊天游戏，它可以读取 Twitch 评论并利用这些评论让玩家与 Web 应用进行互动。虽然我们不会制作太复杂的功能，但我们会讲解构建游戏的基本要素，帮助你打造下一个热门的 Twitch 游戏！

如果您想逐行查看代码，可以在这里找到源代码：

https://github.com/LiorB-D/TwitchChatGame

如果您想快速体验这款游戏，可以直接在 Codesphere 上试玩演示版：

https://codesphere.com/#https://github.com/LiorB-D/TwitchChatGame

应用加载完成后，只需在 index.html 文件第 45 行输入您的 Twitch 频道并运行即可。

node server.js

我们将使用的工具

本教程中我们将使用的工具相对简单，但根据您要开发的游戏或 Twitch 机器人的类型，您可能需要额外的库和框架。

Tmi.js

首先，我们与 Twitch 聊天互动的基础将是一个名为 tmi.js 的库。

https://tmijs.com/

tmi.js 是一个文档齐全的 JavaScript 包，允许您读写 Twitch 聊天内容。虽然有几种访问方式，包括 NPM 包和 ReactJS 封装，但我们将使用静态 JavaScript 文件来访问 tmi.js。您可以点击此处下载该 JavaScript 文件：

https://github.com/tmijs/tmi.js/releases/download/v1.8.3/tmi.min.js

P5.js

接下来，为了创建我们这个非常简单的游戏的图形，我们将使用 p5.js，这是一个易于使用的 JavaScript 图形库。

https://p5js.org/

您可以通过以下 CDN 访问 p5.js：

<script
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js" integrity="sha512-WIklPM6qPCIp6d3fSSr90j+1unQHUOoWDS4sdTiR8gxUTnyZ8S2Mr8e10sKKJ/bhJgpAa/qG068RDkg6fIlNFA=="
crossorigin="anonymous"
></script>

Codesphere

最后，我们将使用 Codesphere 开发和部署我们的应用程序。Codesphere 是一个零配置云服务提供商，它在其平台上直接提供 Web IDE，从而使部署过程更加顺畅。

https://codesphere.com/

如果您不想部署您的应用程序，本教程中的所有步骤都可以在您选择的文本编辑器中执行。

我们将制作什么

为了简单起见，我们将为我们的 Twitch 观众制作一款极其简单但又趣味十足的游戏。游戏规则如下：

1. 观众评论“加入”即可进入游戏。之后，他们的名字会出现在屏幕上。

2. 每一轮，观众都会评论“A”、“B”、“C”或“D”，并被放置在2x2方格中对应的方框内。

1. 当回合计时器结束时，随机选择一个方格，该方格内的所有玩家将被淘汰。

2. 游戏继续进行，直到所有玩家都被淘汰为止。

显然，还可以添加更多内容来增加观众的参与度和娱乐性，但这种类似轮盘赌的游戏制作起来很容易，而且可以让我们专注于阅读 Twitch 聊天记录。

设置我们的 Express 服务器（可选）

虽然游戏本身将使用静态 HTML 和 Javascript 文件，但我们可以非常快速地创建一个 Express 服务器来运行我们的游戏。

首先，使用以下命令初始化您的 npm 项目：
npm init

输入项目详细信息后，使用以下命令安装 ExpressJS：
npm i express

完成后，创建 `<filename>` server.js、` index.html<filename>` 和 `<public>` 文件夹，用于存放我们的TMI.js文件。您的文件结构应如下所示：

在您的server.js文件中，放入以下代码以提供我们的页面：

https://gist.github.com/LiorB-D/c39b3506840b0419340afac03f456a01

请注意以下用于监听 Twitch 聊天记录的代码：

https://gist.github.com/LiorB-D/f30942dc11f94887fa40e3d1aac637ec

后续步骤

瞧！我们现在拥有了JavaScript的全部功能，可以制作Twitch聊天游戏了！观众互动的可能性是无限的！

使用 tmi.js 和 Javascript 可以制作一些很酷的东西，例如：

• 允许 Twitch 聊天室与你下棋
• 将 Spotify 与 Nodejs 集成，让你的观众可以把歌曲添加到播放列表。
• 让你的观众在类似 .io 的游戏中相互竞争，赢取奖品。

在 Twitter 上关注 @CodesphereCloud，并向我们展示你开发的酷炫作品！

来自Codesphere（下一代云服务提供商）的朋友们祝您编码愉快！