Question

我正在尝试制作RGB色彩猜谜游戏。它在第一次运行时工作正常。在第二次使用新游戏按钮时，应生成新的 pickedColor 和一组随机颜色。即使每次都生成新的 pickedColor （在第30行中检查），但 pickedColor 的值会更改回上的先前值第42行。

为什么会这样？如何在第30行和第42行上获得相同的 pickedColor 值？

＆＃13;

function getRandomColor() {
  var arr = [];
  var r = 0,
    g = 0,
    b = 0;
  var temp;

  for (var i = 0; i < 6; i++) {
    r = Math.floor(Math.random() * 256);
    g = Math.floor(Math.random() * 256);
    b = Math.floor(Math.random() * 256);

    arr[i] = "rgb(" + r + ", " + g + ", " + b + ")";
  }

  return arr;
}

function pickColor(colors) {
  var num = Math.floor(Math.random() * colors.length);
  return num;
}

function newGame() {
  var colors = getRandomColor();
  var colorTile = document.querySelectorAll(".colorTile");
  var pickedColor = colors[pickColor(colors)];
  console.log(pickedColor);
  console.log(colors);

  var rgbDisplay = document.querySelector("#rgbDisplay");
  var h1 = document.querySelectorAll("h1");

  rgbDisplay.textContent = pickedColor;
  for (var i = 0; i < colorTile.length; i++) {
    colorTile[i].style.backgroundColor = colors[i];
    colorTile[i].addEventListener("click", function() {
      console.log(pickedColor);
      if (pickedColor === this.style.backgroundColor) {
        h1[1].textContent = "Correct";

        for (var j = 0; j < colorTile.length; j++) {
          colorTile[j].style.backgroundColor = this.style.backgroundColor;
        }
      } else {
        h1[1].textContent = "Incorrect";
        this.style.backgroundColor = "black";
      }
    });
  }
}

newGame();

var button = document.querySelectorAll("button");
button[0].addEventListener("click", function() {
  var h1 = document.querySelectorAll("h1");
  h1[1].textContent = "Click On Tile"
  newGame();
});

＆＃13;

#container {
  width: 600px;
  height: 400px;
  margin: 0px auto;
}

.colorTile {
  background-color: red;
  width: 30%;
  margin: 1.6%;
  padding-bottom: 30%;
  float: left;
}

body {
  background-color: black;
}

h1 {
  color: yellow;
  text-align: center;
}

button {
  width: 20%;
  height: 30px;
  margin: 30px;
  margin-left: 40%;
  color: black;
  background-color: yellow;
}

HTML

＆＃13;

<!DOCTYPE html>
<html lang="en" dir="ltr">
<link href="../css/ex160.css" rel="stylesheet">
<script defer src="../JavaScript/ex160.js"></script>

<head>
  <meta charset="utf-8">
  <title>Color Game</title>
</head>

<body>

  <h1>The Great <span id="rgbDisplay">RGB</span> Game</h1>

  <div id="container">
    <div class="colorTile"></div>
    <div class="colorTile"></div>
    <div class="colorTile"></div>
    <div class="colorTile"></div>
    <div class="colorTile"></div>
    <div class="colorTile"></div>
  </div>

  <h1>Click On Tile</h1>

  <button class="restart"><em>New Game</em></button>
</body>

</html>

＆＃13;

Answer 1

您正在使用此行绑定对colorTile元素的多次单击。

colorTile[i].addEventListener("click", function()

尝试removeEventListener，然后像这样添加新的removeEventListener

function getRandomColor()
{
  var arr = [];
  var r=0, g=0, b=0;
  var temp;

  for(var i=0; i<6; i++)
  {
    r = Math.floor(Math.random() * 256);
    g = Math.floor(Math.random() * 256);
    b = Math.floor(Math.random() * 256);

    arr[i] = "rgb("+r+", "+g+", "+b+")";
  }

  return arr;
}

function pickColor(colors)
{
  var num = Math.floor(Math.random() * colors.length);
  return num;
}

var pickedColor = '';
var colorTile = document.querySelectorAll(".colorTile");
function newGame()
{
  var colors = getRandomColor();
  pickedColor = colors[pickColor(colors)];
  console.log(pickedColor);
  console.log(colors);

  var rgbDisplay = document.querySelector("#rgbDisplay");
  h1 = document.querySelectorAll("h1");

  rgbDisplay.textContent = pickedColor;
  for(var i=0; i<colorTile.length; i++)
  {
    colorTile[i].style.backgroundColor = colors[i];
    colorTile[i].removeEventListener('click', fn)
    colorTile[i].addEventListener("click", fn);

  }

}
function fn (){
      console.log(pickedColor);
      if(pickedColor === this.style.backgroundColor)
      {
        h1[1].textContent = "Correct";

        for(var j=0; j<colorTile.length; j++)
        {
          colorTile[j].style.backgroundColor = this.style.backgroundColor;
        }
      }

      else{
        h1[1].textContent = "Incorrect";
        this.style.backgroundColor = "black";
      }
    }
newGame();

var button = document.querySelectorAll("button");
button[0].addEventListener("click", function(){
  var h1 = document.querySelectorAll("h1");
  h1[1].textContent = "Click On Tile"
  newGame();
});

变量在函数内部改变其值

1 个答案: