title: How to change the value of a global varibale in javascript?
body: <p>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. :/</p>
  
  <p>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.</p>
  
  <pre><code>// 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 &gt;= canvas.width - characterImage.width) {
              character.x = canvas.width - characterImage.width;
          }
          else if (character.x &lt;= 0) {
              character.x = 0;
          }
          if (character.y &gt;= canvas.height - characterImage.height) {
              character.y = canvas.height - characterImage.height;
          }
          else if (character.y &lt;= 0) {
              character.y = 0;
          }
  
          //Checks If Character Is Over Algeria
          if (
              character.x &lt;= (falgeria.x + 30)
              &amp;&amp; falgeria.x &lt;= (character.x + 30)
              &amp;&amp; character.y &lt;= (falgeria.y + 30)
              &amp;&amp; falgeria.y &lt;= (character.y + 30)
          ) {
              falgeriaText = 1
          }
          else {
              falgeriaText = 0
          }
          if (
              character.x &lt;= (falgeria.x + 30)
              &amp;&amp; falgeria.x &lt;= (character.x + 30)
              &amp;&amp; character.y &lt;= (falgeria.y + 30)
              &amp;&amp; falgeria.y &lt;= (character.y + 30)
              &amp;&amp; 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")
  }
  </code></pre>