JavaScript

建立你自己的数字Wordle: Numble

奥利维亚吉布森
分享

后Wordle超过了全世界和我的推特，我和世界上其他人一样，有点着迷了。我变得如此着迷，以至于产生了制作应用程序的想法，类似但专注于数字。两周后，内脏天生就是个数字高手。

内脏＂width=

数字规则

其实很简单:猜3的三位数倍数。

你有四次猜测，每次猜测后，每个数字的颜色根据它的位置以及它是否真的在数字中而改变。

  • 绿色:数字位置正确。
  • 黄色:数字在数字中，但位置错误。
  • 灰色:数字根本不在数字中。

如果你在学校忘记了，判断一个数是否为3的倍数的规则是，如果这些数字之和是3的倍数。

例如:123是3的倍数，因为1 + 2 + 3 = 6。

< div class =＂proper-ad-unit">

保姆国家

为了使构建Numble更容易，我使用了一个名为保姆国家．它是由达伦·琼斯写的，以防你错过了他写的最近一篇文章介绍了它．它将所有应用数据存储在一个名为State的对象中，然后根据对State的任何更改自动重新渲染HTML视图。由于它的速度和效率，没有新的语法，它非常简单，易于学习。

首先，我们需要引进保姆国家并建立状态，视图而且更新．

要导入它，你只需要将这行代码复制到程序的第一行:

进口｛保姆，超文本标记语言｝从“https://cdn.skypack.dev/nanny-state”

如果您想了解更多关于导入的内容以及所有内容的结构是如何工作的，请务必查看上面的链接。接下来，我们需要创建视图:

常量视图＝状态= >超文本标记语言｀<h1>内脏h1>｀

的视图是一个返回字符串的函数，该字符串基本上是将显示在页面上的HTML。这是一个基本的布局，让我们开始，一旦一切就绪，标题“Numble”应该出现。这需要状态作为参数，使我们能够访问存储在单个对象中的数据。

现在我们需要创建State对象，这是存储任何数据的地方，但目前它需要的唯一属性是视图，把它们连在一起。

常量状态＝｛视图｝

最后，我们需要调用保姆函数。这将呈现初始视图。我们还为变量赋值更新返回值。这将允许我们稍后更新状态。

常量更新＝保姆（状态）

你的页面应该是这样的:

<我mg loading="lazy" class="alignnone size-medium wp-image-263565" src="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657086744inital-page-300x240.png" alt="初始页面＂width="300" height="240" srcset="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657086744inital-page-300x240.png 300w, https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657086744inital-page.png 601w" sizes="(max-width: 300px) 100vw, 300px">

下面是代码的整体外观:

< div class =＂cp_embed_wrapper">

现在保姆国家已经建立起来，我们可以开始制作游戏，到最后应该是一款功能齐全的“猜数字”游戏。

< div class =＂custom-content">

每个结束都有一个开始

在我们开始之前，有一些好处视图函数是它使用模板字面量，这意味着我们可以在HTML本身中添加逻辑。当您希望根据状态包含不同的视图时，这非常方便。不幸的是，一个标准如果语句将不起作用，相反，我们将需要使用三元操作符。

如果您还不熟悉，三元操作符的工作方式与If else语句相同:condition ?如果为真怎么办:如果为假怎么办。简而言之，交易如果对于一个?和其他的对于一个：．

例如，这是我前几天在推特上看到的一个很棒的例子:

常量待办事项＝amIHungry?＂＂：＂＂

这相当于:

如果（amIHungry）｛常量待办事项＝＂＂｝其他的｛常量待办事项＝＂＂｝

三元运算符即将成为你最好的朋友，所以理解它们是如何工作的是非常重要的。

开始按钮是为游戏添加结构的好方法，特别是像Numble这样的按钮，所以为了做到这一点，我们需要添加属性状态，开始．的价值开始需要假，因为我们希望用户看到的第一件事是菜单页面(目前，它将由开始按钮和标题组成)。

