Sign in to follow this  
metalNumb

How to write a maintainable code ?

Recommended Posts

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. 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Share this post


Link to post
Share on other sites

Came to post this exact thing.

Share this post


Link to post
Share on other sites

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.

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.

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

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.