時間的に四角形のクリックイベントリスナーを無効にする（カラーピッカーゲーム）

Question

私はRGBカラーピッカーゲームで取り組んでいます。 ゲームで6の色の四角形のランダムグリッドが生成され、グリッドから正しく選択されたRGB色を選択すると、これらの6色の四角形からランダムなRGB色が選択されます6すべての色がこの色に変わり、色が隠れているグリッドからの色が正しくありません。それを隠すロジックは、単に色を背景色と同じにしました。

私はこのイベントリスナーがゲームの各ラウンドで1回だけ動作するようにグリッドクリックイベントlistener.my問題を追加しました。プレーヤーが間違った色を選択した場合、色の四角は隠れてイベントリスナーがクリックされます一時的に無効にされている場合は、右クリックイベントリスナーをクリックしても無効にする必要があります。

間違った選択された正方形の色を隠す別の良い方法がある場合は、それに言及してください。

ゲームのインターフェイスの外観のように：

この問題のコードのブロック：

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の助けを借りて解決策を探した後、私は一度だけ、トリガ後it.Iはちょうどので、それが働いた{once:true}あるaddEventListener()に別の引数を追加する必要が正方形の仕事のためのイベントリスナーをクリックして作成する方法を見つけました予想通り。間違った色の四角形がクリックされた後

も私は、インターフェイス上でその位置を変えずに、正方形を非表示にするには、別の方法を見つけました：

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

コード・ソリューション：いくつかのコメントを無効にするには、removeEventListener()を使用することが提案

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

正方形のクリックイベントが発生しますが、私の場合は、それぞれの正方形に対してaddEventListener()の匿名関数を使用するため、非効率です。この場合に注言及

W3Schoolsの：

イベントハンドラを削除するには、 addEventListener()方法で指定された関数は、外部関数でなければなりません。

「element.removeEventListener("event", function(){ myScript });」のような匿名関数は機能しません。