The entirety of the app will be contained in the game div, so this file won't change at all. We'll create index.html, which will just be a regular HTML skeleton putting in JS and CSS. I will place a link to the JavaScript file at the end of each version so you don't get lost. Version 0.1, 0.2, 0.3, until reaching version 1.0. This is the way we're going to do it.Įach instruction will be a version. Now, there are probably a million and one ways to create this game.

Show back of card initially and flip on select.

Determine if two selected cards are a match and hide them.

Only allow two cards to be selected at a time.

Duplicate the cards to have 2 sets of 12.

Building this whole game at once might seem a bit overwhelming, but if you break it into small tasks, each task will seem achievable until it's done. The game should be different every time the game is refreshed.Ĭlick the demo below to get an understanding of what we'll be creating.īefore writing any code, we need to get an idea of the actual steps to take to go from nothing to finished product. If it's not, the cards will flip back over to face-down. When two are chosen, if it's a match, both cards will disappear. Clicking on cards will flip them over, revealing the value. The card faces consist of pairs of matches.

The premise of the game is to have a grid of 24 face-down cards.

We're also going to use some ES6 and some basic DOM concepts, but you can learn and follow along even if you don't know them yet. Basic knowledge of JavaScript syntax and datatypes.Since the memory game reminded me of the card game from Super Mario 3, I decided to use that as the basis for the style of my app. I decided such a task really doesn't require any libraries like React or jQuery, so I made it with plain JavaScript. I was presented with a coding exercise to make a memory game using any language.

Memory card game javascript