How to write a maintainable code ?

[metalNumb]

Hey all.

 

I've been making a game using phaserJS, i used to make very simple OOP programs using Java so i know the basic concepts of object orientation, but i am not sure how to do them in Javascript, now i have one LONG code that is very hard to maintain and i need to add new ideas to my game but i don't know where to start and fine-tuning is not as easy as i expected. I just want to rewrite the code in a more modular way.

 

I know very little about prototyping and i use a design pattern ( singleton ) that-as far as i know- allows the transition of states, with each state as a separate JS file, but that's it. 

 

Thanks all, appreciate your help. 

 

[sanojian]

For starters, use a tool like Grunt so that you can break up your source files into separate files which Grunt will glue back together again.  It can watch your source and recompile on every change so you catch errors faster.  It has tons of plugins but perhaps most important for starting is jshint, which will throw Javascript errors before you have to run the code in the browser.

 

For OOP-like behavior in Javascript, you should probably become familiar with prototype, which is a build-in feature of the language.  

 

Another popular way of organizing objects in games is the component/entity model but I am not aware of anyone using it with phaser.

[BdR]

For starters you can break up your game in different states using the Phaser.state class. So you can have a state for main menu, a state for level select, options, main game loop, and so on, and you can put each state in a separate .js file. See this thread with similar question or see this thread Getting Started With Phaser which has a working example.

 

Secondly, you can try to program objects like enemies and the player as separate objects and put them in separate files, for example see this thread.

 

Finally like sanojian also mentioned; it's important to realise that Java and JavaScript are very different, even though the names might suggest otherwise. Java is real OOP and strongly typed while JavaScript uses prototyping and is loosely typed (i.e. var i=1;i='test';i={x:1,y:2} etc. gives no errors). It took me some time to get used to how prototyping works, it's different compared to inheritance.

[alex_h]

It's also often advisable to favour composition over inheritance. For example when your coding a state / screen whenever you reach a point where you have created a few functions that deal with related tasks think to yourself 'is this functionality really the job of the screen / state, or could it be encapsulated into a class of its own'. That way you can break your functionality down into discrete sets of controllers / managers / components rather than falling foul of the God object anti-pattern.

[metalNumb]

wow, did not expect so much help so fast !!

Thanks everybody i really appreciate it

[msha]

There is an awesome opensource book about gamedev-related design patterns and techniques - https://github.com/munificent/game-programming-patterns

You can buy hardcover or kindle version here: http://www.amazon.com/Game-Programming-Patterns-Robert-Nystrom-ebook/dp/B00P5URD96/ref=sr_1_sc_1?ie=UTF8&qid=1420283406&sr=8-1-spell&keywords=game+developmen+patterns

[codevinsky]

There is an awesome opensource book about gamedev-related design patterns and techniques - https://github.com/munificent/game-programming-patterns

You can buy hardcover or kindle version here: http://www.amazon.com/Game-Programming-Patterns-Robert-Nystrom-ebook/dp/B00P5URD96/ref=sr_1_sc_1?ie=UTF8&qid=1420283406&sr=8-1-spell&keywords=game+developmen+patterns

Came to post this exact thing.

[Sold Out Activist]

For starters, use a tool like Grunt so that you can break up your source files into separate files which Grunt will glue back together again.  It can watch your source and recompile on every change so you catch errors faster.  It has tons of plugins but perhaps most important for starting is jshint, which will throw Javascript errors before you have to run the code in the browser.

 

For OOP-like behavior in Javascript, you should probably become familiar with prototype, which is a build-in feature of the language.  

 

Another popular way of organizing objects in games is the component/entity model but I am not aware of anyone using it with phaser.

 

+1 grunt, +1 jshint

 

Of course, this stuff isn't just about game developer, but javascript development in general.

 

--

 

If you're using the right text editor, your code can be automatically jshinted for javascript errors. I use sublime and some free plugins so my javascript is auto-hinted in real time. It's impossible for me to save a file with a javascript syntax error without purposefully ignoring the warning window I get.

 

Using grunt is amazing. I currently have a build script that:

• bumps the version number
• jshints my files
• compiles my LESS stylesheets into a single CSS file (and minifies it)
• compiles my template html files into a single JS file that can be combined with the next step
• compiles all my javascript files (and libraries) into a single file (and minifies it)
• copies my game assets to the export folder
• and resizes them for different platforms (ios, etc)
• and removes unnecessary information from the images (photoshop adds a bunch of metadata, etc)
  • on a fully-realized project, you could save dozens of megabytes this way.
• modifies my index.html to remove any developer mode stuff
• and replaces references to my main files (main.js, main.css) with new versioned references (main.1.1.0.js, etc)
• copies over all the minified files into the export folder
• copies over all the other files (index, json, etc)
• generates a phonegap native app projects (in other words, an Xcode project for iOS, a Java project for android)
• generates my node-webkit apps (for the native desktop experience)
• compiles a compressed zip of this build for archiving
• uploads that archive to a remote location
• uploads the export folder to my demo location online

And if that wasn't enough, when I'm doing active development, grunt will run a little webserver delivering my content into the browser bypassing any local file restrictions my browser might have. And inject a library that will automatically update any changed CSS files without refresh.

 

--

 

Why download the latest copy of jquery when you can have something do that and keep track/update it when a new version is published. <-- Not even a question.

 

Bower.

$ bower install --save jquery// installs latest jquery$ bower update// if new jquery, installs it

Now you don't have to clutter your version control repo (which I'm assuming everyone here uses--because you should) with library files.

 

--

 

Finally, using a system like AMD with require also improves maintainability by partitioning code into modules.

 

I love being a javascript developer in 2015.