Question

功能性：

用户玩游戏，系统将从数组中的列表中随机选择颜色。当用户选择正确的颜色时，背景将显示正确的颜色，并显示祝贺信息

已完成的工作：

设置while循环以对条件进行连续检查，并在check_guess（）方法中完成验证检查。已设置myBody=document.getElementsByTagName("body")[0]; myBody.style.background = guess_input;以显示系统选择的正确颜色。

问题：

我无法显示系统选择的正确颜色。它会一直显示第一个条件警告信息：＆＃34;对不起，我不知道你的颜色。请再试一次＆＃34;。

其次，我不断得到提示＆＃34;抱歉，我不认识你的颜色。即使我在数组中设置了正确的颜色或任何颜色

，请再试一次＃34;

我做错了什么，为什么不显示系统选择的颜色

＆＃13;

<html>

<head>
  <title>Color Guessing Game</title>
</head>

<body onload="do_game()">
  <script>
    var color = ["blue", "cyan", "gray", "green", "magenta", "orange", "red", "white", "yellow"];
    var guess_input_text, guess_input, finished = false,
      target, guesses = 0;

    function do_game() {

      var rnd = Math.floor((Math.random() * 9) + 0);
      target = color[rnd];
      alert(target);

      while (!finished) {
        guess_input_text = prompt("I am thinking of these colors:" +
          "\n\n blue, cyan, gray, green, magenta, orange, red, white, yellow" + "\n\n what color am I thinking of?");
        guess_input = parseInt(guess_input_text);
        guesses += 1;
        finished = check_guess();
      }
    }

    function check_guess(){
            
            if (guess_input_text != color){
                alert("Sorry, i don't recognise your color"+"\n Please try again");
                return false;
            } else if(guess_input_text == color){
                if(guess_input> target){
                    alert("Sorry, your guess is not correct!" +"\n Hint: Your color is alphabatically higher than mine" + "\n Please try again");
                    return false;
                }else if(guess_input< target){
                    alert("Sorry, your guess is not correct!" +"\n Hint: Your color is alphabatically lower than mine" + "\n Please try again");
                    return false;
                }
            }else{
                 alert ("Congratulations! You have guessed the color!"+"\nIt took you"+ guesses+" guesses to finish the game!" + "\n You can see the color in the background");
                document.body.style.backgroundColor = guess_input;
                return true;
            }
        }
  </script>
</body>

</html>

＆＃13;

Answer 1

你这样做错了：

myBody.style.background = guess_input;

我认为你已经忘记了这个：

myBody.style.backgroundColor = guess_input;

哦，当你说：

if (guess_input != color) {
        alert("Sorry, i don't recognise your color" + "\n Please try again");
        return false;
      }

您将整数与数组进行比较。您必须将整数与数组的位置进行比较（而不是与该位置的数据进行比较）

Answer 2

首先，行if (guess_input != color) {将失败，因为color是一个数组。要检查guess_input数组中是否color，我建议使用

if (color.indexOf(guess_input) < 0) {

array_variable.indexOf(value_to_check_for)方法将返回在value_to_check_for中找到array_variable的索引，如果根本找不到则返回-1。有关详细信息和使用示例，请参阅Array#indexOf。

另一个问题是你试图将字符串输入解析成一个整数，你不需要你可以改变

guess_input_text = prompt("I am thinking of these colors:" +
          "\n\n blue, cyan, gray, green, magenta, orange, red, white, yellow" + "\n\n what color am I thinking of?");
        guess_input = parseInt(guess_input_text);

可以更改为：

guess_input = prompt("I am thinking of these colors:" +
          "\n\n blue, cyan, gray, green, magenta, orange, red, white, yellow" + "\n\n what color am I thinking of?");

其次，您可能想要替换 myBody = document.getElementsByTagName("body")[0]; myBody.style.background = guess_input; 同 document.body.style.backgroundColor = guess_input;使用getElementsByTagName并非如此。

完成的文章将如下所示：

＆＃13;

<html>

<head>
  <title>Color Guessing Game</title>
</head>

<body onload="do_game()">
  <script>
    var color = ["blue", "cyan", "gray", "green", "magenta", "orange", "red", "white", "yellow"];
    var guess_input_text, guess_input, finished = false,
      target, guesses = 0;

    function do_game() {

      var rnd = Math.floor((Math.random() * 9) + 0);
      target = color[rnd];
      alert(target);

      while (!finished) {
        guess_input = prompt("I am thinking of these colors:" +
          "\n\n blue, cyan, gray, green, magenta, orange, red, white, yellow" + "\n\n what color am I thinking of?");
        guesses += 1;
        finished = check_guess();
      }
    }

    function check_guess() {
      if (color.indexOf(guess_input) < 0) {
        alert("Sorry, i don't recognise your color" + "\n Please try again");
        return false;
      }
      if (guess_input > target) {
        alert("Sorry, your guess is not correct!" + "\n Hint: Your color is alphabatically higher than mine" + "\n Please try again");
        return false;
      }
      if (guess_input < target) {
        alert("Sorry, your guess is not correct!" + "\n Hint: Your color is alphabatically lower than mine" + "\n Please try again");
        return false;
      }
      alert("Congratulations! You have guessed the color!" + "\nIt took you" + guesses + " guesses to finish the game!" + "\n You can see the color in the background");
      document.body.style.backgroundColor = guess_input;
      return true;
    }
  </script>
</body>

</html>

＆＃13;

如何将背景设置为您选择的颜色

2 个答案: