Mr Speaker

Air CSS Battle – a DHTML odyssey

-Air CSS Battle-

Guide your laser controlled missiles and destroy the annoying floaty ships and planes. Watch out for the wacky mines, and try and hit the star-thing that gives you more time. Good luck.

 

Just what you always wanted, a dhtml game inspired by Air Sea Battle of Atari 2600 fame. The coolest part of Air Sea Battle was the excitement introduced by 2 player simultaneous play. I've discarded that sole redeeming feature and replaced it with the far less captivating "ticking-clock" element. Ticking clock - works great in the movies.

This game was made after I learned of the coolest web-thingo since the XBM image - CSS Sprites. Right-click and view an image in the game (or click here) and be prepared to be amazzzed. Yep. One image. This game comprises of one script (aircssbattle.js) and one image.

"CSS Sprites" are named after old-school computer graphic sprites which were presumably named after the preternatural legendary sprites

The trick of css sprites lies is the background-position attribute. You can specify where on an image you want to display by using a negative offset from the left and top of the image. For example, background-position: -24px -32px; would set the background image to the 24th pixel in from the left, and the 32nd pixel down from the top. Awesome!

My favourite bit on the game is the timer and score custom font. I haven't had to write a custom font printing routine like that since Pascal. Oh! Pascal! If this could be adopted to degrade gracefully, it could be a pretty nice way to implement dynamic headings on web sites without server-side image processing. I suppose. Not as fun as Atari 2600 games though.

5 Comments

  1. That’s brilliant! Very clever. Damn hard, too… The guiding buttons are pretty small (or am I just ‘challenged’?).

    Can you integrate sound as well? A military-style drum, laser-firing and explosions would be very cool. All old-school, of course!

    The only thing letting it down is the name… why not ‘Air Battle CSS’ instead? Would ‘Time Pilot’ have been as successful if it had been called ‘Pilot in Time’? Hmm… Probably would have, actually.

    Thursday, June 16, 2005 at 12:20 pm | Permalink
  2. Good work Anton – way to smash my carefully crafted pun. Maybe I should have called it “Air Sea SS Battle”. That would have added even another layer of intricacy.

    I was going to add sound to it using the “invisible Flash” technique – but I got bored.

    Thursday, June 16, 2005 at 1:06 pm | Permalink
  3. I am also “challenged” anton, all i can seem to hit are the squiggly flying/floating helicopter/octopus things.

    Monday, June 20, 2005 at 3:13 pm | Permalink
  4. Don’t see the game but the page seems complete otherwise. I presume there is also a javascript requirement?

    Tuesday, August 16, 2005 at 7:35 pm | Permalink
  5. ‘fraid so evanh – that’s the “D” part of “DHTML”

    Wednesday, August 17, 2005 at 9:11 am | Permalink
Captcha! Please type 'radical' here: *
How did you find this thingo? *