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.
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.
Canvas and Audio API Support
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.
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.
That was fun. I can’t wait to program another game!