这段代码应该是一个颜色猜谜游戏，我有一个颜色数组。用户应该猜测颜色，当它正确时，游戏停止。我试图测试我的用户输入以使界面更好，但代码似乎无法正常工作这是我的第一个完美运行的代码。
<!DOCTYPE html>
<html>
<head>
<title>Color guessing game</title>
</head>
<body onload="do_game()">
<script>
var color = ["Black","Blue","Brown","Cyan","GoldenRod","Green","Maroon","Olive","Pink","Red"];
var target;
var finished = false;
var guess_input;
var guesses;
var randomComputerGuess;
function do_game() {
var target_index = Math.random() * 10;
target = Math.floor(target_index);
alert(color[target]);
randomComputerGuess = color[target];
while(!finished) {
guess_input = prompt("I am thinking of one of these colors: \n\n" +
"Black,Blue,Brown,Cyan,GoldenRod,Green, Maroon,Olive,Pink,Red \n\n"
+ "What color am i thinking of?");
guesses +=1;
if(randomComputerGuess == guess_input){
alert("Good Job! You are correct.");
finished = true;
}
}
}
/*function check_guess(guess_input){
if(guess_input == color[target]){
alert("Congratulations! You have guessed the color! \n\n"
+ "It took you " + guesses + "guess(es) to finish the game! \n\n"
+ "You can see this color in the background.");
return true;
}
}*/
Body=document.getElementsByTagName("body")[0];
Body.style.background=color[target];
</script>
</body>
</html>
现在这是我的更新，它不起作用。我添加了一个函数check.guess（）来检查我的用户输入是否存在某些情况，例如它不是数组中的颜色名称，或者位置较低或高于随机我之前的函数do.game（）
选择的颜色<!DOCTYPE html>
<html>
<head>
<title>Color guessing game</title>
</head>
<body onload="do_game()">
<script>
var color = ["Black","Blue","Brown","Cyan","GoldenRod","Green","Maroon","Olive","Pink","Red"];
var target;
var finished = false;
var guess_input;
var guesses;
var randomComputerGuess;
function do_game() {
var target_index = Math.random() * 10;
target = Math.floor(target_index);
alert(color[target]);
randomComputerGuess = color[target];
while(!finished) {
guess_input = prompt("I am thinking of one of these colors: \n\n" +
"Black,Blue,Brown,Cyan,GoldenRod,Green, Maroon,Olive,Pink,Red \n\n"
+ "What color am i thinking of?");
guesses +=1;
finished = check_guess();
/*if(randomComputerGuess == guess_input){
alert("Good Job! You are correct.");
finished = true;
}*/
}
}
function check_guess(guess_input){
if(color.indexOf(guess_input) == -1){
alert("Sorry, I do no not recognize your color. \n\n"
+ "Please try again.");
return false;
}
if(guess_input > randomComputerGuess){
alert("Sorry, your guess is not correct! \n\n"
+ "Hint: Your color is alphabetically higher than mine. \n\n"
+ "Please try again. ");
return false;
}
if(guess_input < randomComputerGuess){
alert("Sorry, your guess is not correct! \n\n"
+ "Hint: Your color is alphabetically lower than mine. \n\n"
+ "Please try again. ");
return false;
}
if(guess_input == randomComputerGuess){
alert("Congratulations! You have guessed the color! \n\n"
+ "It took you " + guesses + "guess(es) to finish the game! \n\n"
+ "You can see this color in the background.");
return true;
}
}
Body=document.getElementsByTagName("body")[0];
Body.style.background=color[target];
</script>
</body>
</html>
答案 0 :(得分：0)
正如您所发现的那样，您没有将猜测传递给check_guess函数，但除此之外，还有很多不必要的代码。这是一个清理版本，显示最后的颜色。代码中还有注释来解释这些更改。
window.addEventListener("DOMContentLoaded", function(){
// Changed colors to lower case so they can be compared to lower case later
var colors = ["black","blue","brown","cyan","goldenrod","green","maroon","olive","pink","red"];
var target = null;
var guess_input = null;
var guesses = 0;
var randomComputerGuess = null;
// Math.random() will return a random number between 0 (inclusive) and 1 (exclusive)
// I've change your multiplier to 11 so that you can concievably get 10 from the operation
// I've also combined target_index and target to just one variable
var target = Math.floor(Math.random() * 11);
randomComputerGuess = colors[target];
console.log("Random color is: " + randomComputerGuess);
// while(true/false) creates an opportunity for an infinite loop, which
// is bad practice. Instead, make loop have a definite end point
// In this scenario, the user will have 3 guesses before the game ends
while(guesses < 3) {
guess_input = prompt("I am thinking of one of these colors: \n\n" +
colors.join(", ") + "\n\n" +
"What color am i thinking of?");
// Added .toLowerCase() so guess doesn't have to be case-sensitive
check_guess(guess_input.toLowerCase());
guesses++; // Increase the guess count
}
function check_guess(guess_input){
var retVal = false;
var message = null;
// The first check looks for no entry or user hitting cancel
if(guess_input === "" || guess_input === null) {
message = "You didn't enter a value!";
} else if(guess_input < randomComputerGuess){
message = "Sorry, your guess is not correct! \n\n" +
"Hint: Your color is alphabetically higher than mine. \n\n" +
"Please try again.";
} else if(guess_input > randomComputerGuess){
message = "Sorry, your guess is not correct! \n\n" +
"Hint: Your color is alphabetically lower than mine. \n\n" +
"Please try again.";
} else if(guess_input.toLowerCase() === colors[target].toLowerCase()){
message = "Congratulations! You have guessed the color! \n\n" +
"It took you " + guesses + " guess(es) to finish the game! \n\n" +
"You can see this color in the background.";
guesses = 3;
retVal = true;
}
alert(message);
return retVal;
}
document.getElementsByTagName("body")[0].style.background = colors[target];
});