Question

所以我在Udemy上做了一个练习，要求我创建一个得分守护者应用程序。

“玩到：5”表示获胜分数
输入字段会更改获胜分数
播放器1按钮增加左侧的分数。当它达到获胜分数时，该值变为绿色并且游戏结束。
播放器2按钮增加右侧的分数。当它达到获胜分数时，该值变为绿色并且游戏结束。
重置按钮可重置游戏，并从两个玩家的0开始。
如果获胜得分在游戏中途改变（即得分不为0），则得分将重置为0，“播放到：”值将根据输入字段中输入的内容而改变。 / LI>

问题：我创建了一个函数声明（称为incremenet（）），它将能够执行增加玩家1和玩家2的分数的类似任务。它需要1个参数，这将是球员（p1Score或p2Score）。

我在玩家1上尝试过此功能，但得分不超过1！

我怀疑这与范围或提升/执行堆栈有关。使用console.log，p1Score永远不会更新。它始终为0.因此p1ScoreDisplay总是为1

最重要的是，我注意到当p1Score达到获胜分数时也会出现错误。为了使分数增加到1，我只是在事件监听器中的increment（）函数调用之前放置了“p1Score ++”。它将声明“scoreToIncrement.classList”未定义。这应该在分数中添加一类“.winner”。我相信这与范围或吊装有关。

我的理解是，由于此增量函数嵌套在事件侦听器匿名函数中，因此增量函数仍应能够调用我在开头声明的全局变量，并在执行函数后相应地更新它们。但我想我的理解不是100％就在这里。

希望有人可以在这里进一步解释错误并纠正我的理解。谢谢！将尝试继续进行故障排除和阅读（不确定闭包是否与它有关）。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Score Keeper</title>

        <style>
        .winner {
            color: green;
        }

        </style>

    <body>
    <h1><span id="h1p1Score">0</span> to <span id="h1p2Score">0</span></h1>
        <p>Playing to: <span id="winningScore">5</span></p>
        <input type="number" id="inputNum" placeholder="enter max playing number">
        <button id="P1">Player One</button>
        <button id="P2">Player Two</button>
        <button id="Reset">Reset</button>
        <script src="scoreKeeper.js"></script>
    </body>
</html>

下面是javascript

 var p1Button = document.querySelector("#P1");
    var p2Button = document.querySelector("#P2");
    var resetButton = document.querySelector("#Reset");
    var p1ScoreDisplay = document.querySelector("#h1p1Score");
    var p2ScoreDisplay = document.querySelector("#h1p2Score");
    var inputValue = document.querySelector("#inputNum");
    var p1Score = 0;
    var p2Score = 0;
    var gameOver = false;
    var winningScore = 5;
    var displayWinningScore = document.querySelector("#winningScore");

    function increment(scoreToIncrement,scoreDisplay) {

        if (!gameOver) {

            scoreToIncrement++;

            if (scoreToIncrement === winningScore) {

                scoreToIncrement.classList.add("winner");
                gameOver = true;
            }


            scoreDisplay.textContent = scoreToIncrement;
        }
    }

    p1Button.addEventListener("click", function () {
        increment(p1Score);

        /* This is the original code i have commented out and replaced with the increment function above

        if (!gameOver) {
        p1Score++;
        if (p1Score === winningScore) {
          console.log("Game Over!");
          p1ScoreDisplay.classList.add("winner");
          gameOver = true;
        }
        p1ScoreDisplay.textContent = p1Score;
      }
      */

    });

    p2Button.addEventListener("click", function () {
    /*Same function as the one above but using variables related to player 2 instead*/
        if (!gameOver) {
            p2Score++;
            if (p2Score === winningScore) {
                console.log("Game Over!");
                p2ScoreDisplay.classList.add("winner");
                gameOver = true;
            }
            p2ScoreDisplay.textContent = p2Score;
        }
    });

    function reset() {
        p1Score = 0;
        p1ScoreDisplay.textContent = p1Score;
        p1ScoreDisplay.classList.remove("winner");

        p2Score = 0;
        p2ScoreDisplay.textContent = p2Score;
        p2ScoreDisplay.classList.remove("winner");

        gameOver = false;

        inputValue.value = "";
    }

    resetButton.addEventListener("click", reset);

    inputValue.addEventListener("change", function () {
        winningScore = Number(this.value);
        displayWinningScore.textContent = this.value;
        reset();
    });

