简单的猜谜游戏

  • Z时代
  • 2024-01-10
  • 分类：问答

我想做一个简单的猜谜游戏。我无法获得正确操作的功能，或将消息显示给用户。我没有正确使用innerHTML吗？当数字被正确猜测时，我也希望游戏重新加载，我不确定它是否有效，因为游戏无法运行。简单的猜谜游戏

<!DOCTYPE html> 
<html> 
    <head lang="en"> 
     <meta charset="utf-8"> 
     <title>Guess the Number</title> 
     <link rel="stylesheet" href="css/Lab6.css" /> 
     <script type="text/javascript" src="script/Lab6.js"></script> 
    </head> 
    <body onload="pickInteger()"> 
     <div> 
     <h2><span>Guess the Number</span></h2> 
     </div> 
     <br/> 
     <div id="formDiv"> 
     <form name="AForm" method="get" > 
      <p>The computer has picked a number between 1 - 99, you must choose the correct number to win the game. When you guess the right number the game will restart.<br/> 
      </p> 
      <div id="bodyDiv"> 
       <p> Your guess is: 
        <input id="guess" type="text" size="1" name="theData" value="" autofocus/> 
        <input type="button" name="mybutton" value=" Guess " onclick="checkGuess()"> 
       </p> 
       <p id="output"> 
       </p> 
      </div> 
     </form> 
     </div> 
    </body> 
</html> 
var number = 0; 
var output = document.getElementById("output").innerHTML; 
function pickInteger() { 
    "use strict"; 
    number = Math.floor(Math.random() * 10 + 1); 
} 
function checkGuess() { 
    "use strict"; 
    var guess = document.getElementById("guess").value; 
     if (guess == number) { 
      alert(number + " " + "Is the correct number!"); 
      output = ""; 
      pickInteger(); 
     } 
     if (guess < number); { 
      output = "The number I am thinking of is higher than" + guess; 
     } 
     else if (guess > number); { 
      output = "The number I am thinking of is lower than" + guess; 
     } 
}

回答：

你有一个分号if (guess < number);和else if (guess > number);这是不对的只是删除它，它就会开始工作，请参见下面的代码

var number = 0;  
var output = document.getElementById("output").innerHTML;  
var consolecounter = 0;  
function pickInteger() {  
    "use strict";  
    number = Math.floor(Math.random() * 10 + 1);  
}  
$(document).ready(function() {  
    pickInteger();  
    $("form[name='AForm']").on('submit', function(e) {  
    "use strict";  
    e.preventDefault();  
    var guess = parseInt(document.getElementById("guess").value);  
    if (guess == number) {  
     alert(number + " " + "Is the correct number!");  
     output = "";  
     pickInteger();  
    }  
    if (guess < number) {  
     console.log("The number I am thinking of is higher than " + guess);  
     consolecounter++;  
    } else if (guess > number) {  
     console.log("The number I am thinking of is lower than " + guess);  
     consolecounter++;  
    }  
    clearConsole(consolecounter);  
    })  
})  
function clearConsole(consolecounter) {  
    (consolecounter == 3) && (setTimeout(function() {  
    console.clear();  
    consolecounter = 0;  
    }, 2000));  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="utf-8">  
    <title>Guess the Number</title>  
</head>  
<body>  
    <div>  
    <h2><span>Guess the Number</span></h2>  
    </div>  
    <br/>  
    <div id="formDiv">  
    <form name="AForm" method="get">  
     <p>The computer has picked a number between 1 - 99, you must choose the correct number to win the game. When you guess the right number the game will restart.<br/>  
     </p>  
     <div id="bodyDiv">  
     <p> Your guess is:  
      <input id="guess" type="text" size="1" name="theData" value="" autofocus/>  
      <input type="submit" name="mybutton" value=" Guess ">  
     </p>  
     <p id="output">  
     </p>  
     </div>  
    </form>  
    </div>  
</body>  
</html>

以上是 简单的猜谜游戏 的全部内容， 来源链接： utcz.com/qa/259207.html

回到顶部