生成一个随机数

现在，我们可以通过 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 位倍数，或“数字”。

最后，整个东西被包裹在一个 .toString() 函数中，把它变成一个字符串。将数字存储为字符串可能看起来很奇怪，但这将更容易在游戏后期为每个单独的数字着色。

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

最好的方法是向状态对象添加一个名为 number. 但是，我们不需要在原始 中执行此操作 State，我们只需要在按下“开始”按钮时执行此操作，因此在 start 事件处理程序中。

这会将我们的 start 函数更改为如下所示：

const start = event => Update({
    started: true,
    number: generateNumber()
  })

新属性 number的值是我们刚刚创建的函数的返回值 generateNumber()：随机三位，三的倍数。

为了显示这个，我们需要在 中添加一行 View，特别是在 HTML 部分 when state.started is true， View 现在看起来像这样：

const View = state => html`
<h1>Numble</h1>
${state.started ?
 html`<div id="number">${state.number}</div>
 <button onclick=${state.finish}>END</button>`
:
 html`<button onclick=${state.start}>START</button>`
}`

我们在这里所做的只是添加 a