gpt4 book ai didi

javascript - 猜数字游戏 : progressing the loop/alert + reset

转载 作者:行者123 更新时间:2023-11-30 19:18:33 26 4
gpt4 key购买 nike

我想创建一个“猜数字游戏”,您可以在一定的尝试次数内猜出一个随机数。

我挣扎于:

(必须有)1. 警报后在循环中进行(它会显示您的猜测是高、低还是不是数字。

(很高兴有)2. 如果您设法猜中数字或尝试次数用完,请重置游戏。重置意味着恢复原来的猜测数量并将您的尝试归零。也许只是一个刷新页面的命令。

我 - 在我的第一次尝试后中断了多年 - 编码新手。

这是对我的项目的访问:https://glitch.com/~gravel-pyrite

我认为这是我搞砸的相关循环/条件引擎:

var rangeMin = 0; //set the min value 
var rangeMax = 10; //set the max value
var randomNumber = Math.floor(Math.random() * (rangeMax - rangeMin + 1)) + rangeMin;
var counter = 0;
var maxTries = 5;
var remainingTries = maxTries;
var guessedNumbers = [];


document.getElementById("submit").onclick = function() {

//Displaying min, max and remaining guesses in HTML

document.getElementById('min').innerHTML = rangeMin;
document.getElementById('max').innerHTML = rangeMax+"!";
document.getElementById('feedback').innerHTML = "Remaining guesses: "+remainingTries;
document.getElementById('guessedNumbers').innerHTML = "Your guesses so far: " + guessedNumbers;

var attempts = +document.getElementById("guessInput").value; // use `+` to make sure your input value is treated as a number and not a string
guessedNumbers.push(" "+attempts+" ");
counter++;
remainingTries--;
if (counter >= maxTries) { //If running outs of attempts, break out of loop (test for >= to)
alert("You used up your maximum tries. A new game will start.");
resetGame();
} else if (isNaN(attempts)) { //If anything else than a number is entered
alert(attempts + " is not a number");
} else if (attempts == randomNumber) { //If guessed correctly
alert("Awesome! You guessed the number right: " + randomNumber + ". You needed " + attempts + " attempts.");
resetGame();
} else if (attempts > randomNumber && counter < maxTries) {
alert("Your guess " + attempts + " is too high. Guess lower.")
} else if (attempts < randomNumber && counter < maxTries) {
alert("Your guess " + attempts + " is too low. Guess higehr.")
}
}
function resetGame() {
location.reload(true);
}

我希望在警报之后,我可以输入一个新值,而不是陷入“警报循环”。

编辑:我现在已经更新了我的代码。成功用完所有尝试后重新加载页面效果很好。

一件事打开:document.getElementById('feedback').innerHTML = "剩余猜测:"+remainingTries; document.getElementById('guessedNumbers').innerHTML = "你目前的猜测:"+ guessedNumbers;

不会仅在第一次提交按钮后显示。

这是 HTML:

<body>
<h1>Guess what!</h1>
<p>Guess a number between <span id="min"></span> & <span id="max"></span></p>
<div>
<label for="guessInput">Your guess</label>
<input type="text" id="guessInput">
<input type="submit" id="submit">
</div>
<p id="feedback"></p>
<p id="guessedNumbers"></p>
<button onclick="resetGame()">Reset Game</button>
</body>

最佳答案

调整你的代码参见 fiddle 示例:https://jsfiddle.net/u0cmtg7j/1/

您不需要循环,在提交事件中执行所有操作。还要将您的 DOM 操作代码移到提交事件中,因为您希望在每次结果更改时更新 HTML。

建议:将您的 DOM/HTML 操作代码打包到一个函数中,这样既美观又可重用。

JS

var rangeMin = 0; //set the min value
var rangeMax = 10; //set the max value
var randomNumber = Math.floor(Math.random() * (rangeMax - rangeMin + 1)) + rangeMin;
var counter = 0;
var maxTries = 5;
var remainingTries = maxTries;
var guessedNumbers = [];

//Prompt that asks user to guess a number between x / 10


//Check if number is correct
//If wrong, prompt them to guess again unti they run out of guesses
//If correct, tell them they won, the number of attempts and thank you

document.getElementById("submit").onclick = function() {

var attempts = document.getElementById("guessInput").value;
guessedNumbers.push(attempts);
counter++;
remainingTries--;
if (counter > maxTries) { //If running outs of attempts, break out of loop
alert("You used up your maximum tries.");
resetGame();
} else if (isNaN(attempts)) { //If anything else than a number is entered
alert(attempts + " is not a number");
} else if (attempts == randomNumber) { //If guessed correctly
alert("Awesome! You guessed the number right: " + randomNumber + "You needed " + attempts + " attempts.");
resetGame();
} else if (attempts > randomNumber && counter < maxTries) {
alert("Your guess " + attempts + " is too high. Guess lower.")
} else if (attempts < randomNumber && counter < maxTries) {
alert("Your guess " + attempts + " is too low. Guess higer.")
}

document.getElementById('min').innerHTML = rangeMin;
document.getElementById('max').innerHTML = rangeMax + "!";
document.getElementById('feedback').innerHTML = "Remainig guesses: " + remainingTries;
document.getElementById('guessedNumbers').innerHTML = "Your guesses so far: " + guessedNumbers;
}

function resetGame() {

}

//Displaying min, max and remaining guesses in HTML
document.getElementById('min').innerHTML = rangeMin;
document.getElementById('max').innerHTML = rangeMax + "!";
document.getElementById('feedback').innerHTML = "Remainig guesses: " + remainingTries;
document.getElementById('guessedNumbers').innerHTML = "Your guesses so far: " + guessedNumbers;

HTML

<h1>Guess what!</h1>
<p>Guess a number between <span id="min"></span> & <span id="max"></span></p>
<div>
<label for="guessInput">Your guess</label>
<input type="text" id="guessInput">
<input type="submit" id="submit">
</div>
<p id="feedback"></p>
<p id="guessedNumbers"></p>
<button>Reset Game</button>

关于javascript - 猜数字游戏 : progressing the loop/alert + reset,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57737291/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com