Javascript-随机数猜测题

最新推荐文章于 2024-11-08 16:09:18 发布

Elemen_7

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量231

点赞数 2

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/not_found77/article/details/140349071

版权

title: Javascript-随机数猜测题简单小代码

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">

    <title>Number guessing game</title>

    <style>
      html {
        font-family: sans-serif;
      }

      body {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }
      
      .form input[type="number"] {
        width: 200px;
      }

      .lastResult {
        color: white;
        padding: 3px;
      }
    </style>
  </head>

  <body>
    <h1>Number guessing game</h1>

    <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p>

    <div class="form">
        <label for="guessField">Enter a guess: </label>
        <input type="number" id="guessField" class="guessField" />
        <input type="submit" value="Submit guess" class="guessSubmit" />
         </div>

    <div class="resultParas">
      <p class="guesses"></p>
      <p class="lastResult"></p>
      <p class="lowOrHi"></p>
    </div>

    <script>
        //创造一个随机数
let randomNumber = Math.floor(Math.random() * 100) + 1;
    //获得结果输出
const guesses = document.querySelector(".guesses");
const lastResult = document.querySelector(".lastResult");
const lowOrHi = document.querySelector(".lowOrHi");
//获得输入框和提交按钮
const guessSubmit = document.querySelector(".guessSubmit");
const guessField = document.querySelector(".guessField");
//初始化计数变量
let guessCount = 1;
let resetButton;
//定义逻辑函数
function checkGuess() {
    //获取用户输入
  const userGuess = Number(guessField.value);

  if (guessCount === 1) {
    //获取guesses元素并设置初始值
    guesses.textContent = "Previous guesses: ";
  }
  //将用户输入添加到guesses元素中
  guesses.textContent += `${userGuess} `;

  if (userGuess === randomNumber) {
    lastResult.textContent = "Congratulations! You got it right!";
    lastResult.style.backgroundColor = "green";
    //不显示lowOrHi元素
    lowOrHi.textContent = "";
    //游戏结束
    setGameOver();
  } else if (guessCount === 10) {
    lastResult.textContent = "!!!GAME OVER!!!";
    lowOrHi.textContent = "";
    setGameOver();
  } else {
    lastResult.textContent = "Wrong!";
    lastResult.style.backgroundColor = "red";
    if (userGuess < randomNumber) {
      lowOrHi.textContent = "Last guess was too low!";
    } else if (userGuess > randomNumber) {
      lowOrHi.textContent = "Last guess was too high!";
    }
  }

  guessCount++;
  guessField.value = "";
  guessField.focus();//重置输入字段的值并将焦点移回输入字段，以便用户可以继续输入新的内容
}

//绑定事件监听器
guessSubmit.addEventListener("click", checkGuess);
//定义游戏结束函数
function setGameOver() {
  guessField.disabled = true;//输入框不可用
  guessSubmit.disabled = true;//提交按钮不可用
  resetButton = document.createElement("button");//创建重置按钮
  resetButton.textContent = "Start new game";
  document.body.append(resetButton);//将重置按钮添加到body元素中
  resetButton.addEventListener("click", resetGame);//绑定重置按钮点击事件
}

function resetGame() {
  guessCount = 1;
//清空guesses元素内容
  const resetParas = document.querySelectorAll(".resultParas p");
  for (const resetPara of resetParas) {
    resetPara.textContent = "";
  }
//移除重置按钮
  resetButton.parentNode.removeChild(resetButton);
//重新启用输入框和提交按钮
  guessField.disabled = false;
  guessSubmit.disabled = false;
  guessField.value = "";
  guessField.focus();
//重新设置随机数
  lastResult.style.backgroundColor = "white";
//重新生成随机数    
  randomNumber = Math.floor(Math.random() * 100) + 1;
}

    </script>
  </body>
</html>