激活和停用事件侦听器 JS 香草

Question

我正在创建一个有两个玩家的游戏。 这些玩家是 0,1

var activePlayer = [0,1]

根据谁处于活动状态，我想提供事件侦听器，该侦听器仅在玩家处于活动状态时激活每个玩家的控件。我尝试以下方法，但当然不起作用。

function controlGame(){
    do{
        document.querySelector('.btn-roll-0').addEventListener('click', play,);
        document.querySelector('.btn-hold-0').addEventListener('click',hold);    
    }while(activePlayer === 0)
    do{
        document.querySelector('.btn-hold-1').addEventListener('click',hold);
        document.querySelector('.btn-roll-1').addEventListener('click', play,);
    }while(activePlayer === 1)
}   

Answer 1

忽略完成演示的基架代码，并查看事件侦听器。我们仅在活动玩家正确时激活。

// This is just for the demo ignore
const play = (player) => {
  let newNum = Date.now();
  setOut(`Role ${newNum} for Player ${player}`);
};
// This is just for the demo ignore
const hold = (player) => {
  setOut(`hold for ${player}`);
};
// This is just for the demo ignore
const setOut = (msg) => {
  document.querySelector('#out').innerText = msg;
};
let isActivePlayer = false;
// Here we add event listeners that toggle based on active player.
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.btn-roll-0').addEventListener('click', (event) => {
    if (!isActivePlayer) play(0);
  });
  document.querySelector('.btn-hold-0').addEventListener('click', (event) => {
    if (!isActivePlayer) hold(0);
  });
  document.querySelector('.btn-roll-1').addEventListener('click', (event) => {
    if (isActivePlayer) play(1);
  });
  document.querySelector('.btn-hold-1').addEventListener('click', (event) => {
    if (isActivePlayer) hold(1);
  });
  document.querySelector('.btn-switch-plyr').addEventListener('click', (event) => {
    isActivePlayer = !isActivePlayer;
  });
});

<button class="btn-roll-0">Player 1 Roll</button>
<button class="btn-hold-0">Player 1 Hold</button>
<button class="btn-roll-1">Player 2 Roll</button>
<button class="btn-hold-1">Player 2 Hold</button>
<button class="btn-switch-plyr">Switch Player</button>
<div id="out">
  <div>