Make Phaser.Game less accessible

[Zampano]

Hey there!

We've established before that javascript and therefore phaser games can be manipulated via console and that this can only be prevented by double checking everything with the server.

Now aside from that, I wondered if it would to a certain extend help to 'hide' BasicGame, which usually is a global variable and can therefore be accessed easily.

My idea is this:

	(function() {
		var cfg = {
			width: 1280,
			height: 720,
			renderer: Phaser.WEBGL,
			antialias: true,
			parent: 'gameContainer',
			enableDebug: false
		};
		
		var states = []
		states.push(['Boot', BasicGame.Boot])
		states.push(['Preloader', BasicGame.Preloader])
		states.push(['MainMenu', BasicGame.MainMenu])
		states.push(['Intro', BasicGame.Intro])
		states.push(['XMode', BasicGame.XMode])
		
		BasicGame = null;
		
		var game = new Phaser.Game(cfg);
		for(var i = 0; i < states.length; i++) if(isDefined(states[i]) && states[i] != null) 
		game.state.add(states[i][0], states[i][1]);		

		game.state.start('Boot');
	})();

I've implemented that into my index.html and it works fine. I imagine it makes the game way harder to adress via console, but many some of you with a deeper understanding of javascript could tell me if there really is any use to it, since there's the small downside that when working with global functions, I always need to pass game to them. 

Thank you!

[lewster32]

If you encase all of your game code inside an immediately invoked function expression, it should be inaccessible to global scope. This looks to be what you've done above - if all of your variables are declared inside that wrapping function, they will not become global. If you therefore declare BasicGame inside the function too, this will also not be in global scope and there's no need to then null the variable.

[Zampano]

Right, about that:

I've read about that and did so here, but all the code in external javascript files (Boot, Preloader, Game States...) is loaded in the index.html head area. BasicGame is declared as a global variable in Boot.js so this means it's outside of the anonymous function...

Is there a way to move it all in there?

[lewster32]

I see, that makes more sense now. Because you have separate files, they all must use global scope in order to be accessible to one another. The solution here would be to combine (concatenate) them all into a single file and surround them with the IIFE as above. I'd recommend an automated build tool such as grunt, gulp etc. for this job. If you use gulp (which I'd recommend over grunt, mainly for performance reasons) gulp-concat and gulp-iife should do the job.

[Zampano]

Thank you for the recommendation, I will definitely check those out! 

To be clear, would enclosing the entire code really make manipulation impossible or is it "only" making it a lot harder?

[lewster32]

It's always possible to mess with client code, but by having it encapsulated in an IIFE, you make it much less trivial than simply opening the console and messing with global vars.

[Zampano]

Got it, thank you

[Zampano]

Maybe just one more question 
Does that mean it is not necessary/of any further use to try to make ANY variables inside the IIFE harder to access? So "this.score" in my Game State etc instead of making it only accessible from within would be fine?
 

[lewster32]

Anything that is declared inside the IIFE will be privately scoped to the IIFE, and will not attach itself to any global variables, so yes, properties of objects declared in there will also be private. The only way variables will become global is if not expressly declared with var or if properties are attached to global objects such as window. If you make use of "use strict"; at the top of your code, an error will be thrown if you try to do the former, which can help.