Javascript颜色猜谜游戏 [英] Javascript color guessing game
本文介绍了Javascript颜色猜谜游戏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在通过编写颜色猜测游戏来练习我的javascript编码，其中有一组颜色，随机选择一个颜色作为目标颜色。用户将被提示选择一种颜色。选择需要通过一些标准，如果正确，页面的背景颜色会发生变化以匹配正确的颜色。这些是游戏的基础。我甚至无法得到代码的警报运行。我不知道这个问题。
以下是我的代码。
<！doctype html>
< html>
< body onload =do_game（）>
< script>
alert（ok）;
var colors = [coral，olive，khaki，lime，red，maroon，yellow，green，orchid];
var alpha_colors = colors.sort（）;
返回alpha_colors;
var finished = false;
var guesses = 0;
函数do_game（）{
alert（ok ok so far）;
var num_colors = colors.length-1;
var target = colors [math.floor.random（）* num_colors]
do {
var color_guess = prompt（我正在考虑这些颜色\\\
\\\
+ alpha_colors + 我在想什么颜色？）;
guesses + = 1;
完成= checkguess（）;
} while（finished = false）;
函数checkguess（）{
if（colors.indexOf（color_guess）= - 1）{
alert（对不起，我不认识你颜色。\\\
\\\
请再试一次。）;
返回false;
if（color_guess< target）{
alert（对不起，你的猜测不正确。\\\
\\\
提示：你的颜色比我的字母低）;
返回false;
if（color_guess> target）{
alert（对不起，您的猜测不正确。\\\
\\\
提示：您的颜色比我的字母高。
返回false;
}
alert（恭喜你！你已经猜到了颜色！\\\\\\\\\\\\\'在后台）;
返回true;
}
style.background-color = target
< / script>
< / body>
< / html>
解决方案
初学者错误。
- 使用return后，您将结束当前范围内的所有内容。因此，
当您在第4行返回alpha_colors时，您的代码在
之后将永远不会运行。
- 这不是您按字母顺序比较字符串的方式。
- math.floor.random（）不是您如何制作随机数字。下一次
尝试Math.floor（Math.random（）* maxNumber）; - 当您比较两个东西时，使用==或===。从不=！编程中的=与数学中的=不同。当你想要设置一个变量的值时使用=，当你想比较两个事物时使用==。
alert（ok）; var colors = [black，green，yellow ）; var alpha_colors = colors.sort（）; var finished = false; var guesses = 0; var target = colors [Math.floor（Math.random（）* alpha_colors.length）]; function do_game（）{alert（ 好吧，到目前为止）; var color_guess = prompt（我在想这些颜色\\\
\\\
+ alpha_colors +我想要什么颜色？）;猜测+ = 1; checkguess（color_guess）;}函数checkguess（color_guess）{if（color_guess ==stop）{return false; } if（colors.indexOf（color_guess）== -1）{alert（对不起，我不认识你的颜色。\\\
\\\
请再试一次）; do_game（）; } if（color_guess< target）{alert（对不起，你的猜测不正确。\\\
\\\
提示：你的颜色比我的字母更低）; do_game（）; } if（color_guess> target）{alert（对不起，你的猜测不正确。\\\
\\\
提示：你的颜色比我的字母更高）; do_game（）; }如果（colors.indexOf（color_guess）> = 0）{alert（恭喜！你已经猜到了颜色！\\\\\\\\\\' \\ n您可以在背景中看到颜色）; }
I'm practicing my javascript coding by writing a color guessing game where there is a set array of colors and one will randomly be selected as the target color. The user will then be prompted to select a color. The selection goes through some criteria and if correct the background color of the page changes to match the correct color. Those are the basics of the game. I can't even get the alerts of the code to run. I have no idea of the problem. Thank you.
Here's the code I have.
<!doctype html>
<html>
<body onload="do_game()">
<script>
alert("ok");
var colors = ["coral", "olive", "khaki", "lime", "red", "maroon", "yellow", "green", "orchid"];
var alpha_colors = colors.sort();
return alpha_colors;
var finished = false;
var guesses = 0;
function do_game(){
alert("ok so far");
var num_colors = colors.length-1;
var target = colors[math.floor.random()*num_colors]
do{
var color_guess=prompt("I am thinking of these colors \n\n"+alpha_colors+"What color am I thinking of?");
guesses += 1;
finished=checkguess();
} while(finished=false);
}
function checkguess(){
if(colors.indexOf(color_guess)=-1) {
alert("Sorry. I don't recognize your color. \n\n Please try again. ");
return false;
}
if(color_guess<target) {
alert("Sorry, your guess is not correct. \n\n Hint: your color is alphabetically lower than mine");
return false;
}
if(color_guess>target) {
alert("Sorry, your guess is not correct. \n\n Hint: your color is alphabetically higher than mine");
return false;
}
alert("Congratulations! You have guessed the color! \n\n It took you "+guesses+"guesses to finish the game! \n\n You can see the color in the background");
return true;
}
style.background-color=target
</script>
</body>
</html>
解决方案
You made some beginner mistakes.
- After you use "return" you end everything in the current scope. So when you return alpha_colors at line 4 your code after that line will never run.
- Thats not how you compare strings alphabetically.
- math.floor.random() is not how you make a random number. Next time try Math.floor(Math.random()*maxNumber);
- When you compare two things use == or ===. Never "="! "=" in programming is different than "=" in Math. Use "=" when you want to set value to a variable and use "==" when you want to compare two things.
alert("ok");
var colors = ["black",
"green",
"yellow"
];
var alpha_colors = colors.sort();
var finished = false;
var guesses = 0;
var target = colors[Math.floor(Math.random() * alpha_colors.length)];
function do_game() {
alert("ok so far");
var color_guess = prompt("I am thinking of these colors \n\n" + alpha_colors + "What color am I thinking of?");
guesses += 1;
checkguess(color_guess);
}
function checkguess(color_guess) {
if (color_guess == "stop") {
return false;
}
if (colors.indexOf(color_guess) == -1) {
alert("Sorry. I don't recognize your color. \n\n Please try again");
do_game();
}
if (color_guess < target) {
alert("Sorry, your guess is not correct. \n\n Hint: your color is alphabetically lower than mine");
do_game();
}
if (color_guess > target) {
alert("Sorry, your guess is not correct. \n\n Hint: your color is alphabetically higher than mine");
do_game();
}
if (colors.indexOf(color_guess) >= 0) {
alert("Congratulations! You have guessed the color! \n\n It took you " + guesses + "guesses to finish the game! \n\n You can see the color in the background");
}
document.body.style.backgroundColor = target;
}
<!doctype html>
<html>
<head>
</head>
<body onload="do_game()">
<script src="script.js"></script>
</body>
</html>
这篇关于Javascript颜色猜谜游戏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
