这个游戏非常简单：猜一个三位数，并且三个数字之和是三的倍数。
例如： 123 是 3 的倍数，因为 1 + 2 + 3 = 6
你有四次机会，没猜一次之后，每个数字的背景颜色都会改变，背景颜色依据数字的位置和是否真的出现在这个数字中来决定。
绿色：数字在正确的位置。 黄色：数字在结果中但是位置不对。 灰色：数字不存在结果中。
为了让构建Numble更容易，我们使用一个小型库Nanny State。这个库是Darren Jones写的，可以看这篇文章了解这个库。Nanny State讲应用所有的数据存储在一个叫State的对象中，所有对State的修改，都会重新渲染在HTML中。由于它的速度和效率以及没有新的语法，它非常简单易学。 首先，我们需要导入 Nanny State 并设置 State, View 和 Update. 要导入它，您只需将这行代码复制到程序的第一行：
import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state' 如果您想了解更多关于您正在导入的内容以及所有内容的结构如何工作的信息，请务必查看上面的链接。接下来，我们需要创建视图：
const View = state => html` <h1>Numble</h1>` 该 View 函数返回一个字符串，该字符串基本上是我们页面上将显示的 HTML。这是一个让我们开始的基本布局，一旦一切就绪，应该会出现一个“Numble”标题。State 作为一个参数，让我们可以访问存储在单个对象中的数据。 现在我们需要创建 State 对象，这是存储任何数据的地方，但现在它唯一需要的属性是 View将它们链接在一起。
现在，我们可以通过 Numble 最重要的方面之一：数字本身，让我们的游戏更加精彩。
这一步涉及到一些数学和逻辑，但是一旦你了解它，它真的不会太难。函数本身应该是这样的（我将在下面解释发生了什么）：
const generateNumber = () => (3*Math.ceil(Math.random()*299+34)).toString() 这是一个箭头函数，它返回一个三位数的三的倍数作为字符串。
具体 来看Math.ceil(Math.random()*299+34)，这会生成一个介于 1 和 299 之间的随机数，并使用 将 Math.random() 其四舍五入 Math.ceil。加上 34，然后将其乘以 3，确保该数字是 102 到 999 之间的 3 的倍数，即 3 的 3 位倍数，或“数字”。
我们的第一项工作是允许用户进行 4 次猜测。在 Wordle 中，一个 5 个字母的单词允许 6 次猜测，因此对于 Numble，我们将允许 4 次猜测一个三位数字。
为此，我们必须删除该 guess 属性并向 State 对象添加另外两个属性：
const State = { started: false, digits: Array(10).fill("grey"), guesses: Array(4).fill(Array(3).fill(null)), guessCount: 0, count: 0, start, finish, check, appear, remove, View } 正如你所看到的，我们现在有一个 guesses 属性来代替 guess 我们之前的属性。的值 guesses 是一个 2D 数组，由 4 个数组组成，每个数组的长度为 3，并用 null.
现在开始变得有点棘手，在我们开始之前，检查您是否熟悉该 Array.map() 函数可能是个好主意。与三元运算符一样，它们将成为您在这一步和下一篇文章中最好的朋友，因为 Numble 需要大量的数组映射来处理状态中的数据。
如果您的 Array.map() 技能有点生疏，或者您甚至没有听说过，请不要担心，它们很容易理解，您可以在此处阅读更多关于它们的信息。
此步骤包含三个主要部分：
创建虚拟键盘 显示用户的猜测 检查用户的猜测是否正确 尽管它们都相互依赖，但如果将所有内容分解成更小的块，则更容易理解。
首先，我们需要在 中添加我们将要使用的函数和另外三个属性 State：
const State = { started: false, digits: Array(10).fill("grey"), guess: Array(3).fill(null), count: 0, start, finish, remove, check, appear, View } 按照这个顺序处理它们， digits 现在的值是一个长度为 10 的数组，每个空格都用字符串“grey”填充。这是因为我们将使用它来跟踪游戏中每个数字应该是什么颜色，并且数组的索引将代表从 0 到 9 的每个可能的数字。
正如文章开头所述，颜色是 Wordle 的主要焦点，因此也是 Numble。如果您还没有玩过 Numble 或 Wordle ，强烈建议您这样做，以便正确理解颜色的工作方式。
这是 Numble 使用的着色系统示例：
用户猜测后，颜色会在两个位置更新：实际猜测和键盘上。两者的逻辑完全相同，因此我们可以创建一个名为的箭头函数 getColors ，将猜测和实际数字作为参数。
const getColors = (guess,number) => guess.map((digit,index) => number.includes(digit) ? digit.toString() === number[index] ? "green" : "yellow": "black") 我们映射 ‘guess’ 数组并使用 ‘String.
图片元素是一个 HTML 元素，用于根据不同的屏幕尺寸或视口来声明图像，而无需编写“CSS”媒体查询。它有两个属性，一个是使用该srcset属性来指定基于不同屏幕尺寸的不同图像的标签，以及一个在浏览器不支持图片元素时充当后备图像的强制标签。
用例 在一些用例场景中，图片标签非常有用，下面是这些场景的三个示例。
图像类型支持 图像有多种格式，如 AVIF 和 WEBP，它们有很多优点，但可能并非所有浏览器都支持。在这种情况下，图片标签非常适合使用标签提供替代格式。来源：MDN 文档
图像宽度 根据不同的屏幕尺寸决定要显示的图像。如果您想在桌面屏幕上预览大图像而在移动设备或平板电脑屏幕上预览较小的图像，这一点尤其重要。
节省带宽 图片标签可以很好地节省带宽，从而通过加载最适合查看者显示的图像来加快页面加载时间。
