multiple JS files and loop functions

Recommended Posts



I have started developing with canvas and JS this week and have a few questions on the structure of a program.....

When is it appropriate to create a new file that declares an object?

   so far I have been declaring my objects using the object literal method in a single file but its coming close to 300 lines and I am now wondering if I should start making new files for my objects.

   for example, I want to make a gun class which acts as a parent class for all gun types. I have made a new JS file and have added this:

function Gun(){	this.x=0;	this.y=0;	this.image1=9;	this.image2=10;	this.width=36;	this.height=32;	this.pickedUp=false;}

now, would it be more efficient to declare this using object literal in the other file? Or should I continue writing this one and make a loop function in this file that handles all the actions that I would normally put in the other (300 line) file?


Share this post

Link to post
Share on other sites

Generally, keep your re-usable objects and functions in their own files.

The code with your main game loop and logic can then be in its own file.

Something like this:


    <script src="gameObjects.js"></script>

    <script src="usefulFunctions"></script>

    <script src="mainGameCode"></script>


If you have lot of files, consider using some kind of module loader: Browserify, RequireJS or ES6 modules.


I'm not sure if this answered your question, but if you can give me more details I'll try an help.

Share this post

Link to post
Share on other sites

Thanks for the tips. I was just wondering what the proper structure of a game is like with canvas and js...I have started the game over and this time I am using one file which initializes some the objects from other files, though each file has a looping function. Also, I find myself declaring a lot of variables and objects globally like this: "window.object"....is this bad practice?

Share this post

Link to post
Share on other sites


Yes, window.object is bad practise, because you're filling the global scope with lots of variables.

(It's not your problem, it's JavaScript's, but it's just something we have to deal with.)

Usually it's best to define one global object, your game, and then attach all the game variables to it, like in this example:




That article will also give you some basic ideas about structuring a game with multiple files.

(The only thing I would not recommend in that article is to attach a render function to each sprite. it's much better to render sprites by looping through all of them in a single render function.)


And it's usually not a good idea to a good idea to have more than one game loop running.

That's because using different loops simultaneously will cause different parts of your game to start running out of sync, and that can lead to all sorts of complicated bugs.

Share this post

Link to post
Share on other sites

While you're thinking about how to structure your project, I recommend that you look into entity component systems, here's a good write up that explains what it's all about http://www.richardlord.net/blog/what-is-an-entity-framework and if you're looking for a particular implementation for JavaScript, you might want to look into https://github.com/brejep/ash-js which I think should be compatible with most JavaScript game frameworks including Phaser. I haven't tried ash-js yet though, but I've worked with the Haxe port of Ash at https://github.com/nadako/Ash-HaXe and I found it to be a great way of organizing my own game project.

Share this post

Link to post
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.