javascript - 如何防止猜数字游戏中的重复猜测?
问题描述
我创建了一个名为尝试收集用户猜到的数字的数组。当用户最终猜出正确的数字时,将尝试次数和猜中的数字告诉用户。我如何避免用户猜测他们已经猜到的数字?我知道我必须在每次猜测后检查数组,看看该数字是否已经被猜到并且在数组中。(如果猜测在数组中,显示消息说“你已经猜到了,再试一次”)另外,我应该将该猜测添加到猜测数量还是不包括它,因为它是重复猜测?
let num = Math.floor(Math.random() * 20) + 1;
console.log(num);
let num_guess = 0
let tries = []
function do_guess() {
let guess = Number(document.getElementById("guess").value);
let message = document.getElementById("message");
if (isNaN(guess)) {
message.innerHTML = 'That is not a number!';
}
else if (guess > 20) {
message.innerHTML = 'That number is not in range, try again.';
num_guess++
tries.push(guess)
}
else if (guess > num) {
message.innerHTML = "No, try a lower number.";
num_guess++
tries.push(guess)
}
else if (guess < num) {
message.innerHTML = "No, try a higher number.";
num_guess++
tries.push(guess)
}
else if (guess == num) {
num_guess++
tries.push(guess)
message.innerHTML = "You got it! It took you " + num_guess + " tries and your guesses were " + tries + ".";
}
}
解决方案
您可以使用包含来检查元素是否存在于数组中。
includes() 方法确定数组是否在其条目中包含某个值,并根据需要返回 true 或 false。
您需要在所有条件之前添加以下代码
if (tries.includes(guess)) {
message.innerHTML = "You guessed that already, try again";
}
let num = Math.floor(Math.random() * 20) + 1;
console.log(num);
let num_guess = 0;
let tries = [];
const guessContainer = document.getElementById("guess");
const check = document.getElementById("check");
let message = document.getElementById("message");
guessContainer.addEventListener("keyup", (e) => {
message.innerHTML = "";
});
function do_guess() {
let guess = Number(guessContainer.value);
let isCorrect = false;
if (tries.includes(guess)) {
message.innerHTML = "You guessed that already, try again";
} else if (isNaN(guess)) {
message.innerHTML = "That is not a number!";
} else if (guess > 20) {
message.innerHTML = "That number is not in range, try again.";
num_guess++;
tries.push(guess);
} else if (guess > num) {
message.innerHTML = "No, try a lower number.";
num_guess++;
tries.push(guess);
} else if (guess < num) {
message.innerHTML = "No, try a higher number.";
num_guess++;
tries.push(guess);
} else if (guess == num) {
isCorrect = true;
num_guess++;
tries.push(guess);
message.innerHTML =
"You got it! It took you " +
num_guess +
" tries and your guesses were " +
tries +
".";
}
if (isCorrect) {
message.classList.add("right");
message.classList.remove("wrong");
} else {
message.classList.add("wrong");
message.classList.remove("right");
}
}
check.addEventListener("click", do_guess);
body {
padding: 1rem;
}
button {
background-color: indianred;
color: white;
border: none;
padding: .25rem .5rem;
border-radius: 4px;
text-transform: uppercase;
}
.wrong {
color: tomato;
}
.right {
color: green;
}
h5 {
margin-top: 1rem;
}
<input type="text" id="guess" />
<button id="check">check</button>
<h5 id="message"></h5>
推荐阅读
- google-apps-script - 如何使用 Google 表格通过多个地址使用 Google Civic API
- azure-active-directory - Microsoft Graph API 间歇性错误“找不到令牌:令牌无效或已过期”重试后自行解决
- c++ - 混淆有符号和无符号整数
- c - 我可以同时使用 scanf 和 getchar 来读取文件吗?
- c++ - 如何从文件中读取但每一行都被读入不同的变量或函数?
- continuous-integration - 如何跳过 Buldkite pipeline.yml 文件中基于环境变量的构建步骤?
- reactjs - 尝试根据我从 api 调用收到的数据设置反应组件的初始状态
- hive - 如何要求 hive 提供更详细的错误?
- ruby - 从不同的类更改类实例变量
- python-3.x - 抓取 UNIX 时间戳到最后一秒