For some months I’ve been playing around with HTML 5′s Canvas element because I was curious about it, especially after seeing it run Flash. I hacked at it for a while then realized I had produced an Asteroids game.
Play It!
The source code is up on GitHub!
The Canvas element is super cool. Basically all of the sprites in the game are simple paths defined by an array of points. These points are translated, rotated and scaled based on their state at any given point in the game using the standard Canvas transformations. Plus it gives it a nice retro feel.
Let me know what you think!
Here’s some cool links to things that helped me out with the game:
- Determining Whether A Point Is Inside A Complex Polygon. Firefox does the wrong thing when it comes to isPointInPath(), the main Canvas method I used for collision detection; It doesn’t apply the current transformations before determining if there’s been a collision (and they won’t fix it for some reason). I implemented this method to get around the problem but it works fast enough it could be used on all browsers.
- Metanet Software, the makers of the awesome flash game N, have made a couple of extremely useful tutorials on collision detection. These describe some of the techniques I used in the game, in particular the grid based broad-phase they describe in their second tutorial.
- I used typeface.js ‘s convert tool to convert the awesome Vector Battle font into some JSON point data that could be easily used in the canvas. Typeface.js is a neat library for easily embedding arbitrary fonts in the page. On supported browsers it creates small canvas elements and renders the font inside based on the CSS. I borrowed bits from the library to get the font rendering.
Well done!!
Amazing! That’s great – just needs some sound… any idea how Google did that with their Pacman?
Chris Martin: that’s odd it capture all the space bar presses. You can hold it down to fire rapidly.
Tin: From what I understand they used Flash for the sound
Have you looked at your site in Chrome. doh!
Excellent implementation of Asteroids
Waaaay back in the day people used HTML4 and javascript to remake ST games.
http://www.elizium.nu/scripts/lemmings/
So an original Atari game on HTML 5, it’s not entirely freaking me out. We should at least be up to Doom & Quake in HTML 5.
great game, just lacking back control (as in original)
I’ve been poking around the code trying to figure out how to change the strokeStyle color for different elements in the game. Any time I add this.context.strokeStyle to a particular function it changes the stroke color for the entire game. I’m not sure why that happens, any pointers would be appreciated. Specifically how would you change the color of the text in the game?
Pingback: Welcome Visitors | Doug McInnes
You should turn this into a Pokki.
Would be wicked to be able to play on my desktop!
I suspect we could help you increase distribution too…could be easy and fun.
M
http://asteroidsinc.com
Here is a HTML5 game I created which is also loosely based off of the original asteroids game.
Red: Cool!
Absolutely brilliant Doug. A very useful check on how browsers are keeping up and an excellent distraction (for those of us over 45..) as well.
Mike
Pingback: JS (extra) exercise – Simple hit test | Software Studies for Media Designers