Implementing Takuzu (part two)

In part one of this series, I coded up a basic 8×8 Tazuku board as a web page and populated it with an initial game. Time now to make the board interactive: I want to allow the user to alter cells with their guesses (or rather, “logically deduced answers”).

Example binary puzzleTo make it easy, rather than have the user type a 0 or a 1 in the cell, let’s capture a mouse click on the cell (and, of course, since you may guess I’ll be making this into a game you can play on your phone, capture a touch event) and automatically cycle through space, 0, 1. Hence, to change an empty cell into a 0, I’d click it once, to a 1, click it twice. If I make a mistake I can click it once or twice to get back to an empty cell.

Here’s the initial code I wrote:

  var hookCells = function () {
    var cells = $(".cell");

    cells.on("click", function (event) {
      var target = $(;
      var id = target.attr("id");
      var index = parseInt(id.substr(4, 4), 10);
      var newValue;
      switch (boardData[index]) {
        case " " :
          newValue = "0";
        case "0" :
          newValue = "1";
        default :
          newValue = " ";
      boardData[index] = newValue;

The first thing to do is to grab all elements that have class cell. We get back a jQuery collection object containing all such elements. Now we can add a click event handler to all of those cells. I prefer to use the new on() method for this, although using click() is valid.

In that handler, I grab the event’s target object (which is the element clicked on). The problem now is to identify the exact cell. In preparation for this, when I created the table I gave each cell a different name (that is, id) of the form cellNNNN, where NNNN is the cell number from the top left, going across each row and then down. I read the id attribute for the target object, extract the number part and convert it into an index. Now I can find the correct element in the data array, and execute a simple switch statement to calculate the new value. Then it’s time to update the board on screen and the data array. Piece of cake.

(Quick aside: yes, at the moment, I’m not using any type of MVC pattern. My presentation code is directly modifying the model. Something to make a note of and move on for now.)

I also added some code for some basic hover functionality so that it’s easier to play with a mouse:

    cells.hover(function (event) {
      var target = $(;
      target.css("background-color", "cyan");
    function (event) {
      var target = $(;
      target.css("background-color", "white");

In essence, when the mouse cursor is in a cell, the background color of the cell will be cyan in color, when it leaves the cell’s background will be reset to white.

Once I’d written this code, I played around a little with the result and quickly found two problems. One is fairly obvious right now, the other is perhaps a little more subtle. Basically, with the code as written, the user has the ability to change the preset 0s and 1s from the initial game, which is a little disconcerting to say the least. The other is that it’s extraordinarily easy to make a selection as the user clicks around the board. We should fix both of those, which is what I shall do next time. In the meantime, you can test out the part 2 code here.

Album cover for Hot Buttered SoulNow playing:
Hayes, Isaac - Walk On By (Album - Remaster)
(from Hot Buttered Soul)

Loading similar posts...   Loading links to posts on similar topics...

No Responses

Feel free to add a comment...

Leave a response

Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.

  •  Emphasize with italics: surround word with underscores _emphasis_
  •  Emphasize strongly: surround word with double-asterisks **strong**
  •  Link: surround text with square brackets, url with parentheses [text](url)
  •  Inline code: surround text with backticks `IEnumerable`
  •  Unordered list: start each line with an asterisk, space * an item
  •  Ordered list: start each line with a digit, period, space 1. an item
  •  Insert code block: start each line with four spaces
  •  Insert blockquote: start each line with right-angle-bracket, space > Now is the time...
Preview of response