用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏

下面是用JavaScript实现「铁甲无敌奖门人“开口中”猜数游戏」的完整攻略。

游戏规则

该游戏分为两个角色：猜数者和奖门人。在游戏开始时，奖门人会先随机设定一个数（一般为 1 到 100 之间的整数），并说出自己设定的数是在 1 到 100 之间。然后，猜数者可以轮流猜测这个数字，而奖门人将回答「大了」、「小了」或者「猜对了」。如果猜数者猜对了，游戏结束，猜数者获胜；如果猜数者没有在规定次数内猜出，游戏结束，奖门人获胜。

实现步骤

第一步：生成随机数

我们可以使用Math.random()函数来生成一个 0 到 1 的随机小数，然后将其乘以 100，再取整，就可以得到一个 1 到 100 的随机整数。代码如下：

function generateRandomNumber() {
  return Math.floor(Math.random() * 100) + 1;
}

第二步：实现游戏逻辑

接下来，我们需要实现游戏逻辑。首先，我们需要在 HTML 页面上设置两个按钮，用于启动游戏和猜测数字。代码如下：

<button id="start-game">开始游戏</button>
<button id="guess-number">猜数</button>

然后，我们可以使用以下代码，当用户点击「开始游戏」按钮时，弹出提示框，告诉用户开始猜数字，并生成一个随机数。同时，我们会将最大猜测次数设为 10 次。

var randomNumber = 0;
var maxGuess = 10;
var guessCount = 0;

document.getElementById("start-game").addEventListener("click", function() {
  alert("开始猜数字!数字范围：1 ~ 100");
  randomNumber = generateRandomNumber();
  guessCount = 0;
  document.getElementById("guess-number").disabled = false;
});

接下来，我们实现当用户点击「猜数」按钮时的逻辑。代码如下：

document.getElementById("guess-number").addEventListener("click", function() {
  // 获取用户输入的数字
  var guess = parseInt(prompt("请输入你猜测的数字"));

  // 判断用户是否输入了有效数字
  if (isNaN(guess)) {
    alert("请输入有效数字！");
    return;
  }

  // 判断用户是否猜对了
  if (guess === randomNumber) {
    alert("恭喜你，猜对了！");
    document.getElementById("guess-number").disabled = true;
  } else if (guess > randomNumber) {
    alert("太大了，请再次猜测。");
  } else {
    alert("太小了，请再次猜测。");
  }

  // 更新猜测次数
  guessCount++;

  // 判断猜测次数是否超过了最大猜测次数
  if (guessCount >= maxGuess) {
    alert("很抱歉，你没有猜测成功。正确数字是 " + randomNumber);
    document.getElementById("guess-number").disabled = true;
  }
});

示例1：在页面上显示剩余猜测次数

我们可以使用以下代码，在页面上显示剩余猜测次数：

<p>剩余猜测次数：<span id="guess-left">10</span></p>

var leftGuess = maxGuess - guessCount;
document.getElementById("guess-left").innerHTML = leftGuess;

在按钮被点击时，更新leftGuess值，并触发UI的从新呈现。

示例2：添加重玩游戏的功能

我们可以使用以下代码，实现重新开始游戏的功能：

<button id="restart-game">重新开始</button>

document.getElementById("restart-game").addEventListener("click", function() {
  guessCount = 0;
  document.getElementById("guess-left").innerHTML = maxGuess;
  document.getElementById("guess-number").disabled = true;
  alert("开始猜数字!数字范围：1 ~ 100");
  randomNumber = generateRandomNumber();
});

当用户点击「重新开始」按钮时，我们将猜测次数清零，更新界面上的剩余猜测次数，禁用「猜数」按钮，生成一个新的随机数。