Счетчик игр для JavaScript Rock Paper Scissors Game не работает

Question

Я создал игру Rock Paper Scissors, которая играет в 5 раундов в консоли, и сейчас пытаюсь реорганизовать ее для работы в браузере с кнопками, используя DOM-манипуляции.

Функции кнопок и раундов:

rock_btn.addEventListener('click',function(){
round('rock');
})

paper_btn.addEventListener('click',function(){
round('paper');
})

scissors_btn.addEventListener('click',function(){
round('scissors');
})


function round (playerSelection) {
let computerSelection = computerPlay();
if (playerSelection === 'rock' && computerSelection === 'scissors') {
        playerScore++
        userScore_span.innerHTML = playerScore;
        result_div.innerHTML = 'You Win\! Rock beats Scissors\!';
    } else if (playerSelection === 'scissors' && computerSelection === 'rock') {
        computerScore++;
        compScore_span.innerHTML = computerScore;
        result_div.innerHTML = 'You Lose\! Rock beats Scissors\!';
    } else if(playerSelection === 'paper' && computerSelection === 'rock') {
        playerScore++;
        userScore_span.innerHTML = playerScore;
        result_div.innerHTML ='You Win\! Paper beats Rock\!';
    } else if(playerSelection === 'rock' && computerSelection === 'paper') {
        computerScore++;
        compScore_span.innerHTML = computerScore;
        result_div.innerHTML = 'You Lose\! Paper beats Rock\!';
    } else if(playerSelection === 'scissors' && computerSelection === 'paper') {
        playerScore++;
        userScore_span.innerHTML = playerScore;
        result_div.innerHTML ='You Win\! Scissors beats Paper\!';
    } else if(playerSelection === 'paper' && computerSelection === 'scissors') {
        computerScore++;
        compScore_span.innerHTML = computerScore;
        result_div.innerHTML = 'You Lose\! Scissors beats Paper\!';
    } else {
        result_div.innerHTML = ('A draw! Please play again!');
    }
}

игровая функция, которая использовалась для подсчета раундов, сработавших при вызове в консоли, но теперь не имеет никакого эффекта:

let playerScore = 0;
let computerScore = 0;

function game () {
while (playerScore <= 5 || computerScore <= 5) {
round();
if(playerScore === 5) {
    result_div.innerHTML = 'Player Wins!!!';
}
if(computerScore === 5) {
    result_div.innerHTML = 'Computer Wins!!!';
    }
    }
}

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

Answer 1

Добро пожаловать в Stackoverflow.

Поскольку вы полагаетесь на игру, в которую играют кнопки на DOM, вам следует проверить условие выигрыша в конце нашей функции round:

Условие выигрыша:

function win_condition () {
  if(playerScore === 5) {
    result_div.innerHTML = 'Player Wins!!!';
  }
  if(computerScore === 5) {
    result_div.innerHTML = 'Computer Wins!!!';
  }
}

в вашей функции round:

...

else if(playerSelection === 'paper' && computerSelection === 'scissors') {
        computerScore++;
        compScore_span.innerHTML = computerScore;
        result_div.innerHTML = 'You Lose\! Scissors beats Paper\!';
    } else {
        result_div.innerHTML = ('A draw! Please play again!');
    }

  win_condition();
}

Вы могли бы реорганизовать немного своего кода, DRYing его вверх, возможноабстрагироваться от правил (т. е. камни выигрывают у ножниц, но проигрывают у бумаги и т. д.)Я сделал что-то подобное в другом посте. См. Этот CodePen :

• строки с 66 по 79 определяют условия победы;
• строки с 93 по 99, как он используется.

Имейте в виду, это в ReactJS , так что вам придется применять его немного по-другому, но принцип остается неизменным: абстрагируйте логику и высушите ваш код.

(Кстати:глобальное изменяемое состояние в конечном итоге укусит вас, вы значительно улучшите свой код, сделав свои функции чистыми )