title: JavaScript not working when split into sub- functions
body: <p>I've written a game in JavaScript.It worked, but now I'm trying to make my code more reusable and easier to debug, by splitting it up into smaller functions and files.Below is the play function, that is repeatedly called within a game loop:</p>
  
  <pre><code>   function play(deltaTime) {
  
          if (gameScene.visible == true) {
  
              explorer.x += explorer.vx * deltaTime;
              explorer.y += explorer.vy * deltaTime;
  
              //Contain the explorer inside the area of the dungeon
              contain(explorer, {
                  x: 1,
                  y: 1,
                  width: canvasWidth,
                  height: canvasHeight
              });
  
              var explorerHit = false;
  
              makeEnemiesMove();
  
              //##############################################################################
  
              //If the explorer is hit...
              if (explorerHit) {
  
                  if (!damageSound.playing()) {
                      damageSound.play();
  
                  }
  
                  //Make the explorer semi-transparent
                  explorer.alpha = 0.5;
  
                  //Reduce the width of the health bar's inner rectangle by 1 pixel
                  healthBar.outer.width -= 1;
              } else {
                  //Make the explorer fully opaque (non-transparent) if it hasn't been hit
                  explorer.alpha = 1;
              }
  
             //################################################################
  
              //Does the explorer have enough health? If the width of the `innerBar`
              //is less than zero, end the game and display "You lost!"
              if (healthBar.outer.width &lt; 0) {
  
                  gameOverSound.play();
              }
              //Check for a collision between the explorer and the treasure
              if (hitTestRectangle(explorer, treasure)) {
                  //If the treasure is touching the explorer, center it over the explorer
                  treasure.x = explorer.x + 8;
                  treasure.y = explorer.y + 8;
  
               if (carrying &lt; 1) { 
  
                      pickUpSound.play();
  
                      carrying = 1;
                  }
  
              }
  
              //If the explorer has brought the treasure to the exit,
              //end the game and display "You won!"
              if (hitTestRectangle(treasure, door)) {
  
                  victorySound.play();
  
                  state = end;
              }
  
          }
  
  
        }
  </code></pre>
  
  <p>This code works. But when I try to put a section of the code (the section that falls inside  the lines made out of hashtags) inside a separate function, stored in a separate file, and then proceed to call that function within this file, I get the following error:</p>
  
  <pre><code>     Uncaught ReferenceError: explorerHit is not defined
  
  The function I made to run this bit of code looks like this:
  
  function checkForPlayerDamage() {
      //If the explorer is hit...
          if (explorerHit) {
  
              if (!damageSound.playing()) {
                  damageSound.play();
  
              }
  
  
              //Make the explorer semi-transparent
              explorer.alpha = 0.5;
              //Reduce the width of the health bar's inner rectangle by 1 pixel
              healthBar.outer.width -= 1;
          } else {
              //Make the explorer fully opaque (non-transparent) if it hasn't been hit
              explorer.alpha = 1;
          }
  
      }
  </code></pre>
  
  <p>I have tried to call it within the original file as follows:</p>
  
  <p>checkForPlayerDamage();</p>
  
  <p>The explorerHitVariable, referred to in the error message, is defined just before this function is called, as follows:</p>
  
  <p>The relevant files are referenced in the index file as follows:</p>
  
  <pre><code>    var explorerHit = false;
  
      makeEnemiesMove();
  
      checkForPlayerDamage();
  </code></pre>
  
  <p>The relevant JavaScript files are referred to in the index file, as follows:    </p>
  
  <pre><code>&lt;script language="JavaScript" type="text/javascript" src="gameScene/checkForPlayerDamage.js"&gt;&lt;/script&gt;
  
  &lt;script language="JavaScript" type="text/javascript" language="JavaScript" type="text/javascript" src="play.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Any help would be much appreciated.</p>