时间戳

首页 > 解决方案 > 在猜数字游戏中进行猜测时如何编码您所做的猜测次数？

javascript - 在猜数字游戏中进行猜测时如何编码您所做的猜测次数？

问题描述

基本上，我创建了一个猜数字游戏。它运作良好，但我需要帮助计算用户所做的猜测次数。这是 HTML 和 JS 代码。如果用户得到 X 次猜测中的数字，我希望游戏显示“你猜中了 X 次猜测中的数字！你还有 Y 次猜测”

    <!DOCTYPE html>
<html>
  <head>
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <!--bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    </head>

  <body>
<center>
  <div id=text>
    <h1> High-Low Game! </h1>
<p>Please enter a number between 0 and 10000</p>
<div class="input-group input-group-lg" id="input">
         <div class="input-group-prepend">
           <span class="input-group-text" id="inputGroup-sizing-lg">Enter Number Here.</span>
         </div>
         <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" id="number">
</div>
<br>
<button type="button" class="btn btn-danger" onclick="checkValue()">Guess</button>
<br>
<h2 id='result'>Make a inference!</h2>



  </div>
</center>



    <script src="script.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

  </body>
</html>



let targetNum;
targetNum = Math.floor((Math.random()*10000)+1);
function checkValue(){
  let result = parseInt($(".form-control").val())
  if(result>targetNum){
    $("#result").css("color","red");
    $("#result").text("Very Bad Not Even Close");
  } else if(result < targetNum){
    $("#result").css("color","red");
    $("#result").text("Almost There!");
  } else if(result == targetNum){
    $("#result").css("color","green");
    $("#result").text("Very good at guessing! The number was" + targetNum);
  } else {
    $("#result").text("Please re input with an actual number -_-");
  }
}
if (guessCount > 1) {

      if (userGuess === computerGuess) {
        alert("Winner winner taco dinner!");
        break;
      } else if (userGuess > computerGuess) {
        guessCount--;
        alert("Please guess lower. You have " + guessCount + " guesses remaining.");


      } else {
        guessCount--;
        alert("Please guess higher. You have " + guessCount + " guesses remaining.");
    }

    } else {
      alert("MUh hahahahah you lose!");
      break;

标签： javascript

解决方案

您的代码有几个问题。您实际上不需要跟踪用户的猜测，而只需跟踪用户留下的猜测。您需要在函数之外定义它。此外，您的 if 语句集合编码不正确，也必须放在函数内。让我知道这是否适合您，或者您有什么不明白的地方

var guessLeft=10;

let targetNum;
targetNum = Math.floor((Math.random()*10000)+1);
//console.log(targetNum);
function checkValue(){
  let result = parseInt($(".form-control").val())
  if(result>targetNum){
    $("#result").css("color","red");
    $("#result").text("Very Bad Not Even Close");
  } else if(result < targetNum){
    $("#result").css("color","blue");
    $("#result").text("Almost There!");
  } else if(result == targetNum){
    $("#result").css("color","green");
    $("#result").text("Very good at guessing! The number was" + targetNum);
  } else {
    $("#result").text("Please re input with an actual number -_-");
  }
  
  guessLeft--;
  if (guessLeft >= 0) {

      if (result === targetNum) {
        alert("Winner winner taco dinner!");
        
      }else if (result > targetNum) {
       
        alert("Please guess lower. You have " + guessLeft + " guesses remaining.");


      }else{
       
        alert("Please guess higher. You have " + guessLeft + " guesses remaining.");
      }

    }else{
      alert("MUh hahahahah you lose!");
    }
}
<!DOCTYPE html>
<html>
  <head>
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <!--bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    </head>

  <body>
<center>
  <div id=text>
    <h1> High-Low Game! </h1>
<p>Please enter a number between 0 and 10000</p>
<div class="input-group input-group-lg" id="input">
         <div class="input-group-prepend">
           <span class="input-group-text" id="inputGroup-sizing-lg">Enter Number Here.</span>
         </div>
         <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" id="number">
</div>
<br>
<button type="button" class="btn btn-danger" onclick="checkValue()">Guess</button>
<br>
<h2 id='result'>Make a inference!</h2>



  </div>
</center>



    <script src="script.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

  </body>
</html>

推荐阅读