Question

Hy,
I am trying to implement an Connect Four Game in javascript / jQuery. First off this is no homework or any other duty. I’m just trying to push my abilities.

My “playground” is a simple html table which has 7 rows and 6 columns.
But now I have reached my ken. I’m stuck with the main functionality of checking whether there are 4 same td’s around. I am adding a class to determine which color it should represent in the game.
First I thought I could handle this with .nextAll() and .prevAll() but this does not work for me because there is no detection between.
Because I was searching for siblings, when adding a new Item and just looked up the length of siblings which were found and if they matched 4 in the end I supposed this was right, but no its not 😀 Is there maybe any kind of directNext() which provides all next with a css selector until something different comes up ?

I will put all of my code into this jsfiddle: http://jsfiddle.net/LcUVf/5/

Maybe somebody has ever tried the same or someone comes up with a good idea I’m not asking anybody to do or finish my code. I just want to get hints for implementing such an algorithm or examples how it could be solved !

Thanks in anyway !

Answer 1

DOM traversal is not particularly efficient so, when you can avoid it, I’d recommend doing so. It’d make sense for you to build this as a 2D array to store and update the state of the game. The table would only be a visual representation of the array.

I know that, normally, you would build the array with rows as the first dimension and columns as the second dimension but, for the purposes of being able to add pieces to each column’s “stack,” I would make the first dimension the columns and the second dimension the rows.

To do the check, take a look at this fiddle I made:

http://jsfiddle.net/Koviko/4dTyw/

There are 4 directions to check: North-South, East-West, Northeast-Southwest, and Southeast-Northwest. This can be represented as objects with the delta defined for X and Y:

directions = [
  { x: 0, y: 1  }, // North-South
  { x: 1, y: 0  }, // East-West
  { x: 1, y: 1  }, // Northeast-Southwest
  { x: 1, y: -1 }  // Southeast-Northwest
];

Then, loop through that object and loop through your “table” starting at the farthest bounds that this piece can possibly contribute to a win. So, since you need 4 pieces in a row, the currently placed piece can contribute in a win for up to 3 pieces in any direction.

minX = Math.min(Math.max(placedX - (3 * directions[i].x), 0), pieces.length    - 1);
minY = Math.min(Math.max(placedY - (3 * directions[i].y), 0), pieces[0].length - 1);
maxX = Math.max(Math.min(placedX + (3 * directions[i].x),     pieces.length    - 1), 0);
maxY = Math.max(Math.min(placedY + (3 * directions[i].y),     pieces[0].length - 1), 0);

To avoid any issues with less-than and greater-than (which I ran into), calculate the number of steps before looping through your pieces instead of using the calculated bounds as your conditions.

steps = Math.max(Math.abs(maxX - minX), Math.abs(maxY - minY));

Finally, loop through the items keeping a count of consecutive pieces that match the piece that was placed last.

function isVictory(pieces, placedX, placedY) {
  var i, j, x, y, maxX, maxY, steps, count = 0,
    directions = [
      { x: 0, y: 1  }, // North-South
      { x: 1, y: 0  }, // East-West
      { x: 1, y: 1  }, // Northeast-Southwest
      { x: 1, y: -1 }  // Southeast-Northwest
    ];

  // Check all directions
  outerloop:
  for (i = 0; i < directions.length; i++, count = 0) {
    // Set up bounds to go 3 pieces forward and backward
    x =     Math.min(Math.max(placedX - (3 * directions[i].x), 0), pieces.length    - 1);
    y =     Math.min(Math.max(placedY - (3 * directions[i].y), 0), pieces[0].length - 1);
    maxX =  Math.max(Math.min(placedX + (3 * directions[i].x),     pieces.length    - 1), 0);
    maxY =  Math.max(Math.min(placedY + (3 * directions[i].y),     pieces[0].length - 1), 0);
    steps = Math.max(Math.abs(maxX - x), Math.abs(maxY - y));

    for (j = 0; j < steps; j++, x += directions[i].x, y += directions[i].y) {
      if (pieces[x][y] == pieces[placedX][placedY]) {
        // Increase count
        if (++count >= 4) {
          break outerloop;
        }
      } else {
        // Reset count
        count = 0;
      }
    }
  }

  return count >= 4;
}