通过编写猜数字游戏学习 JavaScript

通过用一个简单的游戏练习一些基本的 JavaScript 概念，迈出创建交互式、动态 Web 内容的第一步。

Javascript code close-up with neon graphic overlay

图片来源

Jen Wike Huger 拍摄的照片

可以肯定地说，如果没有 JavaScript，现代网络的大部分将不复存在。它是三种标准 Web 技术（连同 HTML 和 CSS）之一，允许任何人创建我们在万维网体验中所期望的大部分交互式、动态内容。从像 React 这样的框架到像 D3 这样的数据可视化库，很难想象没有它的网络。

有很多东西需要学习，开始学习这门流行的语言的一个好方法是编写一个简单的应用程序，以熟悉一些概念。最近，一些 Opensource.com 的记者写了关于如何通过编写一个简单的猜数字游戏来学习他们喜欢的语言，所以这是一个很好的起点！

开始

JavaScript 有很多种风格，但我将从基本版本开始，通常称为“Vanilla JavaScript”。 JavaScript 主要是一种客户端脚本语言，因此它可以在任何标准浏览器中运行，而无需安装任何东西。您所需要的只是一个代码编辑器（Brackets 是一个很棒的选择）和您选择的网络浏览器。

HTML 用户界面

JavaScript 在 Web 浏览器中运行，并与其他的标准 Web 技术 HTML 和 CSS 交互。为了创建这个游戏，您将首先使用 HTML（超文本标记语言）来创建一个简单的界面，供您的玩家使用。如果您不熟悉，HTML 是一种标记语言，用于为 Web 上的内容提供结构。

首先，为您的代码创建一个 HTML 文件。该文件应具有 .html 扩展名，以让浏览器知道它是一个 HTML 文档。您可以将您的文件命名为 guessingGame.html。

在此文件中使用一些基本的 HTML 标签来显示游戏的标题、游戏玩法说明、供玩家输入和提交猜测的交互元素，以及为玩家提供反馈的占位符。

<!DOCTYPE>
  <html>
    <head>
      <meta charset="UTF-8" />
      <title> JavaScript Guessing Game </title>
    </head>
    <body>
      <h1>Guess the Number!</h1>
      <p>I am thinking of a number between 1 and 100. Can you guess what it is?</p>
   
      <label for="guess">My Guess</label>
      <input type="number" id="guess">
      <input type="submit" id="submitGuess" value="Check My Guess">
   
      <p id="feedback"></p>
    </body>
  </html>

<h1> 和 <p> 元素让浏览器知道在页面上显示什么类型的文本。 <h1> 标签组表示这两个标签之间的文本 (猜数字！) 是一个标题。随后的 <p> 标签组表示带有说明的短文本块是一个段落。此代码块末尾的空 <p> 标签组用作游戏根据玩家的猜测向玩家提供反馈的占位符。

<script> 标签

有很多方法可以在网页中包含 JavaScript，但对于像这样的简短脚本，您可以使用一组 <script> 标签，并将 JavaScript 直接写入 HTML 文件中。这些 <script> 标签应该位于 HTML 文件末尾附近的闭合 </body> 标签之前。

现在，您可以开始在这两个 script 标签之间编写您的 JavaScript。最终文件如下所示

<!DOCTYPE>
<html>

<head>
  <meta charset="UTF-8" />
  <title> JavaScript Guessing Game </title>
</head>

<body>
  <h1>Guess the Number!</h1>
  <p>I am thinking of a number between 1 and 100. Can you guess what it is?</p>

  <form>
    <label for="guess">My Guess</label>
    <input type="number" id="guess">
    <input type="submit" id="submitGuess" value="Check My Guess">
  </form>

  <p id="feedback"></p>

  <script>
    const randomNumber = Math.floor(Math.random() * 100) + 1
    console.log('Random Number', randomNumber)

    function checkGuess() {
      let myGuess = guess.value
      if (myGuess === randomNumber) {
        feedback.textContent = "You got it right!"
      } else if (myGuess > randomNumber) {
        feedback.textContent = "Your guess was " + myGuess + ". That's too high. Try Again!"
      } else if (myGuess < randomNumber) {
        feedback.textContent = "Your guess was " + myGuess + ". That's too low. Try Again!"
      }
    }
    submitGuess.addEventListener('click', checkGuess)
  </script>

</body>

</html>

要在浏览器中运行此程序，您可以双击该文件，或者转到您喜欢的 Web 浏览器中的菜单，然后选择**文件 > 打开文件**。（如果您使用的是 Brackets，您也可以使用角落中的闪电符号在浏览器中打开该文件）。

