Pitfalls of JavaScript Game Development with HTML5

A few months back I completed development on a promotional game for a client that I wrote entirely in JavaScript using the HTML5 canvas. The game was similar in nature to Breakout but instead of deflecting the ball with the pad at the bottom of the screen, the player needed to catch objects falling at random from the top of the screen. The requirements were that it needed to run smoothly in all modern browsers and on touch based devices such as phones and tablets. The iPad was specified as a target device, so using Flash was out of the question.  With that known I set my sights on an HTML5 canvas based game.

The game play was very simple, so I wrote the game engine from scratch. The core game was easy to implement, but reinventing the wheel by not using an existing JavaScript game engine presented some issues with cross-browser compatibility.  Here are some of the issues I ran into and how I either got around them, or didn’t:

Graphics and Presentation

The client was keen on supporting Internet Explorer 7, if possible, but deemed supporting the iPad to be more important.  I looked around and stumbled upon a plugin called explorercanvas, which allowed the usage of the canvas element within older versions of IE.  To my surprise, I dropped the script in and everything worked properly.

Controls

After some trial and error, I ended up relying on jQuery to attach the events for player control.  Each of the browsers handle events differently and expose different values for mouse coordinates.  jQuery exposes the same values no matter which browser you are running, so that you can be sure of whether will be receiving an x and y value in reference to the entire window or just the canvas’ bounds.  Capturing key presses are also slightly different among browsers, so jQuery can help with that as well.

Touch controls are an entirely different monster.  At the moment, jQuery does not support binding to touch events.  Luckily, at this point most mobile browsers support the same spec for adding event listeners to touch events for touchstart, touchend, touchmove and touchcancel.

Audio

Sound effects and music are a piece of cake to implement with HTML5 audio.  Preloading and playing sounds on cue from script takes only a single function call.  Unfortunately, this is where older browsers like Internet Explorer 7 fall short.  The only way to play sound without using Flash in these browsers is to append an embed tag on the page using JavaScript when the sound needs to be played.  This presents two potential problems.  First, the embed tag plays the sound using the codecs that the user has installed.  If they have no codec to play sounds in your format of choice, you’re out of luck.  Second, the sound must load the first time it is played, so it is out of sync.  I occasionally ran into issues with syncing sound even once it had loaded.

Conclusion

This particular project was simple, so it didn’t suffer from being written from scratch, but if I had to do it over, I would choose one of the JavaScript frameworks already available.  The best choices right now seem to be LimeJS and ImpactJS.  Though ImpactJS provides additional tools for profiling and level editing, it’ll cost you, where LimeJS is free.  The popular iOS game development framework Cocos2D now has a flavor available for JavaScript and HTML5 as well.

As a developer who is against reinventing the wheel whenever possible, these frameworks provide simple solutions for all of the common problems with developing games using HTML5 canvas and JavaScript.  They can help separate your game from a small game to a full fledged experience that user forgets they are playing in their browser.

Advertisements

4 thoughts on “Pitfalls of JavaScript Game Development with HTML5

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s