Implementing Conway’s Game of Life With React — Part 1
React is an open-source javascript library used to build user interfaces. Since its release, React has become more and more popular. Having this in mind, why not carry out some experiments to see how it behaves! That’s why I decided to implement Conway’s Game of Life in React.
The idea to implement this, aside from what I have previously mentioned, is simply because it sounds like a fun thing to do in React and a good challenge to learn a thing or two. In case you are wondering the project can be found here.
The implementation of Game of Life will be divided in two parts. This first one will focus more on the structure of the project. The second part will be more focused on implementing the logic and seeing the “magic” happen.
What is The Game of Life?
The Game of Life was first introduced by a British mathematician named John Horton Conway in 1970. The point is to define an unpredictable cell automaton, which is a grid of cells, where each has a finite number of states such as on or off.
So what does the actual game consist of? The game revolves around a set of rules which will recursively interact with the current state of the grid. This is why it’s also called a zero-player game. The game consists of an infinite, two-dimensional orthogonal grid of square cells.
Each cell can be either dead or alive, hence the state being similar to on or off. Every cell will interact with its 8 neighbours. These neighbours are the cells that are horizontally, vertically and diagonally adjacent to the current cell.
We have 4 rules that are in place for this:
1. A live cell with less than two live neighbours dies.
2. A live cell with two or three neighbours lives on to the next generation.
3. A live cell with more than tree neighbours dies.
4. A dead cell with exactly three neighbours is reborn and becomes a live cell.
So when the game starts these rules are going to be applied and update the state of the grid for the next generation. The idea is that we are going to evaluate the live cells and their neighbours to know in which state they will be in the next generation.
Setting up the project
Now that we know the game rules, let’s do the setup so that we can start. First, let’s create the project with React. In your console, navigate to the place you want to store your folder and write the following:
create-react-app game-of-life
cd game-of-lifeNow that our project is created let’s clean it up. Delete the App.test.js and logo.svg files and create a folder named logic in the src folder. Inside this folder, logic, create a file named Universe.js.
It should look something like this:
Drawing the UI
Now that we have our structure set up, let’s start by drawing the user interface in the App.js render function. One thing that may be useful is to have a header. In this one, we are going to give the user the opportunity to tell us how many rows and columns the grid will have. Here we are just assuming the grid that will be seen by the user. The logic of the game will use an infinite grid. We are also going to add two buttons: a start button, to make the game run, and a stop button, to make the game stop. Also we are going to add the structure so React can load the grid. Keep in mind that from now on the grid is going to be referred has board. The code should look something like this:
Now let’s replace the css in App.css with our css.
The project will not run with only this in place. At this stage, let’s search and add what is missing from our App.js file. We need a function to change the number of rows and a function to change the number of columns. Also we need a function to render our board. A function to start and stop the game and, of course, a function to run the actual game. Since our visual board will not be infinite, we will restrict it to a maximum of 90 columns and 20 rows. This will be the default size of the board. Your code should look like the following:
After all this, we end up with the html structure for our game. Although the board doesn’t show up, we can now see how our header looks like.
Let’s finally add our board to the game. For this we are going to need to create a nested for loop. He will be responsible for the creation of every rows and columns and add the respective cells to our board. So add the following to the renderBoard function in App.js.
Also add a new component named Cell after the App class. This will be needed to draw each cell of the board.
Let’s not forget to add the css for our cells. Add the following snippet to your App.css file.
With this in place our game will look like this:
So now we have the visual layout set up. We still have to make it actually do something. We need to make the buttons work, the inputs work, and add behaviour to each of the cells on the board. The next post in this series will focus more on implementing the game logic, so the behaviour of the cells will only be added then.
The functions are in place, they just need to do something! So change the code of the handleRowChange, handleColumnChange, startGame and stopGame to look like this:
The last thing missing is the state of the board. This will be useful so that we can control when the user can change the state of the board, and also to prevent the case where a user presses the start button multiple times and keeps adding to the interval. Add the following to your constructor in App.js:
Now we can control the number of columns, rows, and also when to start and stop the game.
This is the end of the first part. In the next part we will implement the logic of the game so that we can “play” and see how different patterns behave.
I love building products and I found my place to do so at Runtime-Revolution. If you are interested in who we are and what we do, make sure to reach out!
