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.
A basic overview of the course and a look at the game we will be building.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Using the simplest way to add audio to a game, we'll add to sounds that play from mp3 files on the server.
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.
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.
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, MacMost.com, 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.