multiple JS files and loop functions

[xwirespongex]

Hello,

 

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?

 

[d13]

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.

[STuFF]

split your code in small files, one per class.

use a tool to manage everything (requirejs, browserify, custom tool to concat files, etc)

[xwirespongex]

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?

[d13]

Hi,

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:

 

http://www.adobe.com/devnet/html5/articles/javascript-object-creation.html

 

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.

[ultimatematchthree]

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.