Creating representative diagonal matrix: javascript

Question

I am trying to create a matrix to represent the diagonal options in a scalable board game where the number of rows and number of columns are defined by the player. The objective of the game is to beat your opponent to connect a string of your piece of a variable length defined by the players.

I have created horizontal and vertical matrix to represent the board, using loops to push rows into the respective matrix, however, I am having trouble dynamically creating a diagonal rule.

The purpose of these diagonal arrays is for checking against a win condition. ie X,X,X,X. I have given the elements within the array the value of the index within the vertical array for sense checking.

Here is an example of what I need from a 4 X 4 board;

verticalArray = [
    ['0,0', '1,0', '2,0', '3,0'],
    ['0,1', '1,1', '2,1', '3,1'],
    ['0,2', '1,2', '2,2', '3,2'],
    ['0,3', '1,3', '2,3', '3,3']
       ];

diagonalArray = [
    ['2,0', '3,1'],
    ['1,0', '2,1', '3,2'],
    ['0,0', '1,1', '2,2', '3,3'],
    ['0,1', '1,2', '2,3'],
    ['0,1', '1,3']
       ];

I am only able to use Javascript/jQuery at this point.

Answer 1

Do what your brain would do: pick a starting point (7 or 10 in this case) and follow the diagonal. (I'm guessing you want to go top-right to bottom-left too, but that's part homework.)

var verticalArray = [
  ['A1', 'B1', 'C1', 'D1'],
  ['A2', 'B2', 'C2', 'D2'],
  ['A3', 'B3', 'C3', 'D3'],
  ['A4', 'B4', 'C4', 'D4']
];
var W = verticalArray[0].length;
var H = verticalArray.length;

// Starting points (coordinates, not values)
var starts = [];
// Top line: A1-D1
for (var i=0; i<W; i++) {
  starts.push([i, 0]);
}
// Left line: A2-A4 (already have A1)
for (var i=1; i<H; i++) {
  starts.push([0, i]);
}
// Right line: D2-D4 (already have D1)
// @todo

console.log(starts);
// [[0,0], [1,0], [2,0], [3,0], [0,1], [0,2], [0,3]]

var validCoord = function(C) {
  return C[0] >= 0 && C[0] < W && C[1] < H;
};

var getDiag = function(start, dx) {
  var C = [start[0], start[1]]; // copy
  var diag = [];
  // Keep moving until coord isn't valid anymore (ie. outside grid)
  while (validCoord(C)) {
    diag.push(verticalArray[C[1]][C[0]]);

    C[0] += dx; // One to the left/right
    C[1] += 1; // One down
  }
  return diag;
};

var diagonalArray = [];
starts.forEach(function(start) {
  var diag;

  // For this starting point, move down+right as far as possible
  diag = getDiag(start, 1);
  diag.length > 1 && diagonalArray.push(diag);

  // For this starting point, move down+left as far as possible
  diag = getDiag(start, -1);
  diag.length > 1 && diagonalArray.push(diag);
});

console.log(diagonalArray);
// [["A1","B2","C3","D4"],  ["B1","C2","D3"],  ["B1","A2"],  ["C1","D2"],  ["C1","B2","A3"],  ["D1","C2","B3","A4"],  ["A2","B3","C4"],  ["A3","B4"]]

Demo fiddle.

More explanation

• getDiag() follows a diagonal, left or right (dx is delta x for left-ward (-1) or right-ward (1))
• It already does both diagonals, because its called for both dx in the starts.forEach
• The only left-ward diagonal output however is D1-A4, because D1 is the only existing starting point that can move left-ward
• YOU have to add the other starting points that can move left-ward. I've added a @todo and updated all comments.
• It might become very much more readable if you create a Coordinate class instead of all the [x, y] arrays, because C[0] >= 0 && C[0] < W && C[1] < H isn't nearly as readable as C.x >= 0 && C.x < W && C.y < H IMO