伪随机数生成

猜数字游戏的第一步是生成一个供玩家猜测的数字。 JavaScript 包括几个内置的全局对象，可以帮助您编写代码。要生成您的随机数，请使用 Math 对象。

Math 具有用于处理 JavaScript 中的数学概念的属性和函数。您将使用两个 Math 函数来生成供您的玩家猜测的随机数。

首先使用 Math.random()，它生成一个介于 0 和 1 之间的伪随机数。（Math.random 包含 0 但不包含 1。这意味着该函数可以生成一个零，但永远不会生成 1。）

对于这个游戏，将随机数设置为介于 1 和 100 之间，以缩小玩家的选择范围。取您刚刚生成的十进制数并将其乘以 100，以生成一个介于 0 和...不是很接近 100 之间的十进制数。但是您将在接下来的几个步骤中解决这个问题。

现在，您的数字仍然是一个十进制数，您希望它是一个整数。为此，您可以使用 Math 对象的另一个函数 Math.floor()。 Math.floor() 的目的是返回小于或等于您作为参数给它的数字的最大整数——这意味着它会向下舍入到最接近的整数。

Math.floor(Math.random() * 100)

这会给您留下一个介于 0 和 99 之间的整数，这与您想要的范围不太一样。您可以使用最后一步来解决这个问题，即在结果中加 1。瞧！现在您有一个（有点）随机生成的介于 1 和 100 之间的数字。

Math.floor(Math.random() * 100) + 1

变量

现在您需要存储随机生成的数字，以便您可以将其与玩家的猜测进行比较。为此，您可以将其分配给一个**变量**。

JavaScript 有不同类型的变量供您选择，具体取决于您要如何使用该变量。对于这个游戏，使用 const 和 let。

如果变量的值可以在整个代码中更改，则使用**let**。
如果变量的值不应该更改，则使用 **const**。

关于 const 和 let 还有很多内容，但这只是您现在需要知道的。

随机数在游戏中只生成一次，因此您将使用 const 变量来保存该值。您希望给变量一个名称，使其清楚地说明正在存储什么值，因此将其命名为 randomNumber。

const randomNumber

关于命名的说明：JavaScript 中的变量和函数名称以驼峰式命名。如果只有一个单词，则全部以小写字母书写。如果有多个单词，则第一个单词全部以小写字母书写，任何其他单词都以大写字母开头，单词之间没有空格。

记录到控制台

通常，您不希望向任何人显示随机数，但开发人员可能想知道生成的数字，并使用它来帮助调试代码。使用 JavaScript，您可以使用另一个内置函数 console.log()，将数字输出到浏览器中的控制台。

大多数浏览器都包含开发者工具，您可以通过按键盘上的 **F12** 键来打开。从那里，您应该看到一个标记为**控制台**的选项卡。记录到控制台的任何信息都将出现在此处。由于您到目前为止编写的代码将在浏览器加载后立即运行，因此如果您查看控制台，您应该会看到您刚刚生成的随机数！太棒了！

函数

接下来，您需要一种方法从数字输入字段中获取玩家的猜测，将其与您刚刚生成的随机数进行比较，并向玩家提供反馈，让他们知道他们是否猜对了。为此，编写一个函数。 **函数**是分组以执行任务的代码。函数是可重用的，这意味着如果您需要多次运行相同的代码，您可以调用该函数，而无需重写执行该任务所需的所有步骤。

根据您使用的 JavaScript 版本，有很多不同的方法来编写或声明函数。由于这是对该语言的介绍，请使用基本函数语法声明您的函数。

首先使用关键字 function，然后给函数命名。最好使用一个动作名称，该名称描述函数的作用。在这种情况下，您正在检查玩家的猜测，因此此函数的合适名称是 checkGuess。在函数名称之后，编写一组圆括号，然后编写一组花括号。您将在这些花括号之间编写函数的主体。

function checkGuess() {}

访问 DOM

JavaScript 的目的之一是与网页上的 HTML 交互。它通过文档对象模型 (DOM) 来实现这一点，DOM 是 JavaScript 用于访问和更改网页上的信息的对象。现在，你需要从你在 HTML 中设置的数字输入字段中获取玩家的猜测。你可以使用你分配给 HTML 元素的 id 属性来做到这一点，在本例中是 guess。

<input type="number" id="guess">

JavaScript 可以通过访问数字输入字段的值来获取玩家输入其中的数字。你可以通过引用元素的 id 并添加 .value 到末尾来做到这一点。这次，使用 let 变量来保存用户猜测的值。

