Rock Paper Scissors：如何禁用按鈕來結束游戲？

Question

我想在用戶或計算機達到 5 分后禁用按鈕。 我一直在嘗試刪除石頭、紙和剪刀 div 的事件偵聽器，其中它在贏/輸函數中顯示“if userScore===5”和“compScore===5”，但它不起作用。 我見過人們禁用按鈕來結束游戲，但我的“按鈕”是 div 中的圖像，我添加了一個點擊事件偵聽器，所以我認為這在我的情況下不起作用。

let userScore = 0;
let compScore = 0;

const userScore_span = document.getElementById("user-score");
const compScore_span = document.getElementById("comp-score");
const scoreBoard_div = document.querySelector(".score-board");
const result_p = document.querySelector(".result > p");
const rock_div = document.getElementById("r");
const paper_div = document.getElementById("p");
const scissors_div = document.getElementById("s");

//Gets random selection from computer 
function getComputerSelection() {
    const choices=['r','p','s'];
    const result = Math.floor(Math.random()*3);
    return choices[result]
} 
//Converts r,p,s to rock, paper, scissors for output on screen
function convertToWord(letter) {
    if (letter === 'r') return "Rock";
    if (letter === 'p') return "Paper";
    return "Scissors";
}

function win(playerSelection, computerSelection) {
    userScore++;
    userScore_span.innerHTML = userScore;
    compScore_span.innerHTML = compScore;

    if (userScore < 5){result_p.innerHTML = `${convertToWord(playerSelection)} beats ${convertToWord(computerSelection)}. You win! =D`;
    }else if(userScore===5){result_p.innerHTML='Game over, you win! Refresh to play again';
 rock_div.removeEventListener('click', () => game("r"));
 
 paper_div.removeEventListener('click', () => game("p"));
 
 scissors_div.removeEventListener('click', () => game("s"));
    
  } 
}


function lose(playerSelection, computerSelection) {
    compScore++;
    userScore_span.innerHTML = userScore;
    compScore_span.innerHTML = compScore;
    
    if (compScore<5){result_p.innerHTML = `${convertToWord(computerSelection)} beats ${convertToWord(playerSelection)}. You lose =(`;
    }else if(compScore===5){result_p.innerHTML='Game over, you lose! Refresh to play again';
 rock_div.removeEventListener('click', () => game("r"));
 
 paper_div.removeEventListener('click', () => game("p"));
 
 scissors_div.removeEventListener('click', () => game("s"));
    
  }
}

function draw() {
    userScore_span.innerHTML = userScore;
    compScore_span.innerHTML = compScore;
    result_p.innerHTML = `It\'s a tie!`;
}

function game(playerSelection) {
    const computerSelection = getComputerSelection();
    
    if (playerSelection === computerSelection) {
        draw(playerSelection, computerSelection);
      } else if (playerSelection === 'r' && computerSelection === 's'){
        win(playerSelection, computerSelection);  
      }else if (playerSelection === 'p' && computerSelection === 'r'){
        win(playerSelection, computerSelection);
      }else if (playerSelection === 's' && computerSelection === 'p'){
        win(playerSelection, computerSelection);
      }else{
        lose(playerSelection, computerSelection);
      }      
    }  

  //Links images to game play  
 rock_div.addEventListener('click', () => game("r"));
 
 paper_div.addEventListener('click', () => game("p"));
 
 scissors_div.addEventListener('click', () => game("s"));
 

Answer 1

您可以通過刪除事件偵聽器來“禁用”按鈕。

首先，您需要您的事件偵聽器 function 是單個 function ，如下所示：

function handleRock() {
  game("r");
}

然后，您可以使用 addEventListener 添加偵聽器並使用 removeEventListener 將其刪除，如下所示：

rock_div.addEventListener('click', handleRock);

// And when you're ready to disable the rock button:
rock_div.removeEventListener('click', handleRock);

注意：要使 removeEventListener 工作，其 arguments 必須與添加事件偵聽器的arguments完全相同。 function 必須與function 相同，而不僅僅是相同的。