Building JavaScript Games: Matching Game
5.0 (1 rating)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
9 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Building JavaScript Games: Matching Game to your Wishlist.

Add to Wishlist

Building JavaScript Games: Matching Game

Learning basic JavaScript programming while building a simple memory game that can be use on a website.
5.0 (1 rating)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
9 students enrolled
Created by Gary Rosenzweig
Last updated 6/2017
Curiosity Sale
Current price: $10 Original price: $40 Discount: 75% off
30-Day Money-Back Guarantee
  • 1.5 hours on-demand video
  • 15 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Students will learn how to place elements on a web page with JavaScript and use them in a simple memory matching game.
  • Students will learn JavaScript basics such as adding items to the page, responding to clicks, storing data in objects, creating and shuffling arrays.
  • Students will learn how to add sounds and a reward when the game is finished.
View Curriculum
  • You should have a basic familiarity with programming concepts like loops, variables, and if statements.
  • You should know how to create basic text files to use as html pages.

In Building JavaScript Games: Matching Game, you will be taken step-by-step through the creation of a simple matching game using only JavaScript. The game will teach you JavaScript concepts such as putting elements on the page, responding to clicks, creating and shuffling arrays, storing data in objects, using game logic, adding sounds, and more.

This course does not use any special libraries like jQuery. You will be using pure JavaScript that is compatible with all modern web browsers, including mobile browsers. For each lesson, you will be given the source code so you can compare it with your own as you develop the game.

You also get the final source code and can use it in any web project. The game is highly customizable, allowing you to easily substitute your own graphics, change the size of the puzzle, the sounds, and the win message.

Who is the target audience?
  • Anyone who wants to learn some JavaScript by coding a simple game.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
16 Lectures
Getting Started
3 Lectures 15:10

A basic overview of the course and a look at the game we will be building.

Preview 04:28

Review the elements you will need to create the game. Learn how to create a basic placeholder HTML page and load a simple JavaScript file that changes the contents of a space on that page.

Preview 06:28

Learn how to create a new image using JavaScript. Place the image on the page at a specific location.

Preview 04:14
Basic Functionality
3 Lectures 13:14

Make a function that will create any card you want at any location in the game. You can use this function to create multiple cards.

Card Creation Function

Make a function that creates a grid of cards. We'll pass into it the number of cards to include, horizontally and vertically. We'll also change the card creation function to hide the card's face, but remember its value.

Grid Creation Function

Learn how to tell a screen element to respond to a click by calling a function. This test function for now will reveal the value we have stored in each card.

Responding to Clicks
Game Logic
3 Lectures 14:05

Set each card to a specific numeric value. Reveal that value by changing the image of the card when it is clicked. Set up an array of values to be used in assigning each value to each card.

Flipping Cards

Instead of placing an ordered deck of cards on the screen, we can shuffle the array of numbers and use that random array to set each card. The result is a different order for the cards each time.

Shuffling the Deck

But storing the cards in variables and then comparing their values we let the user select two cards, and then remove them if they match. If they do not match, they are turned back to face-down. However, this happens so fast that the second card is never shown to the player.

Finding Card Pairs
Game Enhancements
3 Lectures 16:44

Use the setTimeout function to delay the comparison of the cards. This allows time for the player to review their two choices before the cards are turned over or removed.

Pausing Before Removing Pairs

Instead of making the player wait until the cards are removed or turned over, you can make a third action by the player force the game to evaluate the first two cards, and then select the next card immediately. Also prevent the player from selecting the same card twice to make a match.

Allowing Fast Play

You can keep track of how many matches the player has made and then notify them after the last pair has been found. A simple alert can be used, or a new element on the page can be revealed with a message or access to more content.

When the Player Wins
Game Refinements
4 Lectures 23:44

A problem with HTML5 games is that elements can be selected and dragged on web pages by default. You can disable this for your game elements by setting the proper styles.

Disable Selection and Dragging

Using the simplest way to add audio to a game, we'll add to sounds that play from mp3 files on the server.

Adding Sound

Instead of the game being a set of free-standing functions and some global variables, you can encapsulate the game into a single function, mimicking a "class" like in other object-oriented languages.

Making a Game Object

If you would rather skip the lessons and get right to using the code, but want a quick overview, then you can use this lesson to see what all of the code does, line-by-line. Or, you can use this lesson as a review of the rest of the course.

Fast Review of the Code
About the Instructor
Gary Rosenzweig
4.5 Average rating
1,533 Reviews
10,468 Students
8 Courses
Producer and Host at MacMost, Author, Developer

Gary Rosenzweig is an Internet entrepreneur, software developer, and technology writer. He runs CleverMedia, Inc., which produces websites, computer games, apps, and podcasts.

CleverMedia’s largest site,, features more than 1,000 video tutorials for Apple enthusiasts. It includes many videos on using Macs, iPhones, and iPads. Gary has written more than 30 mass-market computer books, including the best-selling book My iPad, The MacMost Guide to Switching to the Mac, My Pages, ActionScript 3.0 Game Programming University, and Special Edition Using Director MX. He also has self-published titles such as 101 Mac Tips and The Practical Guide to Mac Security.

Gary has a computer science degree from Drexel University and a master’s degree in journalism from the University of North Carolina at Chapel Hill.