The Sudoku Challenge

I’ve challenged myself to create a game of Sudoku. Why you ask? Because it is broad enough to exercise all of the different Javascript skills I want to work on, while not being so complex as to be a big time sink on any one area.

In computer programming, it is not often the case that the challenge you end up with is the same as you conceived beforehand. Three days into it, I’m happy to say it is exactly as I had hoped for.

The Sudoku puzzle, like most web apps, breaks apart nicely into the MVC model. I wrote the model first and it was pretty easy. I made a two dimensional array to represent the squares, and a square object to fill each square. I hit a major snag when my outputs showed everything as working as it should, but then when I tried to output the board all at once, every square was filled with the value of the last square! It turned out at that point I didn’t understand closures as well as I thought I did, and instead of creating the 81 squares of the sudoku board, I was creating only one and changing it’s value. It was a pain to debug, but I came out of it really understanding Javascript closures.

The next part I worked on was the view. This was ridiculously easy because it is just made from html and css. My Sudoku Board is just 9 3×3 tables, and when there are multiple possible answers cells of this table can contain a table of its own. I decided to make the html this way because it was so easy, and really took only a couple of minutes. It had a big downside though. It meant my model and my view are basically working on two different grid systems, and I had to build a function to map the two to each other.

My original plan was to code it entirely without using jQuery, since jQuery makes interfacing with the DOM so easy. But as I started getting into it “the DOM way” I realized that it isn’t particularly difficult, just a hassle, to do it that way, and doesn’t offer up much in the way of skills. We live in a jQuery world, if you don’t believe that, just go to a few websites that you frequent and type jQuery() into the console. jQuery might as well be built into the browser. In the process I picked up a few new jQuery tricks, so I think switching over was a good decision. I’m glad I made that decision early on rather than having to redo a bunch of coding.

I’m not done with it yet, just wanted to give my brain a break and collect a few thoughts. It’s going to be pretty ugly when I’m finished with it. I’ll post the ugly version here, rather than creating a new post. But then I think I’m going to make a pretty canvas based  UI for it and probably turn it into a widget or something.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>