为高低游戏增加提示符()

Question

我创造了一款介于1-20之间的高/低游戏。为了更进一步，我尝试让用户选择要对抗的数字:在1 - x(用户输入的数字)之间进行选择。游戏中的其他参数也需要随着这一改变进行调整。我想特别使用Prompt()让用户选择一个号码来对抗，我只是不确定如何添加它以及需要进行的其他更改。任何建议都很感激!

var answer = Math.floor(Math.random()*20) + 1;  
var no_of_guesses = 0;  
var guesses_num = [];
function guessing(){  
var user_guess = document.getElementById("guess").value; 
if(user_guess < 1 || user_guess > 20 ){  
alert("That number is not in range, try again!");
}
else{  
guesses_num.push(user_guess);   
no_of_guesses+= 1;  
if(user_guess < answer){  
outcome1.textContent = "Too low"  
outcome2.textContent = "Number Of Guesses : " +  
no_of_guesses;  
outcome3.textContent = "Guessed Number Are: " +  
guesses_num;  
}  
else if(user_guess > answer){  
outcome1.textContent = "Too High"  
outcome2.textContent = "No. Of Guesses : " +  
no_of_guesses;  
outcome3.textContent = "Guessed Number Are: " +  
guesses_num;  
}  
else if(user_guess == answer){  
outcome1.textContent = "You're Correct!!"  
outcome2.textContent = "the Number was " + answer  
outcome3.textContent = " You guessed it in " +  no_of_guesses  +"Guesses";   
}  
}  
}  
var outcome1 = document.getElementById("outcome1")  
var outcome2 = document.getElementById("outcome2")  
var outcome3 = document.getElementById("outcome3")

<div class="container">  
<h3>Guess between 1-20!</h3> 
<input type="text" placeholder="Choose a number" id="picknum"><br>
<button onclick="guessing()" id="my_btn">GUESS</button>
<input type="text" placeholder="Guess a number in range" id="guess"><br>  
<p id="outcome1">Are you feeling lucky?</p>  
<p id="outcome2"></p>  
<p id="outcome3"></p>
</div>  

Answer 1

我不太确定您为什么要使用prompt()作为用户对话框。我的代码片段使用已经提供的<input>元素，以避免代码中不必要的重复:

const answer = Math.floor(Math.random()*20) + 1,
guesses=[];
const inp=document.getElementById("guess"),
out=document.querySelectorAll("[id^=outcome]");
function guessing(){
const n=inp.value;
guesses.push(n);
[`The number ${n} is ${n==answer? "correct!" : "too "+(n<answer?"low.":"high.")}`,
`You had ${guesses.length} guesses.`,
`The guessed numbers were: ${guesses.join(", ")}.`].forEach((o,i)=>out[i].textContent=o)

}

<div class="container">  
<h3>Guess between 1-20!</h3> 
<input type="text" placeholder="Guess a number in range" id="guess"><button onclick="guessing()" id="my_btn">GUESS</button><br>  
<p id="outcome1">Are you feeling lucky?</p>  
<p id="outcome2"></p>  
<p id="outcome3"></p>
</div>

Answer 2

如果你愿意忍受它的UI限制，调用prompt返回用户的输入;您可以使用现有的代码，仅将guessing()的第一行更改为

var user_guess = prompt("What is your guess?")

(注意prompt返回一个字符串;在进行数学比较时，您需要使用Number(user_guess)。)