时间戳

首页 > 解决方案 > 记分员不会止步于得分

javascript - 记分员不会止步于得分

问题描述

我一直在构建一个记分器作为一个有趣的项目，但是当我试图让它在游戏的获胜分数处停止时，它并没有停止。任何帮助，将不胜感激！

var playerOne = document.querySelector("#p1")
var playerTwo = document.querySelector("#p2")
var playerOneScore = 0
var playerTwoScore = 0
var score1 = document.querySelector("#Score1")
var score2 = document.querySelector("#Score2")
var gameOver = false;
var winningScore = 5

playerOne.addEventListener("click", function(){
    if(!gameOver){
    playerOneScore++
    if(playerOneScore === winningScore){
        gameover = true;
    }
    score1.textContent = playerOneScore;
    }
});

playerTwo.addEventListener("click", function(){
    if(!gameOver){
    playerTwoScore++
    if(playerTwoScore === winningScore){
        gameover = true;
    }
    score2.textContent = playerTwoScore;
    }
});
    <h1><span id="Score1">0</span> to <span id="Score2">0</span></h1>

    <p>Playing to: 5</p>

    <input type="number" id="winningScore">
    <button id="p1">Player One</button>
    <button id="p2">Player Two</button>
    <button id="reset">Reset</button>
    <script src="index.js"></script>

标签： javascripthtml

解决方案

看看你的 gameover 和 gameOver 变量......应该是

gameOver=true

 if (!gameOver) {
   playerOneScore++
   if (playerOneScore === winningScore) {
     gameOver = true;
   }
   score1.textContent = playerOneScore;
 }

此外，这应该看起来更好，更易读......考虑重构你的 eventListener 回调实现。同样适用于其他玩家。

playerOne.addEventListener("click", function() {
  if (gameOver) return;
  playerOneScore++

  gameOver = playerOneScore === winningScore;
  score1.textContent = playerOneScore;

});

推荐阅读