Shpace – An HTML5 Adventure
There’s been a lot in the media recently about HTML5’s uprising and its challenge for the throne of web-based gaming, so Team Cooper decided it was time to have a good look into it to determine if it was a viable option for the heavily interactive games and apps that we make.
As a consumer, the concept of HTML5 games is brilliant. Browsers are rushing to support all the new features, and new techniques and demos are being developed all the time. With no extra plug-ins or add-ons needed, it’s perfect for casual gaming on the fly. They’ll even (for the most part) work on mobiles!
As stated in Tim’s blog post back in November, Flash had been the go-to tool for creating rich interactive experiences for some time. HTML5 has been looking like it may change that, and from all the coverage it’s been getting, it’s clear to see that many people in the web community consider it a strong contender. As such, after our session in the meeting room, we went our separate ways to start playing about with what was on offer and to try and make something before the end of the day. Obviously with only a few hours left in the day we weren’t expecting miracles, but we all managed to get things moving around on our screens. Since then, I’ve been working on-and-off on my game, Shpace (You can play the game at the bottom of this post).
Shpace is a very simple shoot ’em up, developed in a few days using solely the drawing functions provided by the HTML5 canvas element. As it was a test project for learning a new technology, there are certain things that could definitely be improved, so I will now provide a short run down of what I did and what I could do, given more time:
In its simplest terms, the game is just a set of functions that draw shapes at a specific position. The game checks for any of these shapes that might be colliding and carries out the required action depending on what they are. The player must navigate around the screen, avoiding the enemies and their bullets whilst shooting them for points. The controls I chose to use are the arrow keys and the ‘Z’ key to shoot. These seemed like a pretty universal method for controlling such a game, but a problem did arise in the form of having to cancel out any operations that might otherwise be performed by the arrow keys. Normally they scroll the page, but in this game, we really don’t want the scroll bar to jump up and down while trying to fend off a horde of angry red triangles. As the canvas element doesn’t have any way of knowing if it’s in focus, I had to use a click listener to check for focus myself.
Structuring the content
If I decided to work on Shpace in the future (which is quite possible) it would be good to add in a few more things. The game is quite bland at the moment, there are only two types of enemies and a distinct lack of any sort of ‘boss battle’. Creating some more varieties of enemy and giving them different behaviours would help to combat this, and wouldn’t take too much time. Adding in bosses may take a little longer, but really they’d just be a special type of enemy. There is also no sound as I haven’t really has time to experiment with the sound API. Another interesting addition, and one that again wouldn’t take very much time (I don’t think) would be high scores. I would also be intrigued to look into the possibility of WebSockets and a multiplayer co-operative mode. This is something that would definitely take some time however.
You can play the game below (Click the game to begin playing):