let myGuess = guess.value

玩家输入到数字输入字段中的任何数字都将被分配给 checkGuess 函数中的 myGuess 变量。

条件语句

下一步是将玩家的猜测与游戏生成的随机数进行比较。你还希望向玩家提供反馈，让他们知道他们的猜测是太高、太低还是正确。

你可以使用一系列条件语句来决定玩家将收到什么反馈。**条件语句** 在运行代码块之前检查是否满足条件。如果条件未满足，代码将停止，移动到检查下一个条件，或继续执行代码的其余部分，而不运行条件块中的代码。

if (myGuess === randomNumber){
  feedback.textContent = "You got it right!"
}
else if(myGuess > randomNumber) {
  feedback.textContent = "Your guess was " + myGuess + ". That's too high. Try Again!"
}
else if(myGuess < randomNumber) {
  feedback.textContent = "Your guess was " + myGuess + ". That's too low. Try Again!"
}

第一个条件块使用比较运算符 === 将玩家的猜测与游戏生成的随机数进行比较。比较运算符检查右边的值，将其与左边的值进行比较，如果它们匹配则返回布尔值 true，如果不匹配则返回 false。

如果数字匹配（太棒了！），请确保玩家知道。为此，通过将文本添加到具有 id 属性 "feedback" 的 <p> 标签来操作 DOM。这就像上面的 guess.value 一样，除了不是从 DOM 获取信息，而是更改其中的信息。<p> 元素没有像 <input> 元素那样的值，它们只有文本，因此使用 .textContent 来访问该元素并设置你要显示的文本。

feedback.textContent = "You got it right!"

当然，玩家很可能没有第一次就猜对，因此如果 myGuess 和 randomNumber 不匹配，请给玩家一个线索来帮助他们缩小猜测范围。如果第一个条件失败，代码将跳过该 if 语句中的代码块，并检查下一个条件是否为真。这就引出了你的 else if 块。

else if(myGuess > randomNumber) {
  feedback.textContent = "Your guess was " + myGuess + ". That's too high. Try Again!"
}

如果你将此读作一个句子，它可能是这样的：“如果玩家的猜测等于随机数，请让他们知道他们猜对了。否则 (else)，检查玩家的猜测是否大于 randomNumber，如果是，则显示玩家的猜测并告诉他们太高了。”

最后一种可能性是玩家的猜测低于随机数。要检查这一点，请再添加一个 else if 块。

else if(myGuess < randomNumber) {
  feedback.textContent = "Your guess was " + myGuess + ". That's too low. Try Again!"
}

用户事件和事件监听器

如果你查看你的脚本，你会发现某些代码在页面加载时自动运行，但有些代码不会。你希望在游戏开始前生成随机数，但你不希望在玩家将其输入到数字输入字段并准备好检查之前检查玩家的猜测。

用于生成随机数并将其记录到控制台的代码位于函数之外，因此它将在浏览器加载你的脚本时自动运行。但是，要运行函数内部的代码，你必须调用它。

有几种调用函数的方法。在这里，你希望在玩家单击“Check My Guess”按钮时运行该函数。单击按钮会创建一个用户事件，然后 JavaScript 代码可以“监听”该事件，以便它知道何时需要运行函数。

最后一行代码向按钮添加了一个事件监听器，以“监听”按钮何时被单击。当它“听到”该事件时，它将运行分配给事件监听器的函数。

submitGuess.addEventListener('click', checkGuess)

就像你访问 DOM 元素的其他实例一样，你可以使用按钮的 id 来告诉 JavaScript 与哪个元素交互。然后你可以使用内置的 addEventListener 函数来告诉 JavaScript 要监听什么事件。

你已经看到了一个带有参数的函数，但花点时间看看它是如何工作的。参数是函数执行其任务所需的信息。并非所有函数都需要参数，但 addEventListener 函数需要两个。它接受的第一个参数是它将监听的用户事件的名称。用户可以通过多种方式与 DOM 交互，例如打字、移动鼠标、用键盘制表符或复制和粘贴文本。在这种情况下，你要监听的用户事件是按钮单击，因此第一个参数将是 click。

addEventListener 需要的第二条信息是单击按钮时要运行的函数的名称。在这种情况下，它是 checkGuess 函数。

现在，当玩家按下“Check My Guess”按钮时，checkGuess 函数将获取他们在数字输入字段中输入的值，将其与随机数进行比较，并在浏览器中显示反馈，让玩家知道他们做得怎么样。太棒了！你的游戏已准备好玩了。