Создание цветовой игры с помощью поля для клика, которое соответствует одному из трех цветов. - javascript


0

Я делаю забавную коробочную игру в свободное время. Я новый кодер, который ищет предложения и помощь.

Вот что я пытаюсь сделать:

Добавьте три <div> на веб-страницу. Стиль эти три с помощью JavaScript. Каждому должен быть присвоен случайный цвет в качестве цвета фона. Используя Math.floor(Math.random()), выберите 1 из 3-х цветного фона div и установите этот цвет фона в верхнюю часть веб-страницы. Затем пользователь должен щелкнуть один из 3 полей внизу, который похож на верхний блок. Напечатайте пользователю, если пользователь выбрал правильное или неправильное.

<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <h1>Color game </h1>
  <p id="color-output-p"></p>

  <p>Click on the box below that mathces the above box color</p>
  <p id="output-p"></p>
  <div id="color1-div"></div>
  <div id="color2-div"></div>
  <div id="color3-div"></div>

  <script>
    var colorOutputP = document.getElementById("color-output-p");
    colorOutputP.style.height = "100px";
    colorOutputP.style.width = "100px";


    var color1Div = document.getElementById("color1-div");
    color1Div.style.height = "100px";
    color1Div.style.width = "100px";
    color1Div.style.float = "left";
    color1Div.onclick = divColor;

    var color2Div = document.getElementById("color2-div");
    color2Div.style.height = "100px";
    color2Div.style.width = "100px";
    color2Div.style.float = "left";
    color2Div.onclick = divColor;

    var color3Div = document.getElementById("color3-div");
    color3Div.style.height = "100px";
    color3Div.style.width = "100px";
    color3Div.style.float = "left";
    color3Div.onclick = divColor;


    var colorArray = ["rgb(255,33,56)", "rgb(55,0,255)", "rgb(30,255,0)"];
    color1Div.style.backgroundColor = (colorArray[0]);
    color2Div.style.backgroundColor = (colorArray[1]);
    color3Div.style.backgroundColor = (colorArray[2]);


    for (var i = 0; i > colorArray; i++) {
      colorArray.innerHTML += math.floor(math.random() * 3);
    }

    function divColor() {
      var backgroundColor = color1Div.style.backgroundColor;
      colorOutputP.innerHTML = backgroundColor;
    }
  </script>
</body>

</html>

  •  42
  •  1
  • 11 май 2020 2020-05-11 10:17:01

1 ответ

-2

Сделай свою домашнюю работу! Если вы можете понять, кто я, я помогу вам с этой проблемой