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

how to set background to color you have chosen

本文关键字：选择 颜色 设置 背景      更新时间：2023-09-26

功能：

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

已经做了什么：

设置while循环对条件进行连续检查，并在check_guess（）方法中进行验证检查。已将CCD_ 1设置为显示系统选择的正确颜色。

问题：

我无法显示系统选择的正确颜色。它一直显示第一个条件警报消息："对不起，我认不出你的颜色。请再试一次"。

其次，即使我设置了正确的颜色或阵列中的任何颜色，我也会不断收到"对不起，我认不出你的颜色。请再试一次"的提示

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

<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>

你做错了：

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;
      }

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

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

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

array_variable.indexOf(value_to_check_for)方法将返回在array_variable中找到value_to_check_for的索引，如果根本没有找到，则返回-1。有关更多详细信息和用法示例，请参阅数组#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;具有CCD_ 10作为CCD_。

完成的文章看起来像：

<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>

相关文章：