使用Decentraland SDK创建记忆游戏——学习如何使用SDK和API来创建您的第一个简单的游戏！

你想为这个虚拟空间构建你的第一个交互式体验吗？你来对地方了!

我的名字是Daniel Belohlavek，我是Decentraland世界团队的一员(负责开发Decentraland客户端和开发人员体验的团队)。具体来说，我要对CLI负责，所以如果你想反馈，就在Discord（https://discordapp.com/invite/9EcuFgC）上找我吧!

创建一个Decentraland里的体验，与现代web开发有许多相似之处。如果你曾经创建过一个只使用HTML的网站，或者你已经玩过React，你就会觉得很适应我们的SDK了。如果你有游戏开发的背景，请坚持一下，我将领你一步步学会创建一个叫做“西蒙说”的基本记忆游戏!

先决条件

首先，请访问我们的开发人员门户（https://developers.decentraland.org），在那里您可以找到关于如何和在哪里能够获取命令行界面(CLI)的信息，这是所有开发人员的虚拟世界的入口。在继续我们的快速入门指南（https://docs.decentraland.org/docs/sdk-quick-start-guide）之前，确保一切都设置妥当。请记住，本教程是在SDK的Alpha版本发布后不久编写的。

您可以从GitHub下载本教程的源代码（https://github.com/decentraland/sample-scene-memory-game）。

西蒙说

“西蒙说”是一个简单的记忆游戏，你必须记住一个序列的顺序。如果你选择错误就会立即输掉游戏。这个游戏可以有几种不同的形式，我们将使用四种颜色和一个复位按钮来构建经典的“记住颜色序列”类游戏。

计算机将向玩家显示一系列颜色，然后等待玩家重新提交相同的序列。如果玩家重新提交了正确的顺序，他们就赢了。游戏会显示一个更长的色彩序列而变得更加困难。如果玩家记错了哪怕一种颜色，他们就输了。这很容易对吧？让我们开始吧！

开始

首先为您的项目创建一个新的文件夹，并使用命令创建一个新的单个播放器场景。我们将使用TypeScript(推荐用于我们的SDK的一种脚本语言)来构建我们的场景。虽然没有强制文件夹结构，我建议您在离开场景时将所有脚本放入文件夹中，并把scene.tsx留在外面作为你的入口点。

定义游戏状态

正如我前面提到的，这个游戏有几个可能的实现方式。我们今天要创建的这个游戏在可读性和长度之间将保持良好的平衡。如果你在此过程中自己解决了遇到的问题，或者发现我程序中的问题，你可以随时在我们Github的游戏repo中留下一个事件。

Sence.tsx文件不仅是入口点，也是我们游戏状态的真实来源，同时我们会将所有的游戏逻辑放置在里面。开始吧，我们来写一个简单的场景：

如果您想知道接口应该做什么，不要担心，它是TypeScript工具集的一部分，帮助我们严格地键入代码。在这种情况下，我们要为游戏状态定义一个合约，并需要考虑到合约的转换时间。我们游戏的难度取决于玩家要记住的序列长度。我们可以从这个简单的合约开始，在其上储存更复杂的状态。

第二个可能引起你注意的部分是，是一个一般类，它允许我们为接收到的属性(在本例中没有)指定一个类型，以及为这个场景将保持的状态指定类型:即之前定义的合约。这个状态将同时保持正确序列和玩家提交的序列。

每次更新状态时，将调用方法来更新我们的场景。如果你看一下状态属性的定义，你可以看到合约是如何被考虑到的。如果您使用的是像VSCode这样的集成开发环境（IDE），您甚至可以在文本上悬停，以验证该类型是否被正确推断。

存储颜色序列

为了存储颜色序列，我们需要向状态添加更多数据。首先，计算机生成的序列应该用一组可能的颜色来表示(每种颜色代表个人的选择)。我们将在一个类似的数组中存储玩家所提交的序列，以便更容易地将两个数组进行比较。

最后，我们还需要包含两个字段，一个包含当前的活动颜色(这允许我们一个一个按顺序向玩家展示颜色)，以及一个标志来控制玩家可以提交选择的时间。

现在，我们的状态界面是这样的：

我们的默认状态看起来是这样的：

但究竟什么是面板呢？TypeScript允许我们定义字符串枚举(它可以被认为是带有特定字符串字段的字典)。为了使它们与域配对，我们将对面板组件(所有面板的可视表示)和面板枚举(单个面板标识符)进行分组。

输入方法

玩家只能在这个游戏中与两个对象进行交互:选择面板和重置按钮。为了实现这一点，我们将在文件夹中创建两个新文件，让我们从Panels.tsx开始：

如您所见，我们正在使用面板枚举的成员作为我们平面实体的身份标识。这是有用的，因为我们需要为我们的实体分配一个身份标识，这样我们才能与它们交互。

一个面板就是我们所说的“纯组件”，这意味着我们用一个简单的函数来将我们的实体解耦到外部无状态模块中。要创建你自己的组件，只需要定义一个能够返回JSX的新函数。这些纯函数的工作方式与我们场景的工具相同，只是它们要求我们返回单个元素，这就是为什么我们将所有的程序盒封装入一个泛型之中。

驱动我们面板功能的逻辑非常简单。我们只需接收一个属性，然后为该面板设置颜色。还有一个位置属性用于控制整个面板组件作为一个组。

回到scene.tsx文件，我们现在可以使用我们的组件如下：

当我们的状态更新并且属性改变时，我们的面板组件将按照预期改变面板颜色。

我们还需要一个重置按钮，让我们的玩家可以想玩多久就玩多久。因此，我们将创建另一个名为Button.tsx的组件，它将比我们的面板组件简单得多：

我们所做的就是创建一个程序盒并给它一个身份标识，我将在按钮组件中留下一个实体包装容器，这样我们就可以在未来添加更多的实体。

我们现在可以使用类的生命周期方法来设置一系列事件侦听器来处理单击事件，该方法将只在场景发生时被调用一次。

现在我们已经有了所有需要的输入方法，我们需要开始为我们的游戏编写逻辑。

在这里，我们正在使用面板枚举方法来避免硬编码我们的实体ID。所有单击事件都是通过后缀发送的，因此我们也需要将其连接起来。和方法尚未定义。我们在后面将仔细研究一下这些问题。

要为按钮组件创建一个新实例，我们只需将其添加到场景的渲染方法：

它是这样的：

游戏逻辑

有四件事需要用我们的游戏逻辑来实现：

当点击开始按钮时，应该生成一个随机序列。

当一个面板被点击时，它应该被高亮显示一段时间。

当做出错误的选择时，玩家就立即输了游戏。

当序列匹配正确时，玩家获胜，难度增加。

我们可以将所有的逻辑分为四种核心方法：

: 开始一场有一定难度的新游戏。

: 为游戏生成一个新的随机序列。

: 重新生成玩家要记住的随机序列。

: 突出显示面板并验证玩家的选择。

开始游戏

让我们从开始：

生成一个颜色序列

这里我们生成一个新的序列，为一个新游戏设置基础状态，并向玩家播放新的序列。注意，在这个时间点上，玩家是不能输入的，以避免在播放序列时玩家作出意外行为。我们可以以任意难度来开始任何游戏，这允许我们在玩家获胜和升级到下一个困难时重复使用相同的方法。

生成一个新序列非常简单，依赖于访问枚举的键。我们这里运行的次数和难度级别显示的一样多，所以难度4会产生一个包含四种颜色的数组。

函数是一个应用函数，它被用于在利用异步/等待语法时避免使用超时。

向玩家显示颜色序列

播放序列依赖于在两个状态之间切换，在序列值和之间切换活动面板。我们利用一个自定义的睡眠应用函数来留出足够的时间让玩家清楚地看到哪个面板被高亮显示。

最后，如果我们在序列中迭代最后一项，我们将解锁玩家输入，所以可选项实际上是经过处理的：

我们通过返回的值来检查用户的输入是否被锁定。如果玩家选择了正确的面板，我们会在浏览器控制台中记录结果。当玩家失败时，他们必须按下开始键手动重新启动游戏。

如果玩家的选择是正确的，我们将通过切换选中面板的高亮部分来更新游戏状态。当玩家提交一个完整的序列并匹配游戏程序所生成序列时，他们就赢啦!我们所要做的就是在浏览器控制台中记录结果。

您可以通过在终端运行命令来测试所有内容。命令行面板CLI将呈现游戏并在新的浏览器窗口中自动打开。

接下来呢?

我将留给您更多的细节，如充实UI设计、添加分数跟踪和加入您想要的其他功能。我希望这是一个开放的体验，我也希望能在第二部分看到你们，我们将把这个经验带到下一个层次，将它构建成为多人游戏！

扫码加群防失联总是没错哒！