X or O? Playing w/ Multi-Dimensional Arrays…

Last week I had the opportunity to work with someone to improve some code I had written. The resulting code incorporated two-dimensional arrays. In the past, I have struggled with multi-dimensional arrays since I haven’t used them much, so I found it to be a very great learning experience. It also inspired me to continue practicing, which is why I am writing a basic tutorial on how to use multi-dimensional arrays in javascript to check for a winner in a simple game of tic-tac-toe.

First, let’s picture a tic-tac-toe board:

In tic-tac-toe, there are eight potential winning combinations of getting 3 boxes in a row with your marker (traditionally an X or O) by playing across, down, or diagonally.

So the winning combinations are:

123
456
789
147
258
369
159
357

We can think of each of these as it’s own array:

[1, 2, 3]
[4 ,5, 6]
[7, 8, 9]
[1, 4, 7]
[2, 5, 8]
[3, 6, 9]
[1, 5, 9]
[3, 5, 7]

Multi-dimensional arrays are nested arrays. So we can store (& nest) these winning combinations in one large array that we can later loop thru when we check to see if there is a winner:

largeArray = [
[1, 2, 3],
[4 ,5, 6],
[7, 8, 9],
[1, 4, 7],
[2, 5, 8],
[3, 6, 9],
[1, 5, 9],
[3, 5, 7]
]

So what’s the difference between getting an element from a one-dimensional array vs. a 2-dimensional array?

Well, with a one-dimensional array, you get the element by its index which is simple like this:

array[i]

With a two-dimensional array, you also get the element by its index, but you have multiple arrays to look at so you’ll be looking at multiple indexes as well. A two-dimensional array looks like this:

largeArray[i][j]

Let’s break this down…

The largeArray[i] portion is the outermost array (in our case, largeArray). The [j] portion of largeArray[i][j] is the index of the inner (nested) array inside largeArray.

Let’s say i = 0 and j=0 since we want to loop thru the arrays from the beginning. So our array would look like:

largeArray[0][0];

The 0 index of largeArray is the first element (which in this case is another array of [1, 2, 3]). Great. The second part is also looking at the 0 index but inside the nested array (not the outer largeArray). So inside [1, 2, 3]. The first element (index [0]) is “1”.

So largeArray[0][0] = “1”!

Remember! Arrays use zero-based indexing which is why 0 means it’s the first element in that array.

Let’s look at another example. What would largeArray[3][2] be?

Break it down: first, largeArray[3] is an array of [1, 4, 7].

Next, what is the element at index[2] in that array?

That’s right, it’s 7!

largeArray[3][2] = 7

Now that we know how multi-dimensional arrays work, let’s find out how we can use them to find a winner for our tic-tac-toe game.

I’m not going to write out the code for the whole game since that’s not the point of this article. But assume when a player chooses to place their marker in a box, the box become either an “X” or “O” (depending on who’s turn it is). If there isn’t a marker on a box yet, the box is empty/blank.

After a player has taken their turn and placed their marker, the checkForWinner function is ran:

checkForWinner() {
   for (var i = 0; i <largeArray.length; i++) {
      x = largeArray[i][0];
y = largeArray[i][1];
z = largeArray[i][2];
      if (box[x].marker == box[y].marker) {
if (box[y].marker == box[z].marker) {
if (box[x].marker != blank) {
winner = box[x].marker;
}
}
}
}
return winner;
}

OK what’s going on here? Let’s break it up:

We loop thru our 2-dimensional array looking at every winning combination one at a time.

In the if statements, we are first checking to see if the marker in the 1st box (largeArray[i][0]) is the same as the marker in the 2nd box (largeArray[i][1]). If it’s the same, it’ll then check to see if the marker in the 1st box is the same as the marker in the 3rd box (largeArray[i][2]). If it is, it means all three boxes from one of the winning combinations in our largeArray array are the same so there must be a winner right?! Not exactly…

We need to make sure the boxes aren’t empty since it’s possible to have 3 blank boxes in a row. So before we declare a winner, we’ll check if the 1st box is blank or not. If it’s not, it means the two other boxes aren’t either (since they are all the same, remember?). So if it’s not blank and there is in fact a marker in it, we have three boxes in a winning combination in a row with the same marker.

Winner, winner chicken dinner!

The winner is player who placed their marker last (the player who’s turn it currently is when the checkForWinner function was ran after they placed their marker).

Otherwise, if there is no winner, the game continues for another turn.

Thanks for reading!

Hopefully you were able to follow along even though I didn’t have the entire code-base for the full tic-tac-toe game.


It’s important to continue learning and improving your skills as a programmer. Multi-dimensional arrays were a weakness of mine so I wanted to get a better understanding of them and practice using them since I know I will run into them a lot in my career.

Cheers!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.