构建猜硬币游戏

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个项目中,你将学习如何构建一个简单的「猜硬币」游戏。游戏会从九个杯子中随机选择三个杯子放入硬币,玩家需要通过输入相应的数字来猜出正确的杯子。

👀 预览

猜硬币游戏预览

🎯 任务

在这个项目中,你将学习:

  • 实现 findNum 函数,从用户输入中提取唯一的数字。
  • 实现 randomCoin 函数,生成三个 1 到 9 之间不重复的随机数。
  • 了解项目的目录结构和提供的文件。

🏆 成果

完成这个项目后,你将能够:

  • 使用 JavaScript 函数和数组。
  • 使用正则表达式从字符串中提取特定数据。
  • 生成随机数并确保其唯一性。
  • 按照分步说明完成一个项目。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/loops("`Loops`") javascript/BasicConceptsGroup -.-> javascript/str_manip("`String Manipulation`") javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("`DOM Traversal`") subgraph Lab Skills javascript/arith_ops -.-> lab-299865{{"`构建猜硬币游戏`"}} javascript/loops -.-> lab-299865{{"`构建猜硬币游戏`"}} javascript/str_manip -.-> lab-299865{{"`构建猜硬币游戏`"}} javascript/array_methods -.-> lab-299865{{"`构建猜硬币游戏`"}} javascript/dom_select -.-> lab-299865{{"`构建猜硬币游戏`"}} javascript/dom_manip -.-> lab-299865{{"`构建猜硬币游戏`"}} javascript/dom_traverse -.-> lab-299865{{"`构建猜硬币游戏`"}} end

设置项目结构

在这一步中,你将设置项目文件和结构。按照以下步骤完成此步骤:

打开项目文件夹。目录结构如下:

├── css
├── images
├── index.html
└── js
    ├── findCoin.js
    └── index.js

其中:

  • css 是样式文件的文件夹。
  • images 是图像文件的文件夹。
  • index.html 是主页。
  • js/index.js 是用于渲染硬币并为其添加动画效果的 JavaScript 文件。
  • js/findCoin.js 是需要完成的 JavaScript 文件。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来,在虚拟机顶部打开 “Web 8080” 并手动刷新,你将看到页面。

实现 findNum 函数

在这一步中,你将在 js/findCoin.js 文件中实现 findNum 函数。

  1. 打开 js/findCoin.js 文件。

  2. 找到 findNum 函数:

    // 组成一个包含输入值 1 - 9 的数组
    function findNum(input_values) {
      // TODO
      const reg = /\d/g;
      const uniqueNumbers = [];
      const nums = input_values.match(reg) || [];
      nums.forEach((num) => {
        const parsedNum = parseInt(num);
        if (!isNaN(parsedNum) && !uniqueNumbers.includes(parsedNum)) {
          uniqueNumbers.push(parsedNum);
        }
      });
      return uniqueNumbers;
    }
  3. findNum 函数接受一个 input_values 参数,并返回在输入中找到的唯一数字(1 - 9)组成的数组。

  4. 按照以下步骤实现 findNum 函数:

    • 使用正则表达式 /\d/ginput_values 字符串中找到所有数字。
    • 创建一个空的 uniqueNumbers 数组来存储唯一数字。
    • 遍历匹配到的数字,并使用 parseInt 将它们转换为整数。
    • 检查解析后的数字是否为有效数字(不是 NaN)且不在 uniqueNumbers 数组中。
    • 如果数字有效且唯一,则将其添加到 uniqueNumbers 数组中。
    • 返回 uniqueNumbers 数组。

实现 randomCoin 函数

在这一步中,你将在 js/findCoin.js 文件中实现 randomCoin 函数。

  1. 找到 randomCoin 函数:

    let randomCoin = () => {
      let randomNumArr = [];
      // TODO
      while (randomNumArr.length < 3) {
        const randomNumber = Math.floor(Math.random() * 9) + 1;
        if (!randomNumArr.includes(randomNumber)) {
          randomNumArr.push(randomNumber);
        }
      }
      return randomNumArr;
    };
  2. randomCoin 函数应生成一个包含 1 到 9 之间 3 个不重复随机数的数组。

  3. 按照以下步骤实现 randomCoin 函数:

    • 创建一个空的 randomNumArr 数组来存储随机数。
    • 使用 while 循环生成 1 到 9 之间的 3 个唯一随机数。
    • 在循环内部,使用 Math.floor(Math.random() * 9) + 1 生成一个随机数。
    • 检查生成的数字是否不在 randomNumArr 数组中。
    • 如果数字是唯一的,则将其添加到 randomNumArr 数组中。
    • 一旦 randomNumArr 数组有 3 个唯一数字,就返回该数组。

完成这些步骤后,「猜硬币」游戏应该就可以完全正常运行了。所有函数完成后的动图如下:

完成效果
✨ 查看解决方案并练习

总结

恭喜你!你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程