Question

I’m quite new to the concept of module patterns. I managed to implement the core features of my HTML5 game, but I can’t figure out a good way to make certain variables available to every function of that game.

Here is a short pseudo example which should make it more clear:

var Game = {};

Game.player = (function() {

    //...

    return {
        update : update,
        draw : draw        
    };
});

Game.main = (function() {

    var player = new Game.player();

    // needed by player
    var gravity = 1.0,
        loop,
        canvas,
        ctx,
        key_inputs;

    //...

    return {
        init : init,
        pause : pause,
        play : play        
    };
});

var game = new Game.main();
game.init();
​

Answer 1

If code scoped to your Player function needs to use some variables declared in your Game function, you have three options:

• Move them to a higher scope (which would be global in this case, so not recommended)
• Pass them as parameters to the player (not great since they won’t be updated in Player if they change in Game)
• Create a getter function in Game that returns the current state of the variables to the Player function.

You’ll also need to pass the instance of the Game to the Player so it knows which Game to grab it’s data from.

Here’s an example of #3 (the one I would try):

Game.main = (function() {
    var player = new Game.player(this);

    // needed by player
    var gravity = 1.0,
        loop,
        canvas,
        key_inputs;

    var getSettings = function () {
        return {
            gravity: gravity,
            loop: loop,
            canvas: canvas,
            key_inputs: key_inputs
        };
    };

    return {
        init : init,
        pause : pause,
        play : play,
        getSettings: getSettings        
    };
});