JavaScript Rock Paper Scissors游戏的游戏计数器无法正常工作

J.Day 发表于 Dev

戴

我创建了一个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!!!';
    }
    }
}

有人可以告诉我如何将游戏功能插入序列中以便计数器工作吗？

苏米·斯特莱斯

欢迎使用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();
}

您可以通过将其干燥来重构您的代码，也许可以将规则抽象化（例如，石头在剪刀上赢了，但在纸上失败了，等等），
我在另一篇文章中做了类似的事情。看到这个CodePen：