Two ways of writing JS?

[What?]

How come you can write this:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create });function create() {var text = "hello world";var style = { font: "65px Arial", fill: "#ff0044", align: "center" };var t = game.add.text(game.world.centerX-300, 0, text, style);}

And it behaves the same as this:

 

main.js

var test = test || {};test.game = new Phaser.Game(600, 400, Phaser.AUTO, '');test.game.state.add('Game', test.Game);test.game.state.start('Game');

game.js

var test = test || {};test.Game = function(){};test.Game.prototype = {    create : function () {    var text = "hello world";    var style = { font: "65px Arial", fill: "#ff0044", align: "center" };    var t = this.game.add.text(this.game.world.centerX-300, 0, text, style);    }};

Why is the syntax different?

[xerver]

Either way you pass in an object that has a method called "create," that is all that matters. This is because JavaScript is not a nomimally typed language, instead it is duck typed (at least with objects).

 

Any object with methods that make it look like a state will work as that last param.

[What?]

Either way you pass in an object that has a method called "create," that is all that matters. This is because JavaScript is not a nomimally typed language, instead it is duck typed.

 

Any object with methods that make it look like a state will work as that last param.

 

Thanks for the reply. Is there a way I can write scripts like my first example? I haven't found a template in that style anywhere that uses the standard main.js –> boot.js –> etc. system.

[lewster32]

With the first example, because you're passing a state directly as an object literal, you'll never be able to access that state. It's maybe fine for very fast prototyping but it's not a good habit to get into as it will make scaling your code harder, and scaling is what you really should be thinking about all the time, for all too often prototypes become production code.

[What?]

With the first example, because you're passing a state directly as an object literal, you'll never be able to access that state. It's maybe fine for very fast prototyping but it's not a good habit to get into as it will make scaling your code harder, and scaling is what you really should be thinking about all the time, for all too often prototypes become production code.

 

Good to know. I wasn't sure if there was a problem writing it one way or another. My only complaint is that it was harder to get this information than it should have been. The Phaser examples on the website are written differently than most professional projects, and the reasons why were lost to a layman like myself.

[lewster32]

The best templates I've found are the official ones in Phaser's Github repository: https://github.com/photonstorm/phaser/tree/dev/resources/Project%20Templates/ 

 

It's true though, there are a lot of little extras that are needed to make multi-file templates workable, as just trying to include all those separate JavaScript files into a HTML page is a pain in the butt. Generally speaking most of the professional projects will be supported by something like Grunt, which can be used to automatically check, combine and minify the separate files into a 'distribution' file. I have mine set up so that every time I save any of my separate files, Grunt checks, combines and minifies the result instantly so I can refresh a page with my current experiment on. Grunt's not that easy for beginners as it requires some knowledge of nodejs, its package manager npm, JSON files and other stuff, but if you want to give it a whirl let us know and someone on here should be able to help you get it set up.