Блог

Главная - Вопросы по программированию - Как я могу переключить один и тот же прослушиватель событий на две разные функции?

Как я могу переключить один и тот же прослушиватель событий на две разные функции?

#javascript

#javascript

Вопрос:

Я создаю одну игру, в которую могут играть два игрока, поэтому, если один игрок заканчивает свой ход, тот же прослушиватель событий должен быть присоединен к игроку tow, но это не переключение между двумя игроками.

В моем коде я создал одну переменную ‘changeTurn’, которая хранит логическое значение хода игрока, если true, то игрок один ход, а если false, то игрок два хода. но при условии, что значение 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;
    })
  }

Ответ №1:

Проблема в том, что у вас есть проверка во время настройки прослушивателя событий, но обратный вызов прослушивателя событий не выполняет никаких проверок, следовательно, запускаются оба события. Вы могли бы изменить это на:

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