How I created a Word Search Game for my Portfolio (React) Part 1

So what does it take to build word-search?

Lets Break this down..

We first need to understand the game itself.

Word search is a very common game often found in newspapers. Its quite simple the player just has to find the listed words inside of a grid if seemingly random letters.

So we know we need a grid with randomly placed letters and we need a way for the player to select possible words on the grid.

First lets handle selecting words

What we know:

• We know we are dealing with a grid so we can think in terms of x and y coordinates (or rows and columns)
• We know that there are only four ways to select a word: horizontal, vertical, diagonally up, and diagonally down.

Lets start with a simple matrix

Start with just a simple react component and then create 10x10 2D array filled with zeros.

Then use the javascript map method on the array state to render out the array as buttons and add some styles (I used tailwind) to get to something like this:

Now we need to keep track of clicks on these buttons. We know that we're going to need a click event listener to do that so I added an 'onClick' event to each button.

Next, we're gunna need some state to keep track of clicks and we need to decide what happens we we do click a button.

When we click a random button on this grid we should first increment clicks and then we can change the 0 to a 1 wherever we clicked as a way of acknowledging the click. In order to keep track of the location we will use the indexes of i and j for rows and columns respectively.

So far we are keeping track of clicks we can see if the user has clicked more than once. For now if the user has clicked more than twice let's just disable all buttons. To do this we are gunna need another state variable and set a disabled prop on each button.

Note: When we change state in react it is asynchronous. This means we have to check if the value of clicks is 1 instead of 2 because the clicks will only be incremented after the handleClick function has already run.

Let's also set up another button to reset the board(returning to our initial table of 0's and clicks to 0).

So right now the user can change 2 of the 0's on the board at a time before they have to reset.

This is useful because in word search you are usually trying to find the beginning or end of a word which is either in a straight line or diagonal.

Now all we have to do is check if the 2 places the user has selected are directly horizontal, vertical, or diagonal from each other.

So let's create a helper function to do so. In this function we are essentially checking whether the slope between the two cells is valid (hence the name isValidSlope).

Oops...

At this point I realized that in order to do this I had to somehow keep track of the 2 cells that had been selected. So lets handle this first...

We are definitely going to need some state to handle this so let's create initialize this to an empty array.

Since we are using a 2D array we should have access to the indexes in the map functions. We can use the indexes that we used earlier to select a cell, which are already passed into the handleClick function.

So if the user is clicking for the first time we can assume that this is the first cell. Then we can save this location to our state variable to keep track of it for the next click.

Now if the user has clicked more than once we can calculate the slope using the previous cell location and the current cell location the user just clicked on. We do this by subtracting the current row (i) from the previous row (previousCell[0]), and the current column (j) from the previous column (previousCell[1]). This will give use the rise and run values for the 2 cells, and we can pass this into our helper function!

Phew! Now that we took care of that we can get back to our isValidSlope function.

Now that we have slope calculated from above all we have to do is to see if it valid or not.

How do we know what a valid slope is?

Well, like we talked about earlier the only way a word can appear on the grid is horizontally, vertically, or diagonally.

This means that there is only a 4 types of possible slopes. So first let's take care of the easy cases. We know that is the word is either horizontal or vertical either the rise or run will be 0. So we can return true if that is the case. (See lines 2-4 in code below)

Now we have 2 more cases in which there could be a valid slope and that is diagonally up or diagonally down.

If the slope if diagonally down, then the rise must be the run * -1. So, this means if we add them together then we will end up with 0. (See line 5)

If the slope if diagonally up, then the rise and run must be exactly the same. So we can check if they are equal and if that is true we can return true. (See line 6)

In any other case we can return false.

Now we can check the slope and see if the 2 cells selected are lined up correctly. But why were we doing this again? Oh yeah, because we want to find words.

We can use this to select the cells in between the 2 cells and change all of the 0's in the cells into 1's.

In order to do this we can use the slope that we calculated earlier. We will start at the current cell and use the slope to calculate the rise and run factors we need to increment over the the cells between the current and previous cells. As we do this we will save each location to a new array called totalCells.

Then we simply set the table to the new version with all of the appropriate locations changed to 1's

we can move all of this code into a helper function that gets called when the user is on their second click called selectCellsBetween.

AWESOME!

We just finished the first part of this problem! We can now keep track of all the cells that are selected and make sure that the user is not just able to select any random cells.

In my next Blog We will build the grid of Letters...