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”).

To 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 = $(event.target);
      var id = target.attr("id");
      var index = parseInt(id.substr(4, 4), 10);
      var newValue;
      switch (boardData[index]) {
        case " " :
          newValue = "0";
          break;
        case "0" :
          newValue = "1";
          break;
        default :
          newValue = " ";
          break;
      }
      target.html(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 = $(event.target);
      target.css("background-color", "cyan");
    }, 
    function (event) {
      var target = $(event.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.

  Loading links to posts on similar topics...