How to get started with web game programming?

July 16, 2010 4:12 PM

I want to develop a web game, and I need some advice on programming tools/frameworks.

I'm interested in developing a small web game that involves 2D graphics, minimal animation, and some database access. Something like a board game. I don't want to use Flash, for a variety of reasons, but I guess I'll consider it if there aren't any other good options.

I had a look at Wikipedia's list of JavaScript frameworks, but I'm not sure what I should be looking for. Can anyone recommend a toolkit I could use to get started, and/or some resources that would help me learn about the state of the art for interactive web games?

[I'm a career programmer with many years of experience, but I do scientific programming. I've done some web stuff, but that was back before Web 2.0.]

posted by Maximian to computers & internet (6 answers total)

Kdice was done with the google web toolkit.
posted by empath at 4:40 PM on July 16, 2010

Don't know why you wouldn't want to use Flash considering this is precisely its strong suit over any and all other web graphics options.

Here's a huge list of Flash graphics engines (game engines, 2D engines, physics engines, engine engines, etc.) Don't reinvent the wheel!
posted by Civil_Disobedient at 4:43 PM on July 16, 2010

I'm pretty sure state-of-the-art for graphics is to use some sort of plugin.

If you want to do HTML5, you might want to check out Chrome Experiments and see what tools and libraries people are using there. The examples are geared toward Chrome, but a lot of them aren't specific to WebKit.
posted by Loudmax at 11:42 PM on July 16, 2010

There are a few ways to go. First, you could build the whole thing by manipulating DOM elements (Inserting and deleting Divs, resizing them, changing their background images, etc). Secondly, you could use canvas tag as a graphics object and build all the elements as elements that are drawn there. Lastly, your game could be a mixture of these.

You could certainly build a board game using any of the popular JS frameworks to manipulate the DOM and talk to your backend. JQuery is dominate, but I like Mootools. You can't go wrong with either one. Either one of these has great Ajax support for talking to your backend.

Processing.js is a library might make your life easier if you decide to go with the second option.
posted by miniape at 6:02 AM on July 17, 2010

Flash is still the dominant web game platform. Javascript is viable but you will find fewer game libraries out there for you to build on. There's some being developed now: a couple to look at are Spritely and Akihabara.

You will probably want to use the <canvas> element for basic drawing. You'll also want some basic Javascript library to provide fundamental capabilities. jQuery is becoming the standard and works well, so use that unless some other major component you use prefers an alternative.

You have to decide early whether you care about IE support. Even in IE8 the Javascript engine is slow and you have to use some compatibility hack for canvas. IE9 will be better, but that's still a ways away.
posted by Nelson at 7:40 AM on July 17, 2010

Hm, Processing.js looks interesting and capable, but the non-trivial demos ran really slowly on my computer, which has a very fast multicore processor and lots of memory (could be a function of my browser, this is Firefox whereas I think the demos are designed for Chrome). I have some experience with JQuery, so I might give these a shot anyway.

I don't care too much about IE support, but I heard that Flash apps don't work on the iPhone.

I'm also looking at haXe, which has many appealing features (cross-platform, functional programming, strong typing), but I'm not sure how well it actually works.
posted by Maximian at 12:18 PM on July 17, 2010