状态现在应该是这样的:

常量状态＝｛开始：假，开始，完成，视图｝

的视图是这里变化最大的我们可以使用第一个和主三元运算符。

注意，它包含两个名为开始而且完成．这些是我们将很快编写的事件处理程序的引用。

类中引用任何事件处理程序状态对象。

我们基本上需要两种不同的视图:一种是用户开始时的视图(换句话说，就是游戏本身)，另一种是用户还没有开始时的视图(也许是菜单页面)。我们可以使用布尔属性开始这样做。

常量视图＝状态= >超文本标记语言｀<h1>内脏h1>$ {状态．开始?超文本标记语言｀<按钮onclick＝$ {状态．完成｝>结束按钮>｀：超文本标记语言｀<按钮onclick＝$ {状态．开始｝>开始按钮>｀｝｀

正如你所看到的，标题在三元操作符上面——这意味着它在程序的两个页面上都是可见的。对于三元运算符，你可能已经能清楚地看到它在做什么，如果没有，也不用担心，这很简单。

它遵循与上面的蛋糕/饥饿示例完全相同的逻辑:它检查是否state.started是真正的．如果是，则显示一个名为“End”的按钮。如果没有，则会显示一个名为“Start”的按钮。

<我mg loading="lazy" class="alignnone size-full wp-image-263567" src="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657086789start-button.png" alt="开始按钮＂width="220" height="181">

结束按钮＂width=

按钮本身有内联事件监听器:“Start”按钮有一个调用该函数的监听器开始' End '按钮有一个调用该函数的按钮完成．显然，这些函数还不存在，这将我们引向下一个工作:创建事件处理程序。

我们会做开始第一个函数。这非常简单，因为我们所需要做的就是更新开始财产真正的．代码应该是这样的:

常量开始＝事件= >更新（｛开始：真正的｝）

这使用了更新函数，并更改状态的值开始现在是真正的．当这种情况发生时，视图将被重新渲染，作为三元操作符的结果显示' End '按钮。

你可能想试着写完成事件处理程序，因为它的工作原理几乎与开始函数，唯一的区别是什么更新函数在变化。

这就是完成函数应该如下所示:

常量完成＝事件= >更新（｛开始：假｝）

神奇的!你现在得到了世界上最无聊的游戏!

严肃地说，你现在可以尝试按下开始和结束按钮，与游戏互动，即使这不是最吸引人的体验。

同样，这里有一个代码应该是什么样的示例:

< div class =＂cp_embed_wrapper">

步骤2:生成随机数

现在我们可以利用《Numble》中最重要的元素之一——数字本身，让游戏变得更加有趣。

这一步涉及到一些数学和逻辑，但一旦你理解了它，它就不会太难。函数本身应该是这样的(我将在下面解释到底发生了什么):

常量generateNumber＝（）= >（3.＊数学．装天花板（数学．随机（）＊299+34））．toString（）

这是一个箭头函数，返回一个3位数，3的倍数作为字符串。

具体来看Math.ceil (math . random () * 299 + 34)，这将生成1到299之间的随机数使用math . random ()然后用Math.ceil．加上34，然后再乘以3，确保这个数字是102到999之间3的倍数，即3的3位数倍数，或一个“数字”。

最后，整个东西被包裹在一个.toString ()函数，将其转换为字符串。将数字存储为字符串可能看起来很奇怪，但这将使以后在游戏中更容易为每个数字着色。

我们的下一个挑战是每当用户按下“开始”键时显示一个数字。

最好的方法是向状态对象添加一个属性数量．然而，在原始版本中我们不需要这样做状态，我们只需要在按下“开始”按钮时执行此操作，因此在开始事件处理程序。

这将改变我们的开始函数看起来像这样:

常量开始＝事件= >更新（｛开始：真正的，数量：generateNumber（）｝）

新房产的价值，数量，是刚才创建的函数的返回值generateNumber ():随机的三位数字，3的倍数。

为了显示这个，我们需要添加一行到视图，特别是在when的HTML部分state.started是真正的,使视图现在是这样的:

常量视图＝状态= >超文本标记语言｀<h1>内脏h1>$ {状态．开始?超文本标记语言｀<divid＝＂数量＂>$ {状态．数量｝div><按钮onclick＝$ {状态．完成｝>结束按钮>｀：超文本标记语言｀<按钮onclick＝$ {状态．开始｝>开始按钮>｀｝｀

我们所做的就是加a< div >与一个id的“数量”，则显示state.number也就是随机生成的3位数，3的倍数。

如果你现在测试代码，每次点击“开始”按钮，你都会看到一个不同的数字，如果你把这些数字加起来，你会发现这些数字是3的倍数!

根据我的CodePen演示检查您的代码。

< div class =＂cp_embed_wrapper">

步骤3:输入和键盘

它开始变得有点棘手了，在我们开始之前，最好检查一下你是否熟悉Array.map ()函数。像三元运算符一样，它们将成为您在这一步和下一篇文章中最好的朋友，因为Numble需要在数组上进行大量映射来处理处于状态的数据。

如果你的Array.map ()技能有些生疏，或者你甚至没有听说过，不用担心，它们很容易理解，你可以阅读更多关于它们的内容在这里．

这一步主要有三个部分:

尽管它们都是相互依赖的，但如果你把所有东西都分解成小块，就更容易理解了。

首先，我们需要添加将要使用的函数和另外三个属性状态：

常量状态＝｛开始：假，数字：数组（10）．填满（“灰色”），猜一猜：数组（3.）．填满（零），数：0，开始，完成，删除，检查，出现，视图｝

按照这个顺序，的值数字现在是一个长度为10的数组，每个空格都用字符串“grey”填充。这是因为我们将使用它来跟踪每个数字在游戏中的颜色，数组的索引将表示从0到9的每个可能的数字。

的初始值猜一猜也是一个长度为3的数组，每个空格用什么填充零．

最后,数设置为0，这将用于记录玩家猜了多少位数字。

我们要映射到数字数组来创建我们的屏幕键盘，所以我们需要添加一些东西视图．不过在此之前，我们得先把< div >这显示了数量，否则就会破坏整个游戏的意义。

常量视图＝状态= >超文本标记语言｀<h1>内脏h1>$ {状态．开始?超文本标记语言｀<divid＝＂猜测＂>$ {状态．猜一猜．地图（数量= >超文本标记语言｀<div>$ {数量｝div>｀）｝div><divid＝＂键盘＂>$ {状态．数字．地图（（数字，指数）= >超文本标记语言｀<按钮onclick＝$ {出现（指数）｝>$ {指数｝按钮>｀）｝<按钮onclick＝$ {删除｝>删除按钮><按钮onclick＝$ {检查｝>输入按钮>div><按钮onclick＝$ {完成｝>结束按钮>｀：超文本标记语言｀<按钮onclick＝$ {开始｝>开始按钮>｀｝｀

代替< div >这显示了数量，我们现在有两个< div >S 1和id的“猜测”还有一个是id的“键盘”．

在“猜测”范围内< div >我们有很多第一个. map ()函数，它映射到长度为3的数组上，创建一个单独的< div >对于数组中的每个项，显示该项。这意味着在开始时，当数组中所有项的值为零，将显示三个空白区域。

下面是一个例子，它应该是什么样子(与我的CSS):

<我mg loading="lazy" class="alignnone size-medium wp-image-263571" src="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657086837numble-1-grid-300x147.png" alt="数字1网格＂width="300" height="147" srcset="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657086837numble-1-grid-300x147.png 300w, https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657086837numble-1-grid.png 553w" sizes="(max-width: 300px) 100vw, 300px">

最终，当数组中每个项的值发生变化时，所显示的内容也将被更改以匹配。

在键盘中< div >我们有三样东西:

＄｛状态．数字．地图（（数字，指数）= >超文本标记语言｀<按钮onclick＝$ {状态．出现（指数）｝>$ {指数｝按钮>｀）｝

映射长度为10的数组，为每个项创建一个按钮并显示指数每一项。换句话说，数字0到9。每个按钮还有一个内联事件监听器，用于调用事件处理程序出现并提供指数作为一个论证。但是，我们稍后将对此进行全面探讨。

然后，我们有两个按钮，一个叫“删除”，另一个叫“进入”。的y both have inline event listeners that call their respective event handlers删除而且检查．再说一次，我们一会儿会全面探讨这些问题。

首先，这是一个你的键盘的样子的例子:

<我mg loading="lazy" class="alignnone size-medium wp-image-263573" src="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657086866numble-keyboard-246x300.png" alt="内脏键盘＂width="246" height="300" srcset="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657086866numble-keyboard-246x300.png 246w, https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657086866numble-keyboard.png 529w" sizes="(max-width: 246px) 100vw, 246px">

看看出现事件处理程序，我们希望此函数显示数字玩家点击到的第一个空间猜一猜．

常量出现＝猜一猜= >事件= >｛更新（状态= >（｛猜一猜：状态．猜一猜．地图（（数字，指数）= >指数= = =状态．数?猜一猜：数字），数：状态．数+1｝））｝

首先，这个事件处理程序与我们之前创建的事件处理程序之间的唯一区别是，这个函数有一个额外的形参猜一猜．这是指数的数字作为参数提供的数组。换句话说，它是玩家点击的数字。

的更新函数看起来有点不同。这是因为它需要访问状态，因此为它提供了一个箭头函数，将旧状态映射到新状态(保姆国家称这些为“变压器函数”)。

就它实际更新的内容而言猜一猜属性映射到包含3的原始数组零S和if指数等于数(位置的猜测)，值零替换为猜一猜(这将是用户单击的按钮的编号)。如果指数不等于数时，该项的值保持不变:零．

然后增加数通过1，允许用户在第二个空格中输入他们的第二次猜测。

这是当用户点击了几个数字后，这一行的样子:

<我mg loading="lazy" class="alignnone size-medium wp-image-263575" src="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657086896numble-1-grid-filled-300x140.png" alt="数字填充网格＂width="300" height="140" srcset="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657086896numble-1-grid-filled-300x140.png 300w, https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657086896numble-1-grid-filled.png 556w" sizes="(max-width: 300px) 100vw, 300px">

的删除事件处理程序(讽刺的是)几乎相同:

常量删除＝事件= >｛更新（状态= >（｛猜一猜：状态．猜一猜．地图（（数字，指数）= >指数= = =状态．数-1?零：数字），数：状态．数-1｝））｝

下面的逻辑出现函数，你应该能算出这里发生了什么，如果不能也不用担心。它更新猜一猜通过映射原始数组，如果指数等于之前的猜测次数(即count - 1)，它将该项的值替换为零，有效地删除猜测。

这一次，它递减数通过1，允许用户继续猜测。

只是检查函数去。

' Enter '按钮的事件处理程序被调用检查，我们希望它(意外地)检查用户的猜测是否正确，但我们也希望它重置猜测，以便用户可以再次尝试。

函数是这样的:

常量检查＝事件= >｛更新（状态= >｛常量内脏＝状态．猜一猜．加入（＂＂）= = =状态．数量返回｛反馈：内脏?“内脏!”：“错了!”，猜一猜：数组（3.）．填满（零），数：0｝｝）｝

就像以前一样更新使用变压器函数并接受状态作为一个参数，让我们直接访问在状态中保存的所有应用程序数据。然后它创建一个名为内脏．也许看起来不像，但是State.guess.join ("") === state.number实际上是一个条件(检查用户的猜测是否等于我们生成的数字)，如果它满足这个条件的值内脏将真正的如果不是，那也会是假．

然后它返回状态的三个更新属性:

最后一步是放入一些HTML视图这样反馈就可以显示出来。

一个放置它的好地方是在猜测的下方和键盘上方。你们的期末考试视图应该是这样的:

常量视图＝状态= >超文本标记语言｀<h1>内脏h1>$ {状态．开始?超文本标记语言｀<divid＝＂猜测＂>$ {状态．猜一猜．地图（数量= >超文本标记语言｀<div>$ {数量｝div>｀）｝div><pid＝＂反馈＂>$ {状态．反馈｝p><divid＝＂键盘＂>$ {状态．数字．地图（（数字，指数）= >超文本标记语言｀<按钮onclick＝$ {状态．出现（指数）｝>$ {指数｝按钮>｀）｝<按钮onclick＝$ {状态．删除｝>删除按钮><按钮onclick＝$ {状态．检查｝>输入按钮>div><按钮onclick＝$ {状态．完成｝>结束按钮>｀：超文本标记语言｀<按钮onclick＝$ {状态．开始｝>开始按钮>｀｝｀

如果你愿意，你可以用反馈在游戏开始时设置一条消息，例如在开始事件处理程序反馈属性与字符串值(“猜3位数字”):

常量开始＝事件= >｛更新（｛开始：真正的，数量：generateNumber（），反馈：猜3个数字｝）｝

就是这样!你现在有一个完整的猜数字游戏!

在继续阅读第二篇文章之前，有一些关于CSS和bug的注意事项。

如果你想添加自己的CSS，这是完全可以的，但如果你只想专注于代码，你可以从最终的CodePen演示中复制我的CSS。

< div class =＂cp_embed_wrapper">

如果你是一个优秀的程序员，你可能会发现这里的一些错误，例如，如果用户在猜出三个数字之前就点击了“Enter”怎么办?如果你开始玩它，你肯定能注意到更多。

它们并不难修复，您只需要在适当的地方设置几个条件。例如，要修复检查前有三位数字的问题，在检查函数，你可以写:

常量检查＝事件= >｛更新（状态= >｛常量内脏＝状态．猜一猜．加入（＂＂）= = =状态．数量返回状态．数<3.?｛反馈：“太短”｝：｛反馈：内脏?“内脏!”：“错了!”，猜一猜：数组（3.）．填满（零），数：0｝｝）｝

这只是检查猜测的次数是否小于3，并相应地返回具有不同值的不同属性。

我们现在有一个功能齐全的“猜数字”游戏，接下来我们将使它更像完整的数字。

< div class =＂proper-ad-unit">

四个猜测

我们的第一项工作是允许用户进行4次猜测。在Wordle中，一个5个字母的单词可以猜6次，而在Numble中，一个3位数的数字可以猜4次。

为了做到这一点，我们将不得不删除猜一猜属性，并向状态对象:

常量状态＝｛开始：假，数字：数组（10）．填满（“灰色”），猜测：数组（4）．填满（数组（3.）．填满（零）），guessCount：0，数：0，开始，完成，检查，出现，删除，视图｝

如你所见，我们现在有猜测财产的地方猜一猜我们以前有过。的价值猜测是一个2d数组，由4个数组组成，每个数组的长度为3，并用零．如果你不熟悉Array.fill ()函数，它是创建数组的快捷方式，这意味着我们不必写出完整的数组。

4个嵌套数组中的每一个都表示用户将做出的4个猜测中的一个。例如，如果第一个猜测是123，那么猜测数组看起来是这样的:

[[1，2，3.]、[零，零，零]、[零，零，零]、[零，零，零]]

每当用户做出猜测时，这个数组就会更新以匹配他们的猜测，有效地记录他们在游戏中做出的所有猜测。

另外，我们有guessCount属性的值设置为0。虽然类似于数属性，它将允许我们跟踪用户所做的猜测的次数。

这张图将帮助您可视化和充分理解两者的需求数和guessCount属性:

<我mg loading="lazy" class="alignnone size-medium wp-image-263580" src="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657090178annotated-numble-grid-300x292.png" alt="带注释的数字网格＂width="300" height="292" srcset="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657090178annotated-numble-grid-300x292.png 300w, https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657090178annotated-numble-grid-1024x996.png 1024w, https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657090178annotated-numble-grid-768x747.png 768w, https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657090178annotated-numble-grid.png 1112w" sizes="(max-width: 300px) 100vw, 300px">

如你所见，guessCount是哪个嵌套数组的索引，猜测是存储在和数是每个猜测的每个数字的索引。

现在我们需要对视图功能:

常量视图＝状态= >超文本标记语言｀<h1>内脏h1>$ {状态．开始?html的<div id＝“猜测”>＄｛状态．猜测．地图（（猜一猜，我）= >超文本标记语言｀<div类＝＂行＂>$ {猜一猜．地图（（数量，j）= >超文本标记语言｀<div类＝＂灰色＂>$ {数量｝div>｀）｝div>｀）｝div><pid＝＂反馈＂>$ {状态．反馈｝p><divid＝＂键盘＂>$ {状态．数字．地图（（数字，指数）= >超文本标记语言｀<按钮onclick＝$ {状态．出现（指数）｝>$ {指数｝按钮>｀）｝<按钮onclick＝$ {状态．删除｝>删除按钮><按钮onclick＝$ {状态．检查｝>输入按钮>div><按钮onclick＝$ {状态．完成｝>结束按钮>｀：超文本标记语言｀<按钮onclick＝$ {状态．开始｝>开始按钮>｀｝｀

这和视图我们在前面创建了div，但是id为“guess”的div已经改变了。事实上，我们现在使用2d数组像网格一样显示4个猜测，我们将需要一个嵌套的映射。

编码技巧:当使用嵌套映射时，为我们将使用的每个映射的索引我对于第一张地图和j对于第二种。你可以使用任何你认为对你来说最简单的东西，只要它们不一样!

第一个映射循环遍历每个猜想作为网格的一行。第二个映射然后循环遍历猜出的每个数字，并显示相关的HTML以显示猜出的数字或空圆圈。这样，你的屏幕应该是这样的:

<我mg loading="lazy" class="alignnone size-medium wp-image-263582" src="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657090208numble-grid-238x300.png" alt="内脏网格＂width="238" height="300" srcset="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657090208numble-grid-238x300.png 238w, https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657090208numble-grid.png 586w" sizes="(max-width: 238px) 100vw, 238px">

这种新的布局意味着我们还必须改变出现而且删除功能。这是相对简单的，但同样需要一个双重地图。

常量出现＝猜一猜= >事件= >｛更新（状态= >（｛猜测：状态．猜测．地图（（数组，我）= >我= = =状态．guessCount?数组．地图（（数字，j）= >j= = =状态．数?猜一猜：数字）：数组），数：状态．数+1｝））｝

我们正在更新猜测这是两个不同的地方数属性会变得非常有用。

第一个映射检查要更改的行:如果数组的索引与用户的猜测相匹配，则可以出现第二个映射，否则保持值不变。

第二个映射执行与出现我们在第二篇文章中创建的。

就像以前一样删除函数的工作原理几乎相同。

常量删除＝事件= >｛更新（状态= >（｛猜测：状态．猜测．地图（（数组，我）= >我= = =状态．guessCount?数组．地图（（数字，j）= >j= = =状态．数-1?零：数字）：数组），数：状态．数-1｝））｝

这里的第一个映射也只是识别用户正在进行的猜测，第二个映射遵循与原始逻辑相同的逻辑删除函数。

的数但是，属性递减，以确保用户可以重新进行猜测。

最后，我们需要对检查函数。这个函数在用户每次提交猜测时运行。

常量检查＝事件= >｛更新（状态= >｛常量内脏＝状态．猜测［状态．guessCount］．加入（＂＂）= = =状态．数量返回｛反馈：内脏?“内脏!”：状态．guessCount<3.?“继续……”：｀不!这是$ {状态．数量｝｀，guessCount：状态．guessCount+1，数：0｝｝）｝

这里只改变了两个东西，而且都在返回的对象中。的反馈属性添加了一些逻辑，使应用程序更加动态。反馈现在会显示一条消息，让用户知道他们的进展如何。

在这种情况下，我们有:if内脏是真正的换句话说，如果用户的猜测是正确的，反馈变成“NUMBLE”;如果内脏是假，检查猜测是否小于3(这本质上是检查用户是否做出了最终猜测)。如果是，反馈就是“继续”，否则就是“不行!这是(答案)。

这就是第一部分!您可以在下面的CodePen演示中看到完整的代码。

颜色的逻辑

正如本文开头所述，颜色是Wordle和Numble的主要焦点。如果你还没玩过的话内脏或Wordle强烈建议你这样做，以便正确理解颜色的工作方式。

这是Numble使用的着色系统的例子:

<我mg loading="lazy" class="alignnone size-medium wp-image-263584" src="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657090240numble-colours-exampls-300x162.png" alt="Numble Color示例＂width="300" height="162" srcset="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657090240numble-colours-exampls-300x162.png 300w, https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657090240numble-colours-exampls.png 519w" sizes="(max-width: 300px) 100vw, 300px">

在用户做出猜测后，颜色会在两个地方更新:实际猜测和键盘上。两者的逻辑完全相同，因此我们可以创建一个名为色鬼它以猜测和实际数字作为参数。

常量色鬼＝（猜一猜，数量）= >猜一猜．地图（（数字，指数）= >数量．包括（数字）?数字．toString（）= = =数量［指数］?“绿色”：“黄色”：“黑色”）

我们映射' guess '数组，并使用' String.includes(item) '方法，首先检查答案是否包含猜测的数字。如果是，那么我们检查数字是否在正确的位置。如果是，颜色被赋值为“绿色”。如果不是，颜色是“黄色”。否则，该数字根本不在答案中，因此颜色为“黑色”。

这个箭头函数应该返回一个包含“绿色”、“黄色”或“黑色”三个元素的数组，对应于“猜测”中的每个数字。

例如，如果我们调用函数using色鬼((1、2、3),“327”)那么我们应该返回的数组是["黑"，"绿"，"黄"]

您可能注意到我们必须将数字更改为字符串。这是因为我们需要将它与存储为字符串的答案进行比较，如果两个元素的类型不同，则不能进行比较。你可以尝试一下，但要准备好面对JavaScript类型强制转换的痛苦。

注意:Wordle以不同的方式处理副本，所以如果您想让这个更难一点，您可以尝试模仿Wordle的方法。

对于接下来的部分，我们不需要做任何改变或添加任何东西状态，但视图确实变得更复杂了。正如第一篇文章中简要提到的，我们将使用CSS类来更改颜色。

常量视图＝状态= >超文本标记语言｀<h1>内脏h1>$ {状态．开始?html的<div id＝“猜测”>＄｛状态．猜测．地图（（猜一猜，我）= >超文本标记语言｀<div类＝＂行＂>$ {猜一猜．地图（（数量，j）= >超文本标记语言｀< div class =$ {状态．guessCount>我?色鬼（猜一猜，状态．数量）［j］：“灰色”｝" >$ {数量｝div>｀）｝div>｀）｝div><pid＝＂反馈＂>$ {状态．反馈｝p><divid＝＂键盘＂>$ {状态．数字．地图（（数字，指数）= >超文本标记语言｀<按钮类＝$ {数字｝onclick＝$ {状态．出现（指数）｝>$ {指数｝按钮>｀）｝<按钮onclick＝$ {状态．删除｝>删除按钮><按钮onclick＝$ {状态．检查｝>输入按钮>div><按钮onclick＝$ {状态．完成｝>结束按钮>｀：超文本标记语言｀<按钮onclick＝$ {状态．开始｝>开始按钮>｀｝｀

如您所见，只有两件事发生了变化:键盘按钮的CSS类和每行的各个部分。

从“猜测”div开始，我们有以下逻辑:

状态．guessCount>我?色鬼（猜一猜，状态．数量）［j］：“灰色”

首先，它检查ifguessCount高于索引，这是为了确保每次重新呈现页面时，之前的任何猜测都被重新着色。如果需要一种颜色，我们称之为色鬼函数以用户的猜测和答案为参数，并在每个数字的下标处取项，j．

以下是在用户猜了一次之后，你的屏幕应该是这样的:

<我mg loading="lazy" class="alignnone size-medium wp-image-263586" src="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657090263first-guess-221x300.png" alt="第一个猜测＂width="221" height="300" srcset="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657090263first-guess-221x300.png 221w, https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657090263first-guess.png 585w" sizes="(max-width: 221px) 100vw, 221px">

的数组。色鬼函数是:

［“黄色”，“黑色”，“黑色”］

因此，用户现在将知道3在数字中，但在错误的位置，而4和5根本不在数字中。

键盘逻辑要简单得多，但它仍然使用相同的方法色鬼我们之前写过的函数。记得之前我们是怎么填数字用“灰色”排列?这就是我们这么做的原因。

类中键的下标处的值数字数组中。稍后我们将运行如何改变颜色，但使用上面的例子后，第一次猜测数字数组应该是这样的:

［“灰色”，“灰色”，“灰色”，“黄色”，“黑色”，“黑色”，“灰色”，“灰色”，“灰色”，“灰色”］

我们就快到了!我们最后的任务是改变检查函数。

常量检查＝事件= >｛更新（状态= >｛常量猜一猜＝状态．猜测［状态．guessCount］常量内脏＝猜一猜．加入｀｀= = =状态．数量常量颜色＝色鬼（猜一猜，状态．数量）返回｛反馈：内脏?“内脏!”：状态．guessCount<3.?“继续……”：｀不!这是$ {状态．数量｝｀，数字：状态．数字．地图（（颜色，数字）= >猜一猜．包括（数字）?颜色［猜一猜．indexOf（数字）］：颜色），guessCount：状态．guessCount+1，数：0｝｝）｝

在更新函数，还有两个常数。这使得返回对象中的逻辑更容易。

我们有猜一猜哪个是用户刚刚猜到的三个数字的数组(因此使用state.guessCount)．我们还有内脏从以前，但这次使用猜一猜我们刚刚创建的常数。这有助于代码更清晰，避免重复。最后，我们有颜色返回的数组是哪个色鬼函数是使用用户当前的猜测和答案运行的。

这将更新数字数组，并确保键盘上的数字在每次猜测后得到正确的颜色。

现在，返回对象和上面那个是一样的但是我们也在更新数字财产。

状态．数字．地图（（颜色，数字）= >猜一猜．包括（数字）?颜色［猜一猜．indexOf（数字）］：颜色）

这是我们最终的映射函数!它本质上检查键盘上的数字(也就是数字)在猜测中。如果是当前颜色则应替换为生成的颜色色鬼功能，否则颜色应保持不变。

使用与上面相同的猜测，我们可以看到键盘应该是什么样子:

<我mg loading="lazy" class="alignnone size-medium wp-image-263588" src="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657090293first-guess-keyboard-246x300.png" alt="第一猜键盘＂width="246" height="300" srcset="https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657090293first-guess-keyboard-246x300.png 246w, https://uploads.sitepoint.com/wp-content/uploads/2022/07/1657090293first-guess-keyboard.png 537w" sizes="(max-width: 246px) 100vw, 246px">

就是这样!一个功能齐全的Numble!

同样，下面是代码的完整外观:

< div class =＂cp_embed_wrapper">

在《Numble》的实际版本中，我添加了许多功能，只是为了让游戏更加动态。如果你想挑战自己，添加一些额外的功能，下面是我的最终版本Numble的一些建议:

我真的希望你在制作Numble时能和我一样开心!