javascript - 如何改变javascript中全局变量的值？

Question

我一直在为一个游戏编写一些代码，并尝试向其中添加状态。我设置了一个全局变量“gameState”，并且我想在玩家选择某个事物后更改该全局变量的值。由于某种原因，当玩家做出选择时，我的全局变量不会改变。 :/

下面是我的代码的缩短版本，仅包含 Algolia 作为示例。当 Angular 色越过 Canvas 上的 Algolia 国旗并按回车键时，我想切换到状态 2。相反，什么也没有发生。代码继续运行状态1。

// The Almighty Game State
var gameState = 1;

// Creates The Canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 1200;
canvas.height = 500;
document.body.appendChild(canvas);

//-------------------------(GAME STATE 1)-------------------------//

if (gameState === 1) {

    //---------------(IMAGE RESOURCES)---------------//

    // Loads Character Image
    var characterReady = false;
    var characterImage = new Image();
    characterImage.onload = function () {
        characterReady = true;
    };
    characterImage.src = "images/character.png";

    // Loads Background Image 1
    var background1Ready = false;
    var background1Image = new Image();
    background1Image.onload = function () {
        background1Ready = true;
    };
    background1Image.src = "images/background1.png";

    // Loads Algeria Flag Image
    var falgeriaReady = false;
    var falgeriaImage = new Image();
    falgeriaImage.onload = function () {
        falgeriaReady = true;
    };
    falgeriaImage.src = "images/falgeria.png";

    //---------------(GAME OBJECTS/VARIABLES)---------------//

    var action = 0;
    var character = {
       speed: 250
    };
    var falgeriaText = 0;
    var falgeria = {};
    falgeria.x = 570;
    falgeria.y = 180;

    //---------------(GAME FUNCTIONS)---------------//

    // Resets Character To Center
    var reset = function () {
        character.x = canvas.width / 2;
        character.y = canvas.height / 2;
    };

    // Checks For Key Inputs
    var keysDown = {};

    addEventListener("keydown", function (e) {
        keysDown[e.keyCode] = true;
    }, false);

    addEventListener("keyup", function (e) {
        delete keysDown[e.keyCode];
    }, false);

    //---------------(UPDATE GAME OBJECTS)---------------//

    var update = function (modifier) {

        // Establishes Keyboard Controls
        if (38 in keysDown) { // Player Holding Up Key
        character.y -= character.speed * modifier;
        }
        if (40 in keysDown) { // Player Holding Down Key
            character.y += character.speed * modifier;
        }
        if (37 in keysDown) { // Player Holding Left Key
            character.x -= character.speed * modifier;
        }
        if (39 in keysDown) { // Player Holding Right Key
            character.x += character.speed * modifier;
        }
        if (87 in keysDown) { // Player Holding W Key
            character.y -= character.speed * modifier;
        }
        if (83 in keysDown) { // Player Holding S Key
            character.y += character.speed * modifier;
        }
        if (65 in keysDown) { // Player Holding A Key
            character.x -= character.speed * modifier;
        }
        if (68 in keysDown) { // Player Holding D Key
            character.x += character.speed * modifier;
        }
        if (13 in keysDown) { // Player Holding Enter Key
            action = 1;
        }
        else {
            action = 0;
        }

        // Creates Borders Around Canvas
        if (character.x >= canvas.width - characterImage.width) {
            character.x = canvas.width - characterImage.width;
        }
        else if (character.x <= 0) {
            character.x = 0;
        }
        if (character.y >= canvas.height - characterImage.height) {
            character.y = canvas.height - characterImage.height;
        }
        else if (character.y <= 0) {
            character.y = 0;
        }

        //Checks If Character Is Over Algeria
        if (
            character.x <= (falgeria.x + 30)
            && falgeria.x <= (character.x + 30)
            && character.y <= (falgeria.y + 30)
            && falgeria.y <= (character.y + 30)
        ) {
            falgeriaText = 1
        }
        else {
            falgeriaText = 0
        }
        if (
            character.x <= (falgeria.x + 30)
            && falgeria.x <= (character.x + 30)
            && character.y <= (falgeria.y + 30)
            && falgeria.y <= (character.y + 30)
            && action === 1
        ) {
            gameState = 2;
        }
    };

    //---------------(DRAW TO CANVAS)---------------//

    var render = function () {

        if (background1Ready) {
            ctx.drawImage(background1Image, 0, 0);
        }
        if (falgeriaText === 0) {
                ctx.font = "24px Helvetica";
                ctx.fillStyle = "rgb(0, 0, 0)";
                ctx.textAlign = "center";
                ctx.fillText("Select A Country To Grow Your Potato In", 600, 450);
        }
        if (falgeriaReady) {
            ctx.drawImage(falgeriaImage, 570, 180);
        }
        if (falgeriaText === 1) {
            ctx.fillText("Algeria  |  Press [ENTER] To Select", 600, 450);
        }
        if (characterReady) {
            ctx.drawImage(characterImage, character.x, character.y);
        }
    };

    //---------------(Loop)---------------//
    var main = function () {

            var now = Date.now();
            var delta = now - then;
            update(delta / 1000);
            render();
            then = now;
            requestAnimationFrame(main);
    };

    var w = window;
    requestAnimationFrame = 
    w.requestAnimationFrame || 
    w.webkitRequestAnimationFrame || 
    w.msRequestAnimationFrame || 
    w.mozRequestAnimationFrame;

    var then = Date.now();
    reset();
    main();
}

if (gameState === 2) {
alert("gameState Changed")
}

Answer 1

你基本上有这个:

var gameState = 0;

if(gameState === 1) {

    // never called since gameState = 0

}

if(gameState ===2) {

   // never called since gameState = 0
}

这可能不是你想要的。如果您不熟悉 Javascript 调试器，您可能需要查找有关如何使用它的教程。您会看到目前没有任何代码被调用。

即使你修改成这样:

var gameState = 1;

if(gameState === 1) {
    requestAnimationFrame(main);  // main is called after the remaining sync code has executed
}

if(gameState ===2) {
   // never called since gameState = 1
}

它仍然永远不会执行，因为在 requestAnimationFrame 回调执行任何操作之前，gameState===2 if 语句将立即执行(因为它是同步的)(因为这是异步完成的)。