使用 JavaScript 的猜数游戏(1)

📌 相关文章

📜 使用 JavaScript 的猜数游戏(1)

📅 最后修改于: 2023-12-03 15:36:29.991000 🧑 作者: Mango

使用 JavaScript 的猜数游戏

本文将介绍使用 JavaScript 编写一个猜数游戏的过程。通过这个项目，你可以学习到如何使用 JavaScript 基础语法、条件语句和函数等，同时也可以提高自己的编程能力。

游戏规则

该猜数游戏的游戏规则如下：

系统随机生成一个 1~100 的数值。
玩家通过输入框猜测这个数值。
如果玩家输入的数值小于系统生成的数值，系统会提示“太小了，请重新猜测”。
如果玩家输入的数值大于系统生成的数值，系统会提示“太大了，请重新猜测”。
如果玩家输入的数值等于系统生成的数值，系统会提示“恭喜你，猜对了”。

编写过程

设置 HTML 结构

为了让猜数游戏有界面，我们需要设置 HTML 结构。在 HTML 中，我们需要设置一个输入框、一个按钮和一个用于显示提示信息的区域。具体代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>猜数游戏</title>
  </head>
  <body>
    <h1>猜数游戏</h1>
    <input type="text" id="guess" placeholder="请输入你猜测的数字">
    <button id="submit">猜测</button>
    <p id="result"></p>
  </body>
</html>

编写 JavaScript 代码

生成随机数

我们需要使用 JavaScript 生成一个随机数，方法是使用 Math.random() 生成 0~1 之间的随机小数，再乘以 100 转为整数。代码如下：

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

判断大小

当玩家输入猜测数值后，我们需要判断这个数值与系统生成的数值的大小关系。具体代码如下：

function checkNumber (guess, answer) {
  if (guess < answer) {
    return '太小了，请重新猜测';
  } else if (guess > answer) {
    return '太大了，请重新猜测';
  } else {
    return '恭喜你，猜对了';
  }
}

绑定事件

我们需要将按钮与上面的函数绑定，当用户点击按钮后，我们需要获取输入框中的值，并计算结果。具体代码如下：

const answer = generateNumber();

document.getElementById('submit').addEventListener('click', function () {
  const guess = parseInt(document.getElementById('guess').value, 10);
  const result = checkNumber(guess, answer);
  document.getElementById('result').innerHTML = result;
});

完整代码

整个 JavaScript 代码如下：

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

function checkNumber (guess, answer) {
  if (guess < answer) {
    return '太小了，请重新猜测';
  } else if (guess > answer) {
    return '太大了，请重新猜测';
  } else {
    return '恭喜你，猜对了';
  }
}

const answer = generateNumber();

document.getElementById('submit').addEventListener('click', function () {
  const guess = parseInt(document.getElementById('guess').value, 10);
  const result = checkNumber(guess, answer);
  document.getElementById('result').innerHTML = result;
});

总结

通过这个项目，你学习到了如何使用 JavaScript 基础语法、条件语句和函数等。当然，这个猜数游戏可以进行更多的优化，例如添加计数器、添加重置按钮等。希望你通过这个项目，可以深入了解 JavaScript 的应用。