- 1.5 hours on-demand video
- 34 articles
- 2 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- How to create the Game of Life in a web page
- Beginner to intermediate web developers
Watch this Guide to the Project video to get an overview about the project and how to navigate through the project and what to expect. Then, go to Getting Started to start your project!
To get started, we’re going to get a good look at the Game of Life so you know what the goal of this project is. You’ll see exactly where you’re headed so that you can confidently start implementing the game. By the end of this module you’ll have the game plan for how we’re going to tackle the implementation of the Game of Life.
Take a look at what this project is going to look like when we're finished by watching the video. In this video we step through all the ins and outs of this simple interface for 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.
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.
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.
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.
We're ready to apply the rules of the game to the cells in the grid, so follow along in the video.
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.
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.
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!