p0ng - A Journey Into HTML5

p0ng – A Journey Into HTML5

As you may have read, m’colleague Matt recently created a small game as an experiment in developing for HTML5. This was during a training day in which the Team Cooper  development team all had a chance to spend some time experimenting and see what they could come up with. Matt has already discussed many of the finer details of working with the technology, but here are my thoughts…

The first challenge was deciding what kind of game to develop. We’re generally quite busy at Team Cooper HQ, so it seemed wise to focus on a fairly simple game design, and what could be simpler than Pong?

The game I have created is called p0ng and is a spiritual successor to the original Pong. It keeps the format of two paddles locked in an eternal struggle to bounce a ball backwards and forwards, but those of you familiar with Pong will notice some subtle (and not so subtle) differences.

Unlike Matt, I mainly used images to show graphics in my game, with the only dynamically drawn content being the score display. Using images in HTML5 was initially an interesting challenge as everything must be loaded in at runtime as opposed to Flash, where images can be compiled directly into the game’s SWF file. Other than that, the actual process of writing JavaScript code wasn’t too dissimilar to working with ActionScript 3 (this is no great surprise, considering both languages are forms of ECMAScript). This meant I could dive right into coding the game’s logic, although I had to do without many of the convenient libraries I often have at my disposal when working with Flash.

Usually when creating a Flash application I will write code using Powerflasher’s FDT, a powerful tool with many specific functions designed to make the process of writing ActionScript easier. I know Adobe Dreamweaver isn’t very popular with web developers these days, but I decided to give it a shot anyway to see what it could offer an aspiring HTML5 game developer. Dreamweaver did offer some useful error detection similar to what FDT offers, but lacks some of the most handy functions that we use in FDT every day.

To be fair to Dreamweaver, much of this is actually down to how JavaScript works compared to ActionScript 3, with the former being weakly typed and the latter being strictly typed. The advantage of a strictly typed language is that your coding tool can always tell what types of variables you’re working with and provide you with a whole host of information and shortcuts that make focusing on writing code much easier. With JavaScript, there is nothing like this which makes the code much more ambiguous with regards to its exact functionality. This makes it much more difficult for software to try and guess exactly what it is that you’re trying to accomplish with your code.

That said, p0ng didn’t take a great deal of time to produce and was a very good introduction to the world of HTML5 development. Obviously there are plenty of other things I’d like to put into the game if I had the time, but I don’t think any game developer worth his salt will ever claim any of his games are ever truly ‘finished’ 😉

I’m sure you’re itching to have a go at the game, though, so here you go (Make sure you click the game to enable keyboard interactions):

Tags: , , , , ,

Branded Christmas Games
Branded Christmas Games
4C Insights Maze Raider
4C Insights Maze Raider
Meet the team: Phil Alderson
Meet the Team: Phil Alderson
DFDS Jack's Epic Adventure
Jack's Epic Adventure
Can Games Boost Marketing Campaigns?
Can games boost your marketing?
CKSK Coors Light Ice Cave Challenge
CKSK Coors Light Ice Cave Challenge
Can games increase footfall at your exhibition stand?
Increase footfall at your expo stand
White Label Conga Challenge
Conga Challenge
Every Second Counts Conga
Every Second Counts Conga
A Sackful of Christmas Games
A Sackful of Christmas Games
5 reasons to order a branded Christmas game
5 reason to order a christmas game
Beat the Beasts
Beat the Beasts
Win a Nintendo Classic Mini: NES
Competition Time!
White Label Rooftop Runner
Rooftop Runner
We do games, we love games, but why should you?
We do games, we love games, but why should you?
6 things to consider before commissioning a game.
6 things to consider before commissioning a game
Jack’s Quayside Kickabout
Quayside Kickabout
Beazley Conga Challenge
Beazley Conga
Jingle Jet
Jingle Jet
5 Things I Discovered While Writing 'Attack of the Tempus Fugitives!'
5 Things I Discovered While Writing 'Attack of the Tempus Fugitives!'
Game Developers Available For Hire.
Game Developers Available For Hire.
Attack of the Tempus Fugitives!
Attack of the Tempus Fugitives!
Maze Collector
Maze Collector
Farter Christmas
Farter Christmas
Farter Christmas: Origins
Farter Christmas: Origins
Dani's Castle - Hidden Treasures
Hidden Treasures
Fairly OddParents - Scary GodParents
Scary GodParents
New website, new beginnings with HTML5, HAXE & Unity
New beginnings with HTML5
Dealing with the DOM in HTML5 Games
Dealing with the HTML5 DOM
Tiny Tumble Bubble Art
Tiny Tumble Bubble Art

Comments

Be the first to comment on this post!

Add to the Comments

Submit