Blog Portfolio

It's the bubbles of nothing...

Asteroids VS HTML5

Advanced HTML5 stack, Canvas, Audio API

You think you’ve got problems?

I’m fighting for my life having been dumped into a random asteroid belt in a tiny green spaceship.

Play Asteroids

Let me talk Nerdy

Proper HTML5 support is on the rise so I took the time to learn two new technologies that it offers. The Canvas Object and the Web Audio API. Asteroids is my HTML Canvas/Audio “Hello World” demo.

The HTML5 Canvas is method of generating fast, dynamic graphics using JavaScript and the Web Audio API is a high-level JavaScript API for processing and synthesizing audio.

Canvas and Audio API Support

Show me current HTML5 Canvas Support

Show me current Web Audio API Support

Play Asteroids

Piew, Piew – The History of Asteroids

Asteroids is an arcade space shooter released in 1979 by Atari, Inc. The player controls a spaceship in an asteroid field which is periodically traversed by ufos. The object of the game is to shoot and destroy asteroids and ufos while not colliding with either or being hit by the ufos counter-fire. The game becomes harder as the number of asteroids increases.

Play Asteroids

Some Fun Facts About My Implementation

  • The single HTML5 page is only 45KB and references no other files.
  • The backdrop is procedurally generated.
  • The system generates 4 seconds of white noise and loops it for explosion and thrust sounds.
  • I set up a user experience survey and got useful feedback from a small group of gamers.
  • The asteroid colours are random but have their brightness constrained.
  • I studied this video to remind me how the game mechanics worked.
  • The UFO spawns in an available random screen position, attempts to avoid asteroids, and improves its aim as the game progresses.
  • The original “special” was a warp to a random position on the screen. I have replaced this with “Think Fast” which is a simulation of the player thinking faster. Like Spiderman can.
  • The thrust sound includes a low frequency sine wave to tickle your sub-woofers.
  • I programmed with no mind for efficiency.

Play Asteroids

In Closing

That was fun. I can’t wait to program another game!

Play Asteroids