Javascript Game Development

Youtube put an easter egg in their new player allowing you to play Snake while watching a video. Some guys on Reddit noticed that and an admin asked for a similar game in Flash or Javascript to be shown on their site when no ads are displayed.

So, i never ever put my hands on Javascript, for some reason i don’t like dynamically typed languages. Today i plucked up all my courage and formulated a goal: create a Snake clone in Javascript with the Canvas element. First thing was finding a proper IDE after messing around for a bit in Notepad++. I used the first one that came up in the Google search called Aptana. It comes in two flavors: as an Eclipse plugin or a stand-alone IDE. I used the later, not wanting to polute my current Eclipse installation. Next i had to hunt down some info on Javascript itself as i no idea how to use it. Mozilla has a nice introduction which enlightened me. Javascript is not so bad after all! It’s actually a pretty powerful beast, altough i have to get used to some concepts like prototypes and so on. Now i was ready to tackle the last bit, getting to know the Canvas element and how to get keyboard input. For this i consulted the Javascript reference of the W3C school. And that was pretty much all i needed. After 3 hours of learning and applying i now have a fully functional snake clone in Javascript 🙂

Your browser doesn’t support the Canvas element! Update to the latest Firefox, Chrome or Safari!

If you want to include that in your own site use this bit of html to load the script and insert the canvas with the proper size and id:

Not all that impressive graphically but i tried to keep it as clean as possible. You can find the source here. I started documenting it but then gave up as i wanted to have results fast. I don’t know whether this is the recommended way to develop games with Javascript and the Canvas element but it sure worked out for me. I can see how one could easily create a nice library for general game development with Javascript (and indeed there are a couple, just search via Google).

That was fun :p

One thought on “Javascript Game Development

Leave a Reply

Your email address will not be published.