利用【JavaScript】实现简单的【猜数字】游戏

阅读建议

1.环境配置：

（1）硬件：PC端

（2）软件：文本文档（.txt）和浏览器

注： Windows 系统建议使用 Visual Studio Code 进行编译。

2.基本素养：

（1）基础语法：了解基本的JavaScript语法，包括变量、数据类型、条件语句（if/else）、循环（for/while）等。

（2）函数：你可能需要定义一些函数来处理游戏逻辑，比如生成随机数，检查玩家的猜测是否正确等。

（3）随机数生成：在猜数字游戏中，你需要生成一个随机的数字供玩家猜测。可以使用Math.random()来生成一个0-1之间的随机数，然后通过乘以某个数并加上另一个数来调整范围。

1 实现方式

首先，我们需要探讨如何具体实现猜数字游戏。这个游戏的呈现方式对我们来说至关重要，因为它决定了玩家与游戏的交互体验。

关于这个问题，我考虑了两种主要的实现方式。第一种是在网页页面上直接进行游戏；第二种方式是利用网页弹窗来实现游戏。

经过权衡，我最终选择了利用网页弹窗来实现这个游戏。这样做的好处是更加的简单直接。

2 基本框架

在确定了实现方式后，接下来我们需要为游戏的基本框架进行深入的考虑。这涉及到游戏的核心代码是如何构成的，以及如何确保游戏的正常运行和玩家的良好体验。

猜数字游戏的核心在于“ 猜 ”。因此，生成一个随机的数字供玩家猜测是至关重要的。为了实现这一功能，我们可以使用JavaScript的Math.random()函数来生成一个0到1之间的随机数。然后，通过乘以适当的数值并加上一个固定的数，我们可以调整随机数的范围，以满足游戏的需求。

一旦我们准备好了随机数，下一步就是让玩家进行猜测。由于玩家可能需要进行多次猜测，因此我们需要使用循环语句，如for循环或while循环，来控制玩家的猜测次数。在循环过程中，我们需要与玩家输入的内容进行比较，这就需要使用条件语句，如if-else语句，来处理不同的猜测情况。

为了使代码结构更加严谨，我们可以使用函数来处理游戏逻辑。这样可以将相关的代码块封装在一起，使代码更加清晰和易于维护。例如，我们可以创建一个函数来生成随机数，另一个函数来比较玩家的猜测和随机数，以及一个主函数来控制游戏的流程和逻辑。

通过这种方式，我们可以构建一个简单而有趣的猜数字游戏。玩家可以在游戏中不断地猜测随机生成的数字，并根据游戏的规则来判断猜测的正确与否。同时，我们也可以根据需要对游戏进行扩展和改进，以增加更多的功能和挑战性。

3 实现过程

在使用弹窗方式实现猜数字游戏时，需要考虑玩家在猜错后的操作方式。两种方式的主要区别在于玩家是否需要点击确定按钮来进行下一次输入。

第一种方式是在玩家猜错之后，需要点击确定按钮才能进行下一次输入。这种方式下，玩家在每次猜测后都需要进行一次点击操作，可能会增加玩家的操作负担，但可以实现较为明确的反馈，让玩家清楚自己的猜测是否正确。

第二种方式是告诉玩家输入错误后可以直接进行输入，而不需要点击确定按钮。这种方式可以减少玩家的操作步骤，提高游戏的便捷性，但需要设计适当的反馈机制来告诉玩家猜测是否正确，比如通过不同的颜色或者文字提示来区分猜测的正确和错误。

根据游戏的需求和玩家的习惯，可以选择适合的方式来设计游戏的操作流程，以确保玩家能够轻松愉快地进行游戏。

3.1 需要确认

3.1.1 函数定义

function getRandom(min, max) {  
    return Math.floor(Math.random() * (max - min + 1) + min);  
}

这个名为 getRandom 的函数，用于生成一个在 min 和 max 之间的随机整数。它使用了Math.random() 来生成一个0到1之间的随机数，然后乘以 (max – min + 1) 使其范围在 min 和 max 之间，最后加上 min 以确保结果在正确的范围内。

3.1.2 随机数的生成

var random = getRandom(1, 10);

调用了 getRandom 函数，生成了一个1到10之间的随机整数，并将其存储在变量 random 中。

