无法重置布尔值 - Javascript

Question

我再次询问有关我正在为学校开发的西蒙游戏的一些代码的另一个问题。 我将布尔值设置为 false，游戏首先检查按键，然后将值设置为 true。如果用户得到不正确的游戏顺序，它应该将值重新设置为 false。出于某种原因，我的代码没有在需要时来回更改布尔值，我不太确定为什么。

/*************VARIABLES*************/
//store colors
var buttonColors = [
    "green", //0
    "red", //1
    "yellow", //2
    "blue" //3
]
//Game Pattern Storage
var gamePattern = [ /*Added From nextSequence*/ ];
var userClicks = [ /* Added from userClickHistory*/ ];

var level = 0;
var gameOn = false;

/******************BASIC FUNCTIONS*********************/

/*AWAIT KEYPRESS TO BEGIN GAME*/
$(document).keypress(function () {
    if (!gameOn) {
        nextSequence();
        $(`#level-title`).text(`Level: ` + level);
        var gameOn = true;
    }
});

//log user clicks after nextSequence() has executed, check the userClicks vs gamePattern using checkAnswer(lastInArray)
$(`.btn`).click(function () {
    var buttonClicked = $(this).attr(`id`);
    userClicks.push(buttonClicked);
    animate(buttonClicked);
    playSound(buttonClicked);

    checkAnswer(userClicks.length - 1);
});


function checkAnswer(usersLastClick) {
    //if the gamePatterns last call is equal to the users last click
    if (gamePattern[usersLastClick] === userClicks[usersLastClick]) {
        console.log("success");
        //if the userClicks and the gamePatterns lengths are equal, call nextSequence()
        if (userClicks.length === gamePattern.length) {
            setTimeout(function () {
                nextSequence();
                //update the titles level indicator
                $(`#level-title`).text(`Level: ` + level);
            }, 1000);
        }
    } else {
        $(`#level-title`).text(`You have made it to level ` + level + '! Hit enter to try again')
        //play sound for incorrect click
        var wrongSound = new Audio('sounds/wrong.mp3');
        wrongSound.play();
        console.log("wrong")
        console.log(`[` + userClicks + `]`);
        console.log(`[` + gamePattern + `]`);
        reset();
    }

}
/************* NEXT SEQUENCE TO PROGRESS GAME *********/
function nextSequence() {
    userClicks = [];
    level++;
    console.log(level);

    randomNumber = Math.floor(Math.random() * 4)
    randomChosenColor = buttonColors[randomNumber];
    gamePattern.push(randomChosenColor);
    animate(randomChosenColor);
    playSound(randomChosenColor);
}

function reset() {
    var level = 0;
    var gamePattern = [];
    var gameOn = false;
}


/******************** SOUNDS AND ANIMATIONS*************************************/

//buttons animations
function animate(clickedButton) {
    $(`#` + clickedButton).fadeOut(100).fadeIn(100);
};

//Play a sound in correlation to randomChosenColor
function playSound(color) {
    var sound = new Audio('sounds/' + color + '.mp3');
    sound.play();
};

当我的代码运行时，内部的布尔值没有任何变化，而且我还注意到，当游戏也应该重置时，我的数组也没有被清空。当我 console.log(gameOn) 它总是返回 false，无论游戏是否正在运行。

Answer 1

在您的$(document).keypress 函数中，尝试在“gameOn = true”之前取出“var”。我认为现在就好像您正在声明一个新变量，而您确实想更改全局 gameOn var。

Answer 2

if (!gameOn) { nextSequence(); ..... var gameOn = true; }

不要再次声明 gameOn 变量。您可以直接使用变量gameOn=...，因为它是在函数的外部作用域中声明的，并且在内部作用域中可用

Answer 3

正如其他人所说，不要两次声明 gameOn，它应该可以解决。

但我一直在阅读越来越多的关于 JavaScript 中全局变量“邪恶”的文章，因为全局命名空间意味着任何东西都可以编辑这些变量，甚至是其他脚本。

很多人似乎倾向于的解决方案是将变量包装在一个对象中，如下所示：

var globals = {
buttonColors: [ "green", "red", "yellow", "blue"],
gamePattern: [ /*Added From nextSequence*/ ],
userClicks: [ /* Added from userClickHistory*/ ],
level: 0,
gameOn: false,
}

然后，只需使用“globals.buttonColors”来引用您的变量。

如果您打算保持较小的范围，则不是 100% 必要，但无论如何都是一个很好的实践。