Shpace - An HTML5 Adventure

Shpace – An HTML5 Adventure

The HTML5 Logo.A couple of Fridays ago, Team Cooper had a training day. We huddled into a meeting room and sat in front of the big projector screen. It felt a lot like being back at school. Tim was going to be teaching us about HTML5 and JavaScript and I for one was very excited to see what it was all about.

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:

Controls

The game can become quite frantic and overcrowded at times.

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

Laying out the page to work with the game was simple using CSS. There is an overall container to hold the game’s contents and within that there’s a separate container for the menu. JavaScript then takes care of what to show and what to hide at any given time. Finally, there is the canvas element which is what gets manipulated by the JavaScript to display everything. Learning and using JavaScript hasn’t been very difficult. It’s very similar to ActionScript as they both come from the same roots. The only issue I did have with using JavaScript was that, unless I wanted to have a huge list of script tags referencing all the different JavaScript files for each object in the game, it all had to be in one file. At first I found this very messy and quite annoying for scrolling up and down between areas that I was working on, but I soon got used to it and the web developer tools in Eclipse helped. In fact, it reminded me a lot of when I made a game in Python with PyGame – it forces you to lay out your file properly and comment vigilantly.

I decided to see what it would look like if I didn't clear the canvas every frame. Result: Pretty funky!

Future work

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.

Mobile

Whilst developing the game I spent a bit of time messing about with getting it working on my phone and/or my iPod. I found a very good article and example on touch controls in JavaScript whilst searching for knowledge on the subject. After looking at that I managed to get touch controls working for the game on my iPod, albeit in a very unrefined manner. It worked okay, although as it was just a fleeting test, there were problems with scrolling and zooming not cancelling whilst trying to shoot the bad guys. This is something I’d love to look into more and get working in a friendly and accurate fashion so that the game could be played in a browser on a phone or iOS device. There are even tools like PhoneGap that enable you to package up HTML5 games and apps for deployment on the iOS app store and Android Marketplace, much like you can with Flash using Adobe AIR.

The end?From my adventures in Shpace, I realised a few things. For a game like Shpace, HTML5 is definitely a strong and viable option. It’s simple, it’s easy to play and it doesn’t need a huge amount of code to make. As such, having the code laid out in one file isn’t a problem, and with the speed JavaScript executes at it runs pretty smoothly. That said, for a bigger game and a game with complex class hierarchies, I don’t think it’s the way to go yet. Something like Nurse Quest would just be a nightmare to get to grips with. I believe the battle between HTML5 and Flash will rage on for some time yet – Flash Player 11 has some great performance boosts and the introduction of Stage3D brings even more to the table. Whilst WebGL (Although not actually part of HTML5) can be used with it to create some stunning games and visual effects. I’m not sure there will ever be a clear winner between the two, but at the moment it really is just down to the project, your audience and what you want to do with it.

You can play the game below (Click the game to begin playing):

Tags: , , , , ,

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
p0ng - A Journey Into HTML5
p0ng - A Journey Into HTML5
Should you use Flash or HTML5 for your digital marketing?
Should you use Flash or HTML5?

Comments

Add to the Comments

Submit