splitting Game.js into many files

[Ulbast]

Hi, sorry for very noobish question

I have my phaser game.js file which have reached more than 700 lines of code. I want to divide it into documents containing f.e. only create function, update, variables and other functions. I thought this will work:

<div id="game">
         <script type="text/javascript" src="game.js"></script>
         <script type="text/javascript" src="create.js"></script> 
         <script type="text/javascript" src="update.js"></script>  
         <script type="text/javascript" src="functions.js"></script>  
</div>

But error, create function not found. In game.js it look like this:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

function preload() {

(...)

}

function create() {

(...)

}

function update() {

(...)

}

functions....

 

[FakeWizard]

you have to define the functions (create, update, reload ..) inside thier appropriate js file and load them before the game.js... No need to define the functions in game.js otherwise you'll overwritte them. 

[spinnerbox]

Check this github project Phaser 2 Structure

Each Screen/State can have all those functions, "create", "update" "init" etc... which means each State/Screen is practically a separate scene and it should have its own file.

The trick is how to separate them. The code in the link contains several screens and one main file for the game.

A bit hard to understand but it does the job. Contains JavaScript(ES5) best practices and some useful functions I made for adding states, constants etc... MyGame.js file

[mattstyles]

It's sequential, so load stuff game.js needs before you load game.js. It's nearly identical to having one large file but you won't get hoisting, which is maybe why your big file was working.

Note that splitting in to separate files is useful for you as a dev but its not so good to load multiple files in the browser, ideally you'd want to bash those individual files in to one and load just the one file in the browser. But you could tackle that later, its not a huge deal anymore to load multiple scripts (so long as that number isn't too large). And whilst you are bashing files together you could run a minifier over it too in the same step.

Of course if you're going full-bore on modularisation then you'd want to check out a module bundler such as browserify, rollup or webpack (there are others) which gives you access to far more powerful systems for modularising your code. Modules and imports and stuff are very rapidly hitting the browser too, Safari has just shipped module support and possibly Firefox too (I forget exactly, although they're all close to shipping it).

[spinnerbox]

I use Nodejs Grunt/Uglify combo to pack all the code in different files into one large file for production.

[Ulbast]

Putting game.js to the end solved my problem, thank you all!