Answer 1

下面的最新javascript代码显示了我的问题的答案。我没有使用变量，而是使用对象来允许它们变异（更改/更改）。

我最初无法更改数字变量的原因是因为称为“通过共享呼叫”。它涉及按值传递数字（原始数据类型）并通过引用传递对象或数组（非原始数据类型）。请参阅以下链接以获得更好的解释。如果没有，您可以随时谷歌搜索或维基搜索“通过共享javascript呼叫”

https://medium.com/@arunk.s/javascript-and-call-by-sharing-71b30e960fd4

我为对象使用了许多不同的变量名。当然，人们只能使用一个对象来包含游戏的所有不同参数。例如，你可以创建像下面这样的对象（我的粗略解决方案中没有使用它）。

var gameParameters = {
    p1Score: 0,
    p2Score: 0,
    p1ScoreDisplay: document.querySelector("#h1p1Score"),
    p2ScoreDisplay: document.querySelector("#h1p2Score")
    .
    .
    .etc etc
}

这是我的肮脏/粗糙的解决方案

var p1Button = document.querySelector("#P1");
var p2Button = document.querySelector("#P2");
var resetButton = document.querySelector("#Reset");

/*
var p1ScoreDisplay = document.querySelector("#h1p1Score");
var p2ScoreDisplay = document.querySelector("#h1p2Score");
*/
var p1ScoreDisplay = {
    scoreDisplay: document.querySelector("#h1p1Score")
};

var p2ScoreDisplay = {
    scoreDisplay: document.querySelector("#h1p2Score")
};
var inputValue = document.querySelector("#inputNum");
/*
var p1Score = 0;
var p2Score = 0;
*/

var p1Score = {
    score: 0
};

var p2Score = {
    score: 0
};

/*
var gameOver = false;
*/

var isGameOver = {
    gameOver: false
};

var winningScore = 5;
var displayWinningScore = document.querySelector("#winningScore");

/*function to increase the score of player 1 and player 2*/
function increment(scoreToIncrement,gameOverCheck,scoreToDisplay) {

    if (!gameOverCheck.gameOver) {

        scoreToIncrement.score++;

        if (scoreToIncrement.score === winningScore) {

            scoreToDisplay.scoreDisplay.classList.add("winner");
            console.log("Game Over!");
            gameOverCheck.gameOver = true;
        }

        scoreToDisplay.scoreDisplay.textContent = scoreToIncrement.score;
    }
}

p1Button.addEventListener("click", function () {

    increment(p1Score,isGameOver,p1ScoreDisplay);

    /*original code to increase the score of player 1
    if (!gameOver) {
    p1Score++;
    if (p1Score === winningScore) {
      console.log("Game Over!");
      p1ScoreDisplay.classList.add("winner");
      gameOver = true;
    }
    p1ScoreDisplay.textContent = p1Score;
  }
  */

});

p2Button.addEventListener("click", function () {
    increment(p2Score,isGameOver,p2ScoreDisplay);

    /*original code to increase the score of player 2
    if (!isGameOver.gameOver) {
        p2Score.score++;
        if (p2Score.score === winningScore) {
            console.log("Game Over!");
            p2ScoreDisplay.scoreDisplay.classList.add("winner");
            isGameOver.gameOver = true;
        }
        p2ScoreDisplay.scoreDisplay.textContent = p2Score.score;
    }
    */
});

function reset() {
    p1Score.score = 0;
    p1ScoreDisplay.scoreDisplay.textContent = p1Score.score;
    p1ScoreDisplay.scoreDisplay.classList.remove("winner");

    p2Score.score = 0;
    p2ScoreDisplay.scoreDisplay.textContent = p2Score.score;
    p2ScoreDisplay.scoreDisplay.classList.remove("winner");

    isGameOver.gameOver = false;

    inputValue.value = "";
}

resetButton.addEventListener("click", reset);

inputValue.addEventListener("change", function () {
    winningScore = Number(this.value);
    displayWinningScore.textContent = this.value;
    reset();
});

javascript：在匿名函数中使用函数和全局变量（addEventListener）

1 个答案: