掌控随机与循环：用JS打造点名器与猜数游戏哈喽大家好，我是心连欣。在之前的学习中，我们掌握了数组的遍历和对象的增删改查。

前言

哈喽大家好，我是心连欣。在之前的学习中，我们掌握了数组的遍历和对象的增删改查。今天，我们将进入一个更有趣的阶段：逻辑交互。

很多时候，编程不仅仅是存储数据，更是为了处理“不确定性”。比如：谁是今天的幸运儿？我心里想的那个数字是多少？

我们将通过两个经典案例——随机点名和猜数字游戏，来彻底搞懂 JavaScript 中的随机数生成以及循环控制逻辑。

第一部分：随机点名系统

想象一下，老师在课堂上不想手动选人回答问题，而是希望电脑随机抽取一个名字。这就是“随机点名”的核心需求。

核心思路

数据准备：我们需要一个数组，里面装满了所有同学的名字。
生成随机索引：数组是通过索引（下标）来访问的。如果我们能生成一个“随机数”，且这个随机数在数组的索引范围内，不就能随机拿到一个名字了吗？
获取并展示：利用随机索引去数组里“取值”。

代码实现

核心算法：生成一个 0 到数组长度-1 之间的随机整数 Math.random() 生成 0-1 之间的小数 Math.floor() 向下取整

<script>
    let arr = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
      //1.得到一个随机数，作为数组的索引号，这个随机数0~6
      let random = Math.floor(Math.random()* arr.length)
      document.write(arr[random])
  </script>

运行之后，每次刷新都会出现不一样的答案，实现随机点名。

深度解析

这里最关键的一行是 Math.floor(Math.random() * arr.length)。

Math.random()：产生一个 [0, 1) 之间的随机小数（包含0，不包含1）。
* arr.length：假设数组长度是 6，乘以 6 后，范围变成了 [0, 6) 的小数（比如 3.821）。
Math.floor()：把这个小数“向下取整”，变成 0, 1, 2, 3, 4, 5 中的一个整数。这正好对应数组的索引！
第二部分：猜数字游戏

如果说随机点名是“一次性的随机”，那么猜数字游戏就是“循环交互”的经典案例。我们需要程序生成一个秘密数字，然后让用户不断猜测，直到猜中为止。

需求分析

系统生成：随机生成一个 1-10 之间的整数。
用户输入：弹出一个输入框，让用户输入数字。
判断逻辑：
- 猜大了：提示“太大了”。
- 猜小了：提示“太小了”。
- 猜对了：提示“恭喜你”，并结束游戏。
循环机制：因为不知道用户几次能猜中，所以不能用 for 循环（次数固定），必须用 while 循环。

代码实战

<script>
    //1.随机生成一个数字1-10
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    let random = getRandom(1, 10)
    console.log(random);
    //需要不断循环 while不知道循环多少次
    while (true) {
      //2.用户输入一个值
      let num = +prompt('请输入一个数字： ')
      //3.判断输出
      if (num > random) {
        alert('你猜大了')
      } else if (num < random) {
        alert('你猜小了')
      } else {
        alert('猜对了')
        break  //退出循环
      }
    }
  </script>

关键技术点

1. 万能随机数公式

在点名案例中，我们用的是 0 到 长度。而在游戏中，我们需要 1 到 10。记住这个通用公式：

Math.floor(Math.random() * (最大值 - 最小值 + 1)) + 最小值

(M - N + 1)：决定了范围的跨度。
+ N：决定了范围的起始点。

2. while(true) 与 break 的配合

这是处理“死循环”的标准写法。

while(true)：创建一个永动机，代码会一直跑。
if (...) { break }：在循环内部设置一个“紧急出口”。只有当满足特定条件（猜对了）时，break 才会触发，炸毁这个永动机，程序才能继续向下执行或结束。

如果不写 break，哪怕你猜对了，弹窗提示完后，循环会立刻再次开始，让你继续猜，这就成了死循环 Bug。

3. 数据类型转换

prompt 获取到的数据永远是字符串（例如 "5"），而我们的 secretNum 是数字（例如 5）。

如果不转换，虽然 == 可以比较，但在严格开发中是不规范的。
代码中的 +prompt(...) 利用了一元加号运算符，快速将字符串转为数字，这是一个非常实用的小技巧。

总结

通过今天的两个案例，我们完成了从“静态数据”到“动态逻辑”的跨越：

随机点名：学会了利用 Math.random() 配合数组索引，实现数据的随机抽取。
猜数字：学会了利用 while(true) 配合 break 来处理次数不确定的交互场景，以及如何处理用户输入的数据类型。

接下来，你可以尝试升级一下这两个游戏：比如给猜数字游戏增加“最多只能猜 3 次”的限制，或者给点名系统增加“已经点过的人不再重复点”的功能。加油！

注：明天我就不会再更新JavaScript的内容了，大家期待一下下期内容吧！

掌控随机与循环：用JS打造点名器与猜数游戏

前言