JavaScript not working when split into sub- functions

Question

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:

   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 < 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 < 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;
            }

        }


      }

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:

     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;
        }

    }

I have tried to call it within the original file as follows:

checkForPlayerDamage();

The explorerHitVariable, referred to in the error message, is defined just before this function is called, as follows:

The relevant files are referenced in the index file as follows:

    var explorerHit = false;

    makeEnemiesMove();

    checkForPlayerDamage();

The relevant JavaScript files are referred to in the index file, as follows:

<script language="JavaScript" type="text/javascript" src="gameScene/checkForPlayerDamage.js"></script>

<script language="JavaScript" type="text/javascript" language="JavaScript" type="text/javascript" src="play.js"></script>

Any help would be much appreciated.

What errors are you getting in your browser console? "It doesn't work" doesn't provide us with any information we can use to diagnose the problem. **How** does it not work? — , Feb 06 '17 at 18:06
You've answered your own question. If you take the code between the comment markers out of the function (`play`), then that code will no longer have access to that function's local variables (`explorerHit`). You need to make data that is needed outside of a function accessible by declaring it in a higher scope. — Scott Marcus, Feb 06 '17 at 18:06
learn more about scope, your variable is local to the function `play`, if you want it to be accessed by other functions, make it global — Roljhon, Feb 06 '17 at 18:06
@Roljhon No. Don't make it global. Don't make anything global if you can help it. Just make it have a higher scope than it has now - - one that will be shared by all the code that need access to the variable. — Scott Marcus, Feb 06 '17 at 18:07
@ScottMarcus, wrong choice of word `global` is too general. it should've been more specific, but anyways, you're right :) — Roljhon, Feb 06 '17 at 18:08
Better than moving it up a scope, pass it to the function that needs it. If everything a function needs is passed to it, it's much easier to understand, much easier to test. — Scott Sauyet, Feb 06 '17 at 18:19

score 1 · Answer 1 · edited May 23 '17 at 12:16

The explorerHit variable is declared within your play() function, so it is not visible outside that function. This is called local scope. You need to pass the value as a parameter to checkForPlayerDamage() so that it's available there as well:

...
makeEnemiesMove();
checkForPlayerDamage(explorerHit);
...

And the splitted-out function:

function checkForPlayerDamage(explorerHit) { ...

(Given that all the other variables used in checkForPlayerDamage() are global.)

You can brush up on the different scoping mechanics in JavaScript here:

What is the scope of variables in JavaScript?

JavaScript not working when split into sub- functions

1 Answers1