Polution in Global Namespace

[jjwallace]

I have programmed a game with a lot of variables but i am having conflicts with my 6 other games running in NODE and ANGULAR.

The problem is my variables are polluting the global namespace.  What is an easy solution to this problem?  I have a lot of variables and am looking into options such as refactoring.

If you guys have any tips please let me know, this is for a very large project.  VERY LARGE.....

FunGame.Game = function (game) {
    //When a State is added to Phaser it automatically has the following properties set on it, even if they already exist:
    this.game;        //    a reference to the currently running game
    this.add;        //    used to add sprites, text, groups, etc
    this.camera;    //    a reference to the game camera
    this.cache;        //    the game cache
    this.input;        //    the global input manager (you can access this.input.keyboard, this.input.mouse, as well from it)
    this.load;        //    for preloading assets
    this.math;        //    lots of useful common math operations
    this.sound;        //    the sound manager - add a sound, play one, set-up markers, etc
    this.stage;        //    the game stage
    this.time;        //    the clock
    this.tweens;    //  the tween manager
    this.state;        //    the state manager
    this.world;        //    the game world
    this.particles;    //    the particle manager
    this.physics;    //    the physics manager
    this.rnd;        //    the repeatable random number generator    
};

 var isSmallScreen = true;
 var isRainOn = true;  ///////LOTS OF VARIABLES HERE

FunGame.Game.prototype = {

    create: function () {
//        gameFinished = false;
//        FunGame.gamePause = false;
    }


}

 

[drhayes]

The simplest solution would be to iframe those games so that Angular only controls the iframes, not the games.

You could also wrap your games in immediately-invoked function expressions (IIFEs) so that the scope of the "global" variables is limited to the scope of the IIFE. That won't work if you have multiple files for each game, though.

You could also investigate browserify and/or webpack (which put all your code in an IIFE anyway). But if each game were its own bundle it'd be easier to manually namespace them.

Failing all that, you'll have to manually namespace your code as above: stick all the globals for a particular game on some global object and change all your references by hand.

[tips4design]

Well, don't create them in the global scope.

 

You could have something like

this.game.settings = {
  isSmallScreen: true,
  isRainning: true,
  ...
}

And then, wherever you have access to the `game` variable you will also have access to your other settings.

[JakeCake]

(function() {
  // ALL YOUR CODE HERE
})();

Effectively puts everything into it's own scope. You want one of these around each game. You can also switch out all your "var"s with "let" and just put { } around the games, but I like to add function scope around better.

Alternatively you can make it a class object instead that you initialise with a "new" operator, and then all values defined as "this.yourValName" will be available through that object, the rest closed off completely inside the function-scope.

[FelixNemis]

1 hour ago, JakeCake said:

(function() {
  // ALL YOUR CODE HERE
})();

Effectively puts everything into it's own scope. You want one of these around each game. You can also switch out all your "var"s with "let" and just put { } around the games, but I like to add function scope around better.

Alternatively you can make it a class object instead that you initialise with a "new" operator, and then all values defined as "this.yourValName" will be available through that object, the rest closed off completely inside the function-scope.

If your code is all in one file, this is a great way to do it

If not, then in addition to doing that around each of your files, you need to use an object as a container for all you global variables.
In the code example you posted for instance, you have a "FunGame" object that contains the main game state, you just need it be global:

window.FunGame = {};

Then basically just do the same thing for all your global variables so

 var isSmallScreen = true;
 var isRainOn = true;  ///////LOTS OF VARIABLES HERE

becomes 

 FunGame.isSmallScreen = true;
 FunGame.isRainOn = true;  ///////LOTS OF VARIABLES HERE

 

Edit: And if you're running into problems with multiple instances of the same game, then you could put global variables in an object on the phaser game instance like the example tips4design gave

[jjwallace]

Great call kids!  I encapsulated the code and it works well!  You saved me, my client would have been very unhappy.