I wanted to try Backbone.js, having never used a JavaScript MVC framework before, so I started a project a few days ago to create a web app version of the Grandfather’s Clock variant of solitaire. I figured it would be an easy game to implement, and since I pretty much have it all working, it turned out to be pretty easy after all. You can check out my code on Github, and here is what it looks like:

I still have a ways to go, with the following things left to do:

• Recognize when you’ve won
• Recognize when you cannot win
• Save the game state so reloading will restore you to your previous game
• Allow the creation of new games via a method other than reloading the page
• Save your background choice
• Scale everything based on browser size
• Allow card movement via drag-and-drop (currently click-based)
• Testing!
• Various appearance tweaks

I plan on using HTML5 local storage to save the game state and background choice. Scaling the graphics based on browser size shouldn’t be too bad because I’m using SVG images for the kings, queens, and jacks – thank you vectorized-playing-cards. The hearts, diamonds, spades, and clubs are HTML entities, so they’re just plain text and can be scaled easily. I already have the diameter of the clock circle based on the size of the browser window. I just need to make card sizes adjust to fit everything on one screen. I may change the layout such that the clock face is on the left and the tableau is on the right, since most screens are wider than they are tall.

I want to add some unit tests just so I can try out a JavaScript test framework; I was thinking Jasmine. This whole project has been to allow me to experiment with new web frameworks. Backbone.js has been great so far, allowing me to organize much better than I’m used to doing. Normally, I’d have one big app.js with a lot of jQuery event handlers. Now most of my code is in templates that the JavaScript uses, as well as Backbone.js views and models.