暂时关闭点击事件侦听器（Color Picker Game） [英] Disable click event listener of square temporally (Color Picker Game)

问题描述

我正在使用 RGB 颜色选择器游戏。
游戏生成 6 颜色正方形的随机网格，如果播放器从网格中选择正确的RGB颜色，则从这6个正方形中选择随机RGB颜色 6 正方形转成这种颜色，他赢了一轮，但是如果他从网格中选择颜色隐藏的任何不正确的颜色。隐藏它的逻辑，我只是​​将颜色变为与背景颜色相同。

I am working on RGB color picker game. the game generate random grid of 6 color squares and pick a random RGB color from these 6 color squares if the player choose the correct picked RGB color from the grid all 6 squares turned to this color and he won the round but if he choose any incorrect color from grid the color is hiding. logic of hiding it i simply turned the color to be same as the background color.

我添加到每个平方的网格点击事件listener.my问题，我想要这个事件听众在每一轮游戏中只能工作1次，所以如果播放器选择错误的颜色，颜色正方形是隐藏的，并且点击事件监听器在时间上也被禁用，如果他点击了正确的颜色点击事件监听器应该被禁用。

I added to each square of grid click event listener.my problem that i want this event listener to work only 1 time in each round of the game so if player choose wrong color the color square is hiding and click event listener is disabled temporally also the same if he clicked the right color click event listener should be disabled.

如果有另一个好方法来隐藏错误的选定方形颜色请提及。

游戏界面如下所示：

此代码块问题：

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!";
        }
    });
}

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

any suggested help would be appreciated.

推荐答案

在寻找解决问题的方法之后， Alon Eitan 的帮助我找到一种方法，使点击事件监听器的Square工作只有一次触发它。我只需要添加另一个参数到$ code> addEventListener（）这是 {once：true} 所以它按预期工作。

After searching for solution to my problem and with Alon Eitan's help I found a way to make click event listener for square work only once after trigger it.I just need to add another argument to addEventListener() which is {once:true}so it worked as expected.

我还发现了另一种方法来隐藏广告而不改变它点击错误颜色方块后，界面上的位置：

also I found another method to hide square without changing its position on interface after wrong color square is clicked:

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

建议使用 removeEventListener（）禁用平方点击事件，但在我的情况下它是低效的，因为我在每个广场的 addEventListener（）上使用匿名函数。

some comments suggested to use removeEventListener()to disable square click event but in my case it's inefficient because I use anonymous function on addEventListener()for each square.

W3Schools 提及注意：

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

To remove event handlers, the function specified with the addEventListener() method must be an external function.

匿名函数，如$ code> element.removeEventListener（event，
function（）{myScript}）; 将无法正常工作。

Anonymous functions, like "element.removeEventListener("event", function(){ myScript });" will not work.

这篇关于暂时关闭点击事件侦听器（Color Picker Game）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！