HTML5 Space Invaders like game with SVG

For my upcoming book HTML5 in Action, I wrote a chapter on creating a game like Space Invaders with SVG. The tutorial teaches you various methods for creating visual assets with vector graphics and XML.After creating the visual assets, it teaches you how to combine everything with JavaScript. The JavaScript isn’t too complex and I walk you through every step of the way. Great for those who want to learn how to create re-sizable graphics for in-browser use.

Play SVG Aliens at html5inaction.com and download the source code at the book’s official page.

 

Edit 8/18/2012: Updated the game’s graphic and added a playable link to the game.

You can play SVG Aliens at html5inaction.com and get the source code by downloading it from Manning’s HTML5 in Action page.

8 thoughts on “HTML5 Space Invaders like game with SVG”

  1. I like your game! I’ve also written a Space Invaders clone to explore HTML5 and SVG, which you can find at http://alchemise.net/invectors. So I’m particularly interested in reading about your experiences/advice in writing games using SVG and HTML5. I do think it offers advantages over canvas for many scenarios. Cheers.

    1. Wow, this is really awesome and very well put together. The book’s version is not quite as advanced because we tried to keep things simple. Still there might be some snippets of useful information since (as I’m sure you already know) information on SVG is kinda sparse and hard to find.

      1. Thank you very much for your feedback, Ash. Like all these things, it started out very simply and evolved into something more advanced over time. I’ve learnt a lot along the way. Choosing something simple and fun to develop is a great way to learn a new technology . I’m now looking at releasing it as a Windows 8 app, and so far the conversion has been remarkably simple. And that’s one of the great advantages of using HTML5. Regards, Mike.

Leave a Reply

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