JQLife

I mentioned a couple weeks ago that since getting the hang of CSS and discovering jQuery (a Javascript framework that’s a huge improvement on a language that feels like it was created by government committee) I was starting to enjoy web programming again.  Several nights ago, I woke up and couldn’t get back to sleep, so I thought I’d take the opportunity to work on something new.   In about three hours, I threw together a little game based on something I played once on the Commodore 64, and got it functioning.

That’s not public yet, though, because I’m having artistic differences with myself about how I want to finish some of the final details.  I do that a lot: get the project 90% finished — usually in my head — and then get hung up on one part I can’t decide on, or new features I keep thinking of, and it never gets finished.  Anyway, while I’m pondering that one, I made a different one to share.

It’s called JQLife, since it’s a version of Life done in jQuery.  Life is really more of a toy than a game, and it’s been around about as long as there have been computers.  It’s a very simple simulation of cellular life and death.  There’s a grid of cells, with each cell having up to 8 neighbors.  In the simplest version, each cell lives or dies according to how many live neighbors it has:

• 0-1: cell starves and dies
• 2: cell stays as it is
• 3: cell comes to life (or stays alive)
• 4-8: cell suffocates and dies

So you start the grid out with a bunch of live cells, and then on each turn all the cells die or come to life based on those rules.  As I said, it’s more of a toy or programming demonstration than a game, since there’s nothing for a “player” to do except decide how many live cells to start with and then watch it work.  You can also adjust the speed once it’s running.  If the simulation gets to the point where it no longer changes, or it switches back and forth between two states, then it stops and says it’s reached equilibrium.

The game programming is all in jQuery/Javascript, and there’s a bit of HTML::Mason on the server end that creates the grid to hold the cells.  There’s no Ajax, since I couldn’t think of a purpose for it here.  All the CSS and scripting are kept in their own separate files, so if you view the source of the page, you’ll find nothing but clean and orderly HTML.

It’s not meant to be pretty, but I think there are a couple nice touches in the interface: first of all, all changes are made dynamically on the page, so you never have to wait for a new page to load.  When you start or stop the game, the proper buttons are hidden or shown with jQuery/CSS, for user-friendliness.  There’s a ton of potential for that kind of thing on web pages today.  The gray area that tells you what’s happening is updated with jQuery’s prepend() function, and uses overflow:hidden to contain the log in that area.

It’s not fancy and probably not overly efficient, since it’s a first draft made on the fly, but that’s okay.  It’s just a small demonstration of what can be done in a couple hours with jQuery/CSS/HTML::Mason.  I may extend it by having more states than dead and alive, like having cells grow through three sizes and burst, or by letting the viewer turn specific cells alive or dead, or by using other more interesting formulas.  Or I might just leave it as-is and work on something else that has the potential to be more useful or fun.  We’ll see.

(Here’s a link to it again: JQLife.)