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.
Great demo. I don’t remember from the original game… but should I be able to accelerate past my bullets?
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.
Nice work on the programming. I hurt some asteroids!
Not very playable in Firefox when the page keeps scrolling when I press the arrow keys.
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?
More awesomness!!!
Cool! You did a great job.
Accelerating past bullets is a feature not a bug! =) Very fun!
This looks spectacular on iPad. Now if only there were some way to bring up the soft keyboard so I could play it!
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.
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.
WHat am I talking about? Space bar is “fire”. Maybe “enter” could be mapped to hypersapce as well as down arrow
Makes me want to get a trackball!
great job.. move on with great images and sound effects .. as quake2 by google… http://code.google.com/p/quake2-gwt-port/
great work!!!
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?
Freaking awesome. I spent a lot of time in the bowling alley behind my school playing this game.
Shame it’s not usable on my Android phone
Great job, very nice demo!
Very impressive. I’m on an incredibly old PC with Chrome here and it runs pretty well.
Shame I cannot play on iPhone as cannot activate keyboard
Chrome works too.
Amazing stuff!!!
These kind of things push limits of software & tech.
Wow! This is really fluid, amazing, and takes only tiny CPU. Great!
What kind of scores can people get? I’m getting low 4000s
AWESOME! Shows your mad skills Doug. Great job.
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
Pingback: pinboard May 14, 2010 — arghh.net
cool stuff!
Beautiful. Did it take ages to program?
Awesome. I love it!
great stuff…
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
can we agree that soon we will no longer be dependent on flash?
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
Pingback: Un juego totalmente hecho en HTML5 « Luigi Keynes
Kevin Roast: I saw your game a couple of weeks ago, awesome work!
Incredible! Feels EXACTLY right!
-An old guy.
Pingback: HTML 5 Asteroids | Doug McInnes | portail de news (nouveautés)
Awesome. I take it sound has yet to be implemented?
very nice..
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!
I just spent 30 minutes discovering I’m as bad at this game as I ever was. Space is a crazy place. Nice work.
It’s gorgeous, and great work, but would be /so/ much better in white on black rather than black on white.
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!
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!
Great Job! We all are looking so much forward to the death of Flash and all these wonderful efforts help! Free The Internet!!!!!!
the original game only let you have 4 bullets onscreen at a time
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.
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.
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.
It seems as though the score above 10000 does not indicate correctly.
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
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?
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!