暂时禁用正方形的点击事件监听器（颜色选择器游戏）

Question

我正在开发RGB 颜色选择器游戏。 游戏生成6颜色方块的随机网格，并从这6个颜色方块中选择一个随机RGB颜色，如果玩家从网格中选择正确选择的RGB颜色，所有6方块都变成这个颜色，他赢了这一轮，但如果他从颜色隐藏的网格中选择任何不正确的颜色。隐藏它的逻辑我只是将颜色设置为与背景颜色相同。

我添加到网格单击事件侦听器的每个正方形。我的问题是我希望此事件侦听器在游戏的每一轮中只工作 1 次，因此如果玩家选择错误的颜色，颜色方块将隐藏并且单击事件侦听器被禁用如果他点击了正确的颜色点击事件监听器应该被禁用，时间上也是一样的。

如果有其他隐藏错误选择的正方形颜色的好方法，请提及。

游戏界面如下：

这个问题的代码块：

var colors = generateRandomColors(6);

var squares = document.querySelectorAll(".square");
var pickedColor = pickColor();
var colorDisplay = document.getElementById("colorDisplay");
var messageDisplay = document.querySelector("#message");
var h1 = document.getElementsByTagName("h1")[0];
var resetBtn = document.getElementById("reset");

colorDisplay.textContent = pickedColor;

// add click listener to new colors button
resetBtn.addEventListener("click",function(){
       reset();
});

for (var i = 0; i < squares.length; i++) {
    // add intial colors to squares
     squares[i].style.backgroundColor = colors[i];  
    // add click listeners to squares
    squares[i].addEventListener("click",function(){
        // grab color of clicked square
        var clickedColor = this.style.backgroundColor;
        // compare color to pickedColor
        if(clickedColor === pickedColor){
            changeColors(clickedColor);
            h1.style.backgroundColor = clickedColor;
            resetBtn.textContent = "Play Again";
            messageDisplay.textContent = "Correct!";
        }
        else{
            this.style.backgroundColor = "#232323";
            messageDisplay.textContent = "Try Again!";
        }
    });
}

任何建议的帮助将不胜感激。

Answer 1

在搜索了我的问题的解决方案并在Alon Eitan 的帮助下，我找到了一种方法，可以在触发它后只为正方形工作一次单击事件侦听器。我只需向addEventListener() 添加另一个参数，即@ 987654323@so 它按预期工作。

我还找到了另一种方法来隐藏正方形而不改变它在界面上的位置，点击错误的颜色方块后：

squares[i].style.visibility = "hidden"; 

代码解决方案：

        squares[i].addEventListener("click",function(){
        // grab color of clicked square
        var clickedColor = this.style.backgroundColor;
        // compare color to pickedColor
        if(clickedColor === pickedColor){
            changeColors(clickedColor);
            h1.style.backgroundColor = clickedColor;
            resetBtn.textContent = "Play Again";
            messageDisplay.textContent = "Correct!";
        }
        else{
            // another way to hide the square
             this.style.visibility = "hidden"; 
            //this.style.backgroundColor = "#232323";
            messageDisplay.textContent = "Try Again!";
        }
       },{once: true});

一些 cmets 建议使用 removeEventListener() 来禁用正方形点击事件，但在我的情况下，它效率低下，因为我在 addEventListener() 上为每个正方形使用匿名函数。

W3Schools 提到了关于这个案例的注释：

要删除事件处理程序，使用指定的函数 addEventListener() 方法必须是外部函数。

匿名函数，如“element.removeEventListener("event", function(){ myScript });”将不起作用。