How to change the value of a global varibale in javascript?

Question

I have been working on some code for a game which I have tried to add states to. I set a global variable "gameState", and I want to change the value of that global variable once a certain thing is selected by the player. For some reason, my global variable will not change when the player makes their selection. :/

Below is a shortened version of my code only containing Algeria as an example. When the character goes over the Algerian flag on the canvas and hits enter, I want to switch to state 2. Instead, nothing happens. The code continues to run state 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

You basically have this:

var gameState = 0;

if(gameState === 1) {

    // never called since gameState = 0

}

if(gameState ===2) {

   // never called since gameState = 0
}

Which is probably not want you want. If you aren't familiar with the Javascript debugger, you might want to look up a tutorial on how to use it. You would see that none of your code is being called at the moment.

Even if you modify it to this:

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
}

It still will never execute since the gameState===2 if statement will be executed immediately (since it is synchronous) before anything is executed with the requestAnimationFrame callback (since that is done asyncronously).