时间戳

首页 > 解决方案 > 如何将相同的事件侦听器切换到两个不同的功能？

javascript - 如何将相同的事件侦听器切换到两个不同的功能？

问题描述

我正在制作一款可以由两名玩家玩的游戏，所以如果一名玩家完成了他的回合，同一个事件监听器应该附加到玩家拖曳，但它不会在两名玩家之间切换。

在我的代码中，我创建了一个变量“changeTurn”，它存储玩家回合的布尔值，如果为真，则为玩家一回合，如果为假，则为玩家两回合。但如果条件 changeTurn 值为 false ，它仍然执行不应执行的 'If(changeTurn === true)'。有人可以帮我解决这个问题吗？为什么会这样？

GAME RULES:

- The game has 2 players, playing in rounds
- In each turn, a player rolls a dice as many times as he whishes. Each 
  result get added to his ROUND score
- BUT, if the player rolls a 1, all his ROUND score gets lost. After that, 
  it's the next player's turn
- The player can choose to 'Hold', which means that his ROUND score gets 
  added to his GLBAL score. After that, it's the next player's turn
- The first player to reach 100 points on GLOBAL score wins the game.


*/

const rollDice = document.querySelector('.btn-roll');
const diceImage = document.querySelector('.dice');
const hold = document.querySelector('.btn-hold');
const newGame = document.querySelector('.btn-new');

let changeTurn = true;
let randomNumber = 0;
let loop = true;

let totalScore = 0;
document.querySelector('#score-0').textContent = totalScore;
document.querySelector('#score-1').textContent = totalScore;


let currentScore = 0;
document.querySelector('#current-0').textContent = currentScore;
document.querySelector('#current-1').textContent = currentScore;

//while(loop){

  //newGame.addEventListener('click',function(){
 //   loop = false;
  //})

  if(changeTurn){
    rollDice.addEventListener('click',function(){
      randomNumber = Math.floor((Math.random()*6)+1);

      for(i = 1; i <=6 ; i++){            // selecting image by changing src name
        console.log(randomNumber);
        if(randomNumber === i ){
          diceImage.setAttribute('src',`dice-${i}.png`);
          break;
        }
      }
      currentScore += randomNumber;
      document.querySelector('#current-0').textContent = currentScore; // adding current score to player-1
    
      if(randomNumber === 1){
        document.querySelector('#current-0').textContent = 0;  //reseting player-1 current score cotent to 0
        currentScore = 0;                                      //reseting current score variable to 0
        changeTurn = false;
      }
      
    })

    hold.addEventListener('click',function(){
      totalScore += currentScore;                                  // adding total score to toatal variable
      document.querySelector('#score-0').textContent = totalScore; // adding total to score content
      document.querySelector('#current-0').textContent = 0;        // reseting current score content to 0
      currentScore = 0;      // resetting current score variable
      changeTurn = false;   //changning turn
    })
  }
//============================================================================
  if(!changeTurn){
    rollDice.addEventListener('click',function(){
      randomNumber = Math.floor((Math.random()*6)+1);

      for(i = 1; i <=6 ; i++){            // selecting image by changing src name
        console.log(randomNumber);
        if(randomNumber === i ){
          diceImage.setAttribute('src',`dice-${i}.png`);
          break;
        }
      }
      currentScore += randomNumber;
      document.querySelector('#current-1').textContent = currentScore;
    
      if(randomNumber === 1){
        document.querySelector('#current-1').textContent = 0;
        currentScore = 0;
        changeTurn = true;
      }
      
    })

    hold.addEventListener('click',function(){
      console.log('hi')
      totalScore += currentScore;
      document.querySelector('#score-1').textContent = totalScore;
      document.querySelector('#current-1').textContent = 0;
      currentScore = 0;
      changeTurn = true;
    })
  }

标签： javascript

解决方案

问题是您在设置事件侦听器期间进行了检查，但事件侦听器的回调没有进行任何检查，因此这两个事件都被触发了。您可以将其更改为：

rollDice.addEventListener('click',function(){
  randomNumber = Math.floor((Math.random()*6)+1);

  for(i = 1; i <=6 ; i++){            // selecting image by changing src name
    console.log(randomNumber);
    if(randomNumber === i ){
      diceImage.setAttribute('src',`dice-${i}.png`);
      break;
    }
  }
  var id = changeTurn? 0: 1;
  currentScore += randomNumber;
  document.querySelector(`#current-${id}`).textContent = currentScore; // adding current score to player-1

  if(randomNumber === 1){
    document.querySelector(`#current-${id}`).textContent = 0;  //reseting player-1 current score content to 0
    currentScore = 0;                                      //reseting current score variable to 0
    changeTurn = !changeTurn;
  }

})

hold.addEventListener('click',function(){
  var id = changeTurn? 0: 1;
  totalScore += currentScore;                                  // adding total score to total variable
  document.querySelector(`#score-${id}`).textContent = totalScore; // adding total to score content
  document.querySelector(`#current-${id}`).textContent = 0;        // reseting current score content to 0
  currentScore = 0;      // resetting current score variable
  changeTurn = !changeTurn;   //changing turn
})

推荐阅读