构建猜硬币游戏 | JavaScript 项目

介绍

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

👀 预览

猜硬币游戏预览

🎯 任务

在这个项目中，你将学习：

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

🏆 成果

完成这个项目后，你将能够：

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

设置项目结构

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

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

├── 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 函数。

打开 js/findCoin.js 文件。

找到 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;
}

findNum 函数接受一个 input_values 参数，并返回在输入中找到的唯一数字（1 - 9）组成的数组。
按照以下步骤实现 findNum 函数：
- 使用正则表达式 /\d/g 在 input_values 字符串中找到所有数字。
- 创建一个空的 uniqueNumbers 数组来存储唯一数字。
- 遍历匹配到的数字，并使用 parseInt 将它们转换为整数。
- 检查解析后的数字是否为有效数字（不是 NaN）且不在 uniqueNumbers 数组中。
- 如果数字有效且唯一，则将其添加到 uniqueNumbers 数组中。
- 返回 uniqueNumbers 数组。

实现 randomCoin 函数

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

找到 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;
};

randomCoin 函数应生成一个包含 1 到 9 之间 3 个不重复随机数的数组。
按照以下步骤实现 randomCoin 函数：
- 创建一个空的 randomNumArr 数组来存储随机数。
- 使用 while 循环生成 1 到 9 之间的 3 个唯一随机数。
- 在循环内部，使用 Math.floor(Math.random() * 9) + 1 生成一个随机数。
- 检查生成的数字是否不在 randomNumArr 数组中。
- 如果数字是唯一的，则将其添加到 randomNumArr 数组中。
- 一旦 randomNumArr 数组有 3 个唯一数字，就返回该数组。

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

完成效果

总结

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