Create a 2-Dimensional Grid for our Tic-Tac-Toe Game
Tic-tac-toe, like many grid-based games, relies upon a 2-dimensional array data structure to hold the state of our grid.
A grid is a matrix. The outer array contains all the rows, and each row is an array of columns. Often each column value is referred to as a cell. In tic-tac-toe, we create a 3x3 grid of null values that will be replaced with Xs and Os as the user interacts with the game.
Kyle Shevlin: [0:00] The first step in making tic-tac-toe in React is to create a Game component that can hold the state of our game and all the other state values that we might need. For right now, I'll just return a div that has the word Game in it and add it to our app component. We can see that it renders in the UI.
[0:18] The next thing that we need is we need a grid. In tic-tac-toe, our grid is actually pretty simple. A grid is an array, and that array contains each row, and each row is also an array. This becomes a two-dimensional array.
[0:34] The starting grid is three values of null and we have three rows. However, I prefer to not have a hard-coded grid like this and I prefer to use a function to generate these values. To do that, we'll create a generateGrid function. This function will take a number of rows, a number of columns, and a mapper function.
[0:59] This function works by returning an array generated from the number of rows. We need to fill this because this array here is an empty array. It's an array full of empties for that many numbers. They're not even undefined yet. Fill now makes it undefined because we didn't pass it a value. We're going to map over that.
[1:18] If you remember, we have those nested arrays, so we're also going to here return an array. This time we'll use our columns to make that many items in the array. We'll fill those and we'll cal map and we'll use the mapper function that we passed in.
[1:38] To make a specific one for tic-tac-toe, we can call it newTicTacToeGrid and that's a function. We'll return the values from generateGrid. We'll have three rows, three columns and our mapping function will simply return null. Save that.
[1:56] Now we can add grid into our Game component as newTicTacToeGrid. We'll console.log(grid) for right now and see what values it generates. We open up the console and we look down here. We can see that we have three nested arrays in our top array and each of them has three values of null. We're at a great starting point.