10 March 2016

The tricks to a good HTML5 game - Part 3 - Touch events and Modular code

Making an HTML5 game , Like any other programming project, comes with it's own peculiarities .As I worked on Space Zombies ,I noticed the seemingly "easy" way of doing things is actually less productive and at times can even reduce performance.

This is part 3 in a series of posts , read the first part about animations and game loop here.and the second part about canvas redraws and clearing here .

If you're aiming for touch devices, use touch events

    It seems unnecessary in the beginning to use touch events instead of click events if all you need is a single touch point at any given stage of your game, to successfully take inputs.
After all,  it's obvious that click events work on every device, be it a computer or a smartphone but the touch events don't work on a PC, but what's not obvious is the fact that most mobile browsers implement ~300ms delay for a click event,which is used for detecting things like double tap gestures, and this ~300ms delay is completely absent in the case of a touch event, making your app that much more responsive to the users input if you use touch events instead of the click events in javascript.

    yes, you can get away with using click events in certain UI aspects of your game (for ease of implementation) but the main game should always use touch events because that 300ms delay can actually be the difference between your entire game being sluggish and it being responsive , especially if you are aiming for a good frame-rate.

Always write modular code

    write your code in blocks , combining which will give you your game , but keep the blocks as reusable as possible , write your own 'framework' of sorts , which has all the basic functions you need, then write the high level logic using these , after all writing reusable code means that the next time you need a similar behavior you can simply reuse the pre-written code.
This happened to me with Space Zombies , 

   I wrote a class called 'simplebutton' that would take a callback function to execute when clicked and other parameters like image, coordinates etc. from then on every time i needed to add a new button to the game that did something, all i had to do was make an object of this class and give it the required parameters , and it's own callback function , and the new button would handle just like the already created ones, adding a new functionality to all the buttons was now as simple as updating the class itself. 

And now that i have this class, whenever i decide to make a new game, i can simply reuse it,awesome.

I hope you learned something new and As always , if you need any help with your html5 game/project , you can always contact me in the comments .

Looking for a way to monetize your android or Ios app ? I've been using Startapp , and its fairly easy to integrate and they have bonus cash to earn based on your current earning , they support multiple platforms , from HTML5 to JAVA application to Unity  , give them a shot !