HTML 5 Asteroids

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.
This entry was posted in Coding, Games, Javascript, Projects and tagged , , , , . Bookmark the permalink.

72 Responses to HTML 5 Asteroids

  1. Zach says:

    Great demo. I don’t remember from the original game… but should I be able to accelerate past my bullets?

  2. Martin Cron says:

    Excellent work.

    I did a version of Asteroids in C#/GDI a few years ago to experiment with some techniques/language features, it may be the most fun I’ve had coding in years.

  3. Labgrab says:

    Nice work on the programming. I hurt some asteroids!

  4. says:

    Not very playable in Firefox when the page keeps scrolling when I press the arrow keys.

  5. bruce says:

    Wow! My favourite game as a teenager in the early 80s!

    You don’t list Opera 10.50 as a suggested browser to play it in (which I’ve been using with no problems). WHat are the issues you’ve found running it on Opera?

  6. Ravi says:

    More awesomness!!!

  7. Sohn says:

    Cool! You did a great job.

  8. Adam says:

    Accelerating past bullets is a feature not a bug! =) Very fun!

  9. Joe Lewis says:

    This looks spectacular on iPad. Now if only there were some way to bring up the soft keyboard so I could play it! :D

  10. Doug says:

    Thanks for all the great comments!

    Zach: I kind of like it ;) If you get your ships speed right and then turn 180 degrees the ship and bullet velocities cancel each other out leaving little mines!

    Bruce: honestly I hadn’t tested it in Opera! I did most of the development using Safari. Thanks for the tip though, I’ve updated the browser list :)

    ⬡: The down arrow key wasn’t mapped to anything in the game so it wasn’t getting captured. I’ve now disabled it. Probably should map it to hyperspace.

    Joe Lewis: I really want to get it working on the iPad! I imagine I can have it expand to fill the screen, just need to set up controls and get the framerate up a bit.

  11. bruce says:

    Thanks Doug!

    BTW, yes – down arrow could be mapped to hyperspace,but probably so should space bar; after all, it’s the panic button so you need a big hit target for a panic button.

  12. bruce says:

    WHat am I talking about? Space bar is “fire”. Maybe “enter” could be mapped to hypersapce as well as down arrow

  13. Makes me want to get a trackball!

  14. ralu rm says:

    great job.. move on with great images and sound effects .. as quake2 by google… http://code.google.com/p/quake2-gwt-port/
    great work!!!

  15. Fantastic stuff! Very playable in Chrome on W7, I’m guessing sound effects are a bridge too far? I have heard there is an issue with delay given no event trigger/listening – is that right?

  16. Sean says:

    Freaking awesome. I spent a lot of time in the bowling alley behind my school playing this game.

  17. skintrade says:

    Shame it’s not usable on my Android phone

  18. Leo says:

    Great job, very nice demo!

  19. devolute says:

    Very impressive. I’m on an incredibly old PC with Chrome here and it runs pretty well.

  20. Phil says:

    Shame I cannot play on iPhone as cannot activate keyboard

  21. ted says:

    Chrome works too.

  22. vivek dani says:

    Amazing stuff!!!
    These kind of things push limits of software & tech.

  23. Keehun says:

    Wow! This is really fluid, amazing, and takes only tiny CPU. Great!

    What kind of scores can people get? I’m getting low 4000s

  24. JR Fent says:

    AWESOME! Shows your mad skills Doug. Great job.

  25. James says:

    awesome game, It was to hard for me to move around and fire so I just liked to stay in the center.

    Feature Request
    Weapon Upgrades :)

  26. Pingback: pinboard May 14, 2010 — arghh.net

  27. slyy says:

    cool stuff!

  28. Phil Brammer says:

    Beautiful. Did it take ages to program?

  29. Andy says:

    Awesome. I love it!

  30. tony says:

    great stuff…

  31. Doug says:

    Ali Macdonald: I had implemented sound and had it working fairly well on Safari but Chrome and Firefox gave me trouble so it’s been disabled. I’ll eventually get back to it :)

    Phil Brammer: I started this at the end of January and worked on it off and on since then. If you look at the project history in git here’s a HUGE gap in March when I wasn’t working on it because work got crazy hectic around that time so I would just come home and sleep :)

  32. can we agree that soon we will no longer be dependent on flash?

  33. Kevin Roast says:

    Nice work, very close to the original! Obviously I *cannot* resist a shameless plug of my canvas asteroids game: http://www.kevs3d.co.uk/dev/asteroids

  34. Pingback: Un juego totalmente hecho en HTML5 « Luigi Keynes

  35. Doug says:

    Kevin Roast: I saw your game a couple of weeks ago, awesome work!

  36. Incredible! Feels EXACTLY right!

    -An old guy.

  37. Pingback: HTML 5 Asteroids | Doug McInnes | portail de news (nouveautés)

  38. Dave says:

    Awesome. I take it sound has yet to be implemented?

  39. Cutter says:

    A wonderful recreation of a nice coin-op of the golden age: could you add some sound, when and if possible? And, you could add the hyperspace effect on the ship, and add the small UFO also, if you want your recreation more faithful. I suggest you, if canvas allows it, to program another “pumped” asteroid along with this one, with colored graphics, sounds and some new design. in the main menu you could put starts for the vanilla one and the pumped one! Thanks anyway for your effort!

  40. Josh says:

    I just spent 30 minutes discovering I’m as bad at this game as I ever was. Space is a crazy place. Nice work.

  41. Wayne says:

    It’s gorgeous, and great work, but would be /so/ much better in white on black rather than black on white.

  42. rjg says:

    Wow, top notch excellent and fun! Really impressive what you can do with canvas, really amazing.

    Would be nice if you had a way to do custom keyboard, or just a few choices there. my roommate had this machine in our place in college and the keys would match up just like the arcade using: z-x (rotate) and /-right shift (thrust – fire). You could then use spacebar for hyperspace. Also, using the shift key is killer for laying out a tight burst of shots. ;)

    F-n awesome I love this game!

  43. Doug says:

    Dave: I got some sounds effects working fairly well in Safari but it was inconsistent between browsers so I disabled it for now.

    Cutter: I’m currently working on iPad controls. The source is on GitHub so feel free to hack at it!

    Wayne: If you’re on a Mac hit Command-Alt-Ctrl-8 ;) Actually I prefer it white on black but should be straightforward to add an option!

    rjg: Good ideas! Hyperspace is definitely slated for the future.

    Thanks everyone for the kudos!

  44. FreeRange says:

    Great Job! We all are looking so much forward to the death of Flash and all these wonderful efforts help! Free The Internet!!!!!!

  45. Tanner says:

    the original game only let you have 4 bullets onscreen at a time

  46. Chris Martin says:

    I noticed a couple of errors in firefox 3.6.3. If you hit the space bar rapidly to fire, it sends you to the bottom of the page. Seems like the game is loosing focus? I tried clicking inside the window but it still did the same.The other is after you thrust, you cant slow your self down. I don’t know if that’s an error or not. Hope this helps if those are errors, if not, april fools.

  47. This is awesome.

    Is there anyway to get the code because I’d love to see how this is done and play around with the code.

  48. Scratch that last comment. The link I followed to get here took me directly to the game but once I posted the comment it took me to this page which had the download link.

    Still awesome though. Thanks for the effort.

  49. It seems as though the score above 10000 does not indicate correctly.

  50. Tin says:

    Amazing! That’s great – just needs some sound… any idea how Google did that with their Pacman?

  51. Doug says:

    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 :-D

  52. Bobby Bones says:

    Have you looked at your site in Chrome. doh!

  53. Excellent implementation of Asteroids

  54. da bishop says:

    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.

  55. Luka says:

    great game, just lacking back control (as in original)

  56. Hans says:

    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?

  57. Pingback: Welcome Visitors | Doug McInnes

  58. Mark How says:

    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

  59. Red says:

    http://asteroidsinc.com

    Here is a HTML5 game I created which is also loosely based off of the original asteroids game.

  60. Mike London says:

    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

  61. Pingback: JS (extra) exercise – Simple hit test | Software Studies for Media Designers

  62. Looks like Firefox saw the light and fixed the bug on 2011-08-23. If isPointInPath() now works everywhere, would that be faster than the script you mentioned?

    • Doug says:

      George:
      Awesome! Thanks for the heads up. I’m sure it does — it’s probably implemented in a simular way though in complied code.
      Plus IIRC I had to do the matrix transformations by hand in Javascript (because you can’t get the current transformation matrix out of a canvas sadly) whereas this method will use the ones that have already been applied in the current context. Big win!

  63. Pingback: JS (extra) exercise – Simple hit test | Web Media Development

  64. Pingback: JS exercise 14 – Simple hit test | Web Media Development

  65. Pingback: HTML5 Canvas Game: Moving with Dirty Rectangles - Programming Tutorials, Tips, and Tricks

  66. willys says:

    IE works with the html5 doctype <!DOCTYPE HTML>

  67. Fernando says:

    Nice work. It helped me on my research. Asteroids will always be a classic game, in my case it was the first quarter I inserted on a video games machine.

    I will fork to translate texts to French and Spanish , and upgrade the sounds ;)

    Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>