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.