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):
Last week I had the opportunity to visit Media City UK, the new Salford home for six of the ten BBC products.
The rest of the day revolved around the BBC’s vision for our four screens – TV, Computer, Tablet and Mobile.
Team Cooper is a growing Sheffield based digital studio currently producing our own browser based games and supplying multimedia development services to a wide variety of businesses and media companies. We love creating fun, online interactive experiences like games, micro-sites and social media applications and we are looking for an enthusiastic office assistant to help us manage our ever increasing workload.
It’s been quite a long time coming, but we’ve finally got round to 
