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

Question

我创建了一个在控制台中玩 5 轮的 Rock Paper Scissors 游戏，现在我正在尝试将其重构为在带有按钮的浏览器中使用 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 重构您的一些代码，也许将规则抽象掉（即石头战胜剪刀但输给纸等）
我在另一个帖子上做了类似的事情。 See this CodePen:

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

请注意，它位于 ReactJS，因此您需要稍微不同地应用它，但原则不变：抽象逻辑并干燥您的代码。

（顺便说一句：全局可变状态最终会咬你一口，making your functions pure 会大大改进你的代码）