ABaroids - a game in the address bar using html5 history.replaceState

Here it is at last ... the first game (that I know of) that runs within the address bar of your browser! *

OK, so as far as games go, it's not exactly going to set the world alight but as we've only got what amounts to a 1x60 screen and can only display a-z, 0-9 and a few selective other characters that will actually display in an address bar ...

It's not quite in the same league as DEFENDER of the favicon which is worth a look if you like your games very small.

Instructions

Your ship is stuck within an asteroid field and engines are dead plus you can only shoot one missile at a time, shoot the wrong way and you're gone!
Last as long as you can

a - face left
s - face right
return - fire
space - engage powerup

Power ups are gained randomly from destroyed asteroids and can be used once only. Watch for your ship powering up -x) and the letter B or L on the far right end of the play area.
B - Smart bomb, will destroy all asteroids in your area
L - Laser, will destroy all asteroids in the direction you're facing

Start Game Stop Game

Browser Support

* To get this working in the address bar requires the new html5 history.replaceState() command so IE8, Firefox 3 and Opera are out I'm afraid. Here's what I've tested it in so far

Chrome 6.0
Safari 5.0

If you really feel you're missing out and you're on an unsupported browser, then you can play below - this is what you'd see if IE8 had this support.

Score-00020-____________*_*_____-o)_________*______*___-Lives-_(o-_Lvl-0

History (of the game, not the javascript one!)

A friend and colleague at work, Murray Picton, found a blog post on the Mozilla Developer blog about the new HTML5 javascript pushState and replaceState methods.

This allows you to add to and (more importantly for our use) replace the history of the browser from javascript so that for AJAX pages, the history can be corrected to allow for changes to prior pages

Our first thought on this was to find if we could cause some animation of the address bar - you can see the results on his blog

For fun, I decided to one-up him and created a short pacman animation - you can see that here

After this success, it struck us that the next step was to control the animation and therefore see if the replace would work quick enough to create a game and so I sat down one night and put this together ...


Martin Gillow
(last update 21 September 2010)