Build the Game of Life
4.6 (78 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,483 students enrolled

Build the Game of Life

Master HTML, CSS and JavaScript by building a game
4.6 (78 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,483 students enrolled
Last updated 1/2020
English
English [Auto-generated]
Current price: $23.99 Original price: $34.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 1.5 hours on-demand video
  • 34 articles
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • JavaScript programming
  • JavaScript event handling
  • How to interact with the web page using JavaScript
  • How to create the Game of Life in a web page
Requirements
  • Basic HTML, CSS, and JavaScript Programming Skills
Description

Welcome to Build the Game of Life, a project that takes you through building a generative, cellular automaton game from start to finish in a one page app using HTML, CSS and JavaScript. This project is a great way for you to integrate your skills with markup, style and behavior by creating an interactive and dynamic application right in your browser. In this project we’ll make heavy use of the DOM, events, timing and simple logic to create a truly generative application.

Who this course is for:
  • Beginner to intermediate web developers
Course content
Expand all 66 lectures 01:50:18
+ Build the Game of Life
9 lectures 12:51

Welcome to Building the Game of Life, a project that takes you through building a generative, cellular automaton game from start to finish in a one page app using HTML, CSS and JavaScript. This project is a great way for you to integrate your skills with markup, style and behavior by creating an interactive and dynamic application right in your browser. In this project we’ll make heavy use of the DOM, events, timing and simple logic to create a truly generative application.

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!

Preview 03:42

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.

Preview 01:30
Prerequisites and Tools
01:48
Exercise: Play the game of life on paper
01:48
Observations about the Game of Life
00:21
Field Trip: Learn more about the Game of Life
00:12

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.

Preview 01:54
The Game Plan: Big Picture
00:56
Audience Question
00:37
+ Create the View
10 lectures 16:06

Let’s lay the groundwork for our Game of Life interface by building the first part of our view with HTML and CSS. Once we’ve done that, we’ll build the grid in the view with JavaScript, and as we do we’ll cover everything about the grid and how it’s going to work. By the end of this module, we’ll have a lot of groundwork complete for building the rest of the application.

Preview 01:54
Code the Markup with HTML
01:31
Code the Style with CSS
00:37
Exercise: Think about the grid
00:47

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...

Create the Grid
01:45
Overheard on the forum
00:55
Exercise: Try creating the grid
00:28

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.

Create the grid with JavaScript: Overview
06:29
Create the grid with JavaScript: Write the Code
00:08

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.

Crash test the Grid
01:31
+ Interact with the Grid
10 lectures 16:35

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.

Introduction
01:59

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.

How to turn on a cell
02:02

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

DOM Events Puzzle
1 question

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).

Add a click handler
02:17
Add a click handler: Write the code
00:15

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?

Crash test the click handler
01:06
Take a Break: Explore the Game of Life
00:19

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.

Handle button clicks
02:30
Exercise: Design the Button Handlers
00:59

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.

Implement the button click handlers
03:36

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.

Crash test the button click handlers
01:32
+ Create the Grid Model
14 lectures 27:21

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.

Introduction
02:01
Design the model
01:08
Overheard on the forum
01:08
Code the grid model: Write the Code
00:46

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

Code the grid model
04:18

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.

Crash test the grid model
01:51
Exercise: Think about the grid model
00:38
The rules of the Game of Life: Overview
00:50

We're ready to apply the rules of the game to the cells in the grid, so follow along in the video.

Preview 04:46
Compute one generation: Overview
00:34

Compute one generation of the Game of Life.

Compute one generation
06:48

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.

Crash test the code to compute one generation
01:57
Exercise: Research the setTimeout function
00:11
Take a break: Generative applications
00:23
+ Update the View
11 lectures 19:23

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.

Introduction
02:04
The game plan for the view
01:02
Update the View from the Model: Overview
00:38

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

Update the View from the Model
03:57
Audience question
00:36

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.

Crash test the View code
01:50
Exercise: Think about how to keep the game going
01:03

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.

Plan the timer
02:26
Code the timer: Overview
00:32

A a timer to keep the game going.

Code the timer
02:29

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.

Crash test the timer
02:45
+ Finish the Game
11 lectures 17:44

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!

Introduction
02:18
Code the clear button: Overview
00:48

Add the code for the clear button in this step.

Code the clear button
02:05

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...

Crash test the clear button
01:25

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?

We have a bug!
03:56

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".

Fix the bug
02:09
Bonus: add a random button
01:14
Final design and test: Overview
00:33

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

Final design and test
02:11
The finish line
00:59
The final code
00:05