Build the Game of Life

So we have everything set up in our HTML page, except the actual grid. Remember, we've got some CSS already set up to style the table, but we still need the HTML. In this lesson's video we'll take a look at how we're going to represent the grid as an HTML table, and rather than entering a huge set of table elements by hand, we'll be writing code to do that for us, which we'll get to in just a sec...

Now that you've thought about how you might generate the table, let's work through writing the actual code. First, you'll need to create a new file, "code.js" to hold your code. You'll want to place "code.js" in the folder with your HTML and CSS. Remember, you've already linked to this file from your HTML.

At this point you should have a set of files, including "index.html", "life.css", and "code.js", all in the same folder. Open "index.html" in your favorite browser. If all goes well you'll see a nice grid displayed on your page with two control buttons.

The grid is in place, but it’s just sitting there, staring at us, doing nothing—–if only we could interact with the grid to turn on some cells. In this module we’re going to do just that, by adding a click handler and then using our CSS powers to turn on and off cells.

We’ll also add some buttons to the interface. The buttons will give us a way of controlling the flow of the Game of Life so we can start the game, stop it or continue computing new generations. We can also wipe the grid clear and start over. We’re going to setup click handler functions to do some work when the user clicks on the buttons. Then in later modules we’ll implement their complete functionality.

Before we wire up the grid so we can click on it, let's have a look at how we're going to leverage our existing CSS to turn cells (visually) on and off.

Remember that the DOM allows you to assign handlers to various events. Handlers are just functions that get called when the event occurs.

Now it's time to add a click handler to our code so we can add live cells to the grid. Here's what we're after: we want you to be able to click on a dead cell to change it to live, and then click on it again to change it back to dead (in case you change your mind). Remember, to do that, when a cell is clicked, our handler is going to make use of the two CSS classes live and dead. So, the click handler will be responsible for checking the state the cell, that is, live or dead, and then setting the cell to the opposite state (dead or live).

In this lesson, we test the code to add live cells to the grid. Follow along in the video below, and test yourself by reloading your page. Try clicking on cells in the grid. If you click on an empty cell---that is, a dead cell---you should see it come alive. If you change your mind, just click on the cell again to change it back to dead.

We've visually added live cells to the grid, so you can see when a cell is live or dead. But, so far, our grid doesn't actually do anything interesting. Think at a high level about what we still need to do to turn this visual representation into the Game of Life? What are the steps? Think about the model-view-controller design we talked about in a previous lesson; how does what you've done so far fit into that design?

The grid is in place, and we can add live cells to the game; now it’s time to get the buttons set up. We'll begin by getting the button handlers in place, and the initial button states working. Then, in later lessons, we’ll start filling in the game play.

Before we dive into the button handler code though, prepare by making sure you know exactly how the buttons are going to work. The buttons give us a way of controlling the flow of the Game of Life–--we can start the game, stop it, or continue computing new generations. We can also wipe the grid clear and start over. This lesson's video takes you through the functionality of the buttons in detail so you'll be ready to implement the code.

Okay, let's write some code. Your job in this lesson is to watch the video and follow along in your own code. Get the new code added to your "code.js" file if you haven't already and we'll test it in the next lesson.

It's time to test the buttons. When you reload the page, the buttons should be Start and Clear.

Click on the Start button. The button should change to Pause. That means the game is playing (and the playing variable is set to true). You should see "Play the game" in the console. Click Pause and the button should change to Continue, and playing will be false again. Finally, click Clear and the button on the left should read Start again, and playing should be false.

We go through all of this in this lesson's video, so follow along below and make sure your code is working in the same way.

We’ve got the view and the controllers mostly complete. Now what we need is a grid model. The model is where we’re going to store the state of the game. This is where we’ll keep track of the live and dead cells for computing the next generation of cells.

In this module we’ll get the grid model into place, so we can apply the rules of the game to the state stored in the model. Remember the rules of the Game of Life? If not, no worries! We’ll review the rules, and then implement the code to compute the next generation of life using those rules.

Follow along as we write the code for the grid model.

It's time to test the code for the model, and make sure that when we click on a cell in the grid, it's being stored as state in the array correctly. We'll test this code using the JavaScript console, so open your browser, load the page, and then open up the console. Watch the lesson video and follow along as we test our code.

Compute one generation of the Game of Life.

Now we've got code to play one round of the game. Again, we'll need to use the console to test the code, so follow along as we give our code a run through and make sure it works.

We’ve got on generation of life working, and we’re storing the state of the game in the grid model. In this module, the goal is to make sure that state is used to update the view (the grid in the browser page), and then keep the game going for multiple generations, so we can see our cells come to life over time. For that, you’ll learn how to manage the time of the game, and how that will work with the user interface so you can click on the buttons to pause and stop the game.

Add the code to see one round of life being generated.

Let's test the code we just added to update the view. At this stage, we're generating one round of the game: we set the initial state by clicking on the grid to make some cells live, we start the game by clicking the start button, and we compute the next generation in the nextGrid, copy that state to grid, and then update the view.

So let's give it a try in the browser and see what happens. If we've got everything right, we'll the Game of Life rules applied once to the cells in the grid, and see the cells update based on the results of applying the rules.

Before we dive into the code let's take a quick look at how we're going to use a timer in our code to create multiple generations of life in The Game of Life. Watch the video for this lesson to learn how this is going to work, and we'll get to the code in the next lesson.

A a timer to keep the game going.

Now's the big moment; we have our timer code implemented, so now we should be able to play the game and see multiple generations of life unfold. Let's give it a try... watch the video above to see our try at the game.

Notice that with a reproduction time of 100 milliseconds, the game moves pretty fast! Try larger and smaller numbers here, say 10ms or a second (1000ms). Which do you like better? Slower or faster? With a slower reproduction time---that is, a longer delay between calls to the timer function---you get a chance to see the steps of the game. This is helpful for debugging if you notice any problems with your code. But we think it looks a lot cooler with a shorter reproduction time, and 100ms works well.

We’re almost there, we just need to tie up a couple of loose ends. In this module, we’ll add way to stop the game and clear the grid. This is important functionality if you want to be able to play the game multiple times.

We’ve also got a bonus for you if you want to test yourself on what you’ve learned! If you want to, you can add a random button, so you can more easily try lots of different initial states. In this bonus, we’ll also increase the size of the grid so we have more room for more life. Then we’ll do one final test of the code, and we’re done!

Add the code for the clear button in this step.

Let's get this code tested! Load up the page, and add some cells, click the Start button to play the game for a few rounds, and then click on Clear. The game should stop and the grid should clear completely. Watch the video to see what happens...

We have a bug! Not all of the cells are being cleared from the grid when we click the clear button. What's going on?

Let's get that bug fixed. We know we need to copy the list of "live" cells from the nodeList we got back from getElementsByClassName("live") into an array first, and then we can iterate over that array and change each cell's class from "live" to "dead".

The big moment!! Run the final version of the game.