Jump to content

splitting Game.js into many files


Recommended Posts

Hi, sorry for very noobish question :D

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>  

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() {





Link to comment
Share on other sites

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

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...