Javascript颜色猜谜游戏

Javascript color guessing game

本文关键字：游戏 颜色 Javascript      更新时间：2023-09-26

我正在练习我的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();
            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>

你犯了一些初学者犯的错误。

  1. 在你使用"return"之后，你结束了当前范围内的所有内容。所以当您在第4行返回alpha_colors时，您在该行之后的代码将不会运行。
  2. 这不是按字母顺序比较字符串的方式。
  3. math.floor.random()不是生成随机数的方法。下次尝试Math.floor (math . random () * maxNumber);
  4. 当你比较两个事物时，使用==或===。从来没有"="!编程中的"="与数学中的"="不同。当您想将value设置为变量时使用"="，当您想比较两个事物时使用"=="。

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>

您的脚本标记的第4行有一个返回语句:

return alpha_colors;

Return语句只能在函数内部。此外，在您实际定义函数"do_game"之前，您正在引用它。

相关文章：