JS学习——猜数字游戏

最新推荐文章于 2024-07-26 11:41:15 发布

张张碎碎念

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量2.1k

点赞数 1

文章标签： javascript reactjs

本文链接：https://blog.csdn.net/qq_43990485/article/details/118571875

版权

HTML5 JavaScript 游戏开发猜数字游戏事件监听器

关键词由CSDN通过智能技术生成

假设你的老板给你布置了以下游戏设计任务要求：

我想让你开发一个猜数字游戏。游戏应随机选择一个 100 以内的自然数, 然后邀请玩家在 10 轮以内猜出这个数字。每轮后都应告知玩家的答案正确与否，如果出错了，则告诉他数字是低了还是高了。并且应显示出玩家前一轮所猜的数字。一旦玩家猜对，或者用尽所有机会，游戏将结束。游戏结束后，可以让玩家选择再次开始。

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

    <title>猜数字游戏</title>

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

      body {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }

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

  <body>
    <h1>猜数字游戏</h1>

    <p>我刚才随机选定了一个100以内的自然数。看你能否在 10 次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。</p>

    <div class="form">
      <label for="guessField">请猜数: </label>
      <input type="text" id="guessField" class="guessField">
      <input type="submit" value="确定" class="guessSubmit">
    </div>

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

      // 开始编写 JavaScript 代码
    let randomNumber = Math.floor(Math.random() * 100) + 1;
    //Math.random():获取0-1随机数
    //Math.flooor(x):小于x且于x最接近的整数
    //Math.random()*100:就是>=0 且 <100的数
    //然后+1，就是>=1 且 <100的数
    //最后，赋值给第一个变量（randomNumber）
    
    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(){
        
      //声明了一个名为 userGuess 的变量，并将其设置为在文本字段中输入的值。
      //我们还对这个值应用了内置的 Number() 方法，只是为了确保该值是一个数字。
        let userGuess = Number(guessField.value);
        //玩家是不是第一次猜数字,如果是, 我们让 guesses 段落的文本内容等于“上次猜的数：”。如果不是就不用了。
        if(guessCount === 1){
          guesses.textContent = '上次猜的数：';
        }
        //将当前 userGuess 值附加到 guesses 段落的末尾，并加上一个空格，以使每两个猜测值之间有一个空格。
        guesses.textContent += userGuess + ' ';
        //检查用户的猜测是否等于在代码顶端设置的 randomNumber 值。如果是，则玩家猜对了，游戏胜利，
        //我们将向玩家显示一个漂亮的绿色的祝贺信息，并清除“高了 / 低了”信息框的内容，调用 setGameOver() 方法。
        if (userGuess === randomNumber) {
          lastResult.textContent = '恭喜你！猜对了!';
          lastResult.style.backgroundColor = 'green';
          lowOrHi.textContent = '';
          setGameOver();
          //检查这个回合是否是玩家的最后一个回合。如果是，程序将做与前一个程序块相同的事情，只是这次它显示的是 Game Over 而不是祝贺消息。
        } else if (guessCount === 10) {
          lastResult.textContent = '!!!GAME OVER!!!';
          setGameOver();
          //前两个比较都不返回 true 时（也就是玩家尚未猜对，但是还有机会）才会执行这里的代码。
          //在这个情况下，我们会告诉玩家他们猜错了，并执行另一个条件测试，判断并告诉玩家猜测的数字是高了还是低了。
        }else{
          lastResult.textContent = '你猜错了！';
          lastResult.style.backgroundColor = 'red';
          if(userGuess<randomNumber){
            lowOrHi.textContent =  '你猜低了！';
          }else if(userGuess>randomNumber){
            lowOrHi.textContent = '你猜高了';
          }

        }
        guessCount++;
        guessField.value = '';
        guessField.focus();
    }
    //侦听事件发生的结构称为事件监听器（Event Listener），响应事件触发而运行的代码块被称为事件处理器（Event Handler）。
    guessSubmit.addEventListener('click', checkGuess);

    //添加延时监听函数
    // window.setTimeout(function(){
    // },5000);
 
    function setGameOver(){
      //将disable属性设置为true来禁用表单文本输入和按钮 
      guessField.disabled = true;
      guessSubmit.disabled = true;
      //创建一个新的<button>元素。并把它添加到当前HTML的底部
      resetButton = document.createElement('buttton');
      resetButton.textContent = '开始新游戏';
      document.body.appendChild(resetButton);
      //设置一个事件监听器，点击时，调用resetGame()函数
      resetButton.addEventListener('click',resetGame);
    }
    //将游戏重置为初始状态，开始新的一轮游戏
    function resetGame(){
      //将guessCount重置为1
      guessCount  = 1;
      //清除所有信息段落
      const resetParas = document.querySelectorAll('.resultParas P');
      for(let i = 0;i < resetParas.length; i++){
        resetParas[i].textContent =  '';
      }
      //删除重置按钮
      resetButton.parentNode.removeChild(resetButton);
      //启用表单元素，清空文本域并聚焦于此，准备接受新猜测的数字
      guessField.disabled = false;
      guessSubmit.disabled = false; 
      guessField.value = '';
      guessField.focus();
      //删除lastResult段落的背景颜色
      lastResult.style.backgroundColor =  'white';
      //生成一个新的随机数，这样就可以猜测新的数字了！
      randomNumber = Math.floor(Math.random() * 100) + 1;
    }
    </script>
    
  </body>
</html>

文章参考

张张碎碎念

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JS学习——猜数字游戏

假设你的老板给你布置了以下游戏设计任务要求：我想让你开发一个猜数字游戏。游戏应随机选择一个 100 以内的自然数, 然后邀请玩家在 10 轮以内猜出这个数字。每轮后都应告知玩家的答案正确与否，如果出错了，则告诉他数字是低了还是高了。并且应显示出玩家前一轮所猜的数字。一旦玩家猜对，或者用尽所有机会，游戏将结束。游戏结束后，可以让玩家选择再次开始。<!DOCTYPE html><html> <head> <meta charset="utf-8"&gt
复制链接

扫一扫