JavaScript石头剪纸游戏的游戏计数器不工作

我已经创建了一个在控制台上玩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!!!';
    }
    }
}

让playerScore=0；
让计算机得分=0；
函数游戏（）{
while（playerScore欢迎来到Stackoverflow

由于您依赖于使用DOM上的按钮玩游戏，因此您应该在
回合结束时检查获胜条件
函数：

...

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

获胜条件：

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

在
轮中
功能：

...

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

通过它，您可以重构一部分代码，或许可以将规则抽象出来（例如，岩石队战胜剪刀队，但在纸上输了，等等）

我在另一篇文章中做了类似的事情


第66至79行定义了获胜条件
第93行到第99行如何使用

请注意，它在中，因此您需要以不同的方式应用它，但原则是：将逻辑抽象出来，并使代码干涸

（顺便说一句：全局可变状态最终会咬到你，这样你的代码会改进很多）
不客气。如果答案解决了您的问题，您可以接受。请参阅我的参考资料。谢谢您，我一直在考虑开关语句，但我更关心的是先让它工作！非常同意干燥，但我对此有点陌生，您有什么文章或资源可以推荐给我们吗n这只是为了提供一个像样的参考框架？这很好：首先是KISS方法（即使其工作），然后是优化。这是一种反模式。我会尝试在您的示例中首先使用更多函数，然后尝试使它们纯粹（即，您使用的所有函数都必须作为参数传递，以便快速地说出，但您应该阅读我引用的）。这本书读得也不错。我还将介绍一种现代JS框架，并尝试另一种现代前端框架ReactJS。