3.1.3 循环结构

while (true) { // 死循环，利用第13行的break来跳出循环  
    ...  
}

这里使用了无限循环（死循环）来持续地提示用户进行猜测，直到猜对为止。由于循环条件是true，所以这个循环会一直执行，除非在循环内部使用break语句来跳出。

3.1.4 提示用户输入

var num = prompt('猜数字，范围在1~10之间。');

使用prompt函数来提示用户输入一个数字。用户输入的数字会被存储在变量num中。

3.1.5 比较和判断

如果用户猜的数字大于随机数，显示“你猜大了”。
如果用户猜的数字小于随机数，显示“你猜小了”。
如果用户猜的数字等于随机数，显示“恭喜你，猜对了”，并使用break语句跳出循环。

3.1.6 提示和跳出

代码使用了alert函数来显示消息给用户。当用户猜对数字时，程序会通过弹出提示框告知用户并结束游戏。要结束这个死循环，需要用户手动点击确认按钮或关闭提示框。如果你希望自动跳出循环并结束游戏，可以在猜对时使用break语句。

3.1.7 完整代码




  
  Document



  
    
    function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
      }
      var random = getRandom(1, 10);
      while (true) {	// 死循环，利用第13行的break来跳出循环
        var num = prompt('猜数字，范围在1~10之间。');
        if (num > random) {
          alert('你猜大了');
        } else if (num < random) {
          alert('你猜小了')
        } else { 
          alert('恭喜你，猜对了');
          break;
        }
      }

3.2 无需确认

3.2.1 生成随机数

var n = Math.floor(Math.random() * (103 - 8) + 8);  //随机数 8~103  
console.log(n);

这里首先使用 Math.random()生成一个0到1之间的随机数。然后，乘以(103 – 8)得到一个8到102之间的随机数。最后，加上8，确保随机数的范围在8到103之间。使用 Math.floor()函数对结果进行取整，确保随机数为整数。生成的随机数存储在变量n中，并通过 console.log(n);输出到控制台。

3.2.2 获取用户输入

var x = prompt('请输入一个 8~103 的数：');

使用prompt()函数提示用户输入一个数字，并将输入的数字存储在变量x中。

3.2.3 循环判断

while (1) {  
  if (x > n) {  
    x = prompt('有点大了！');  
  } else if (x < n) {  
    x = prompt('小了呢~');  
  } else {  
    alert('猜对了！！');  
    break;  
  }  
}

这是一个无限循环（while(1)），它将持续运行，直到用户猜对数字或者通过某种方式跳出循环。

if (x > n)：如果用户输入的数字大于随机数n，提示用户“有点大了！”。
else if (x < n)：如果用户输入的数字小于随机数n，提示用户“小了呢~”。
else：如果用户输入的数字与随机数n相等，弹出提示“猜对了！！”，并使用break语句跳出循环。

3.2.4 结束

当用户猜对数字后，游戏结束。如果用户没有猜对，他们可以继续尝试，直到猜对为止。

3.2.5 完整代码




  
  Document



  

    //数学对象Math
    var n = Math.floor(Math.random() * (103 - 8) + 8);  //随机数 8~103
    console.log(n);

    //循环判断
    var x = prompt('请输入一个 8~103 的数：');
    while (1) {
      if (x > n) {
        x = prompt('有点大了！');
      } else if (x < n) {
        x = prompt('小了呢~');
      } else {
        alert('猜对了！！');
        break;
      }
    }

4 总结陈述

本文详细探讨了如何实现猜数字游戏，包括环境配置、基本素养、实现方式、基本框架和实现过程。通过比较不同实现方式的优缺点，选择了利用网页弹窗的方式，并强调了随机数生成、循环和条件语句在游戏逻辑处理中的重要性。此外，还讨论了玩家在猜错后的操作方式，并建议根据实际情况选择适合的操作流程设计，以确保玩家能够轻松愉快地进行游戏。通过这种方式，我们可以构建一个简单而有趣的猜数字游戏，为玩家提供良好的交互体验。

希望大家能够从这篇文章中获得启示和收获，同时也感谢各位大佬的支持。如果您在阅读文章时发现任何问题，欢迎在评论区留言，鸿蒙会尽快回复并提供反馈！

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/62c3f18505.html