How to Create a Simple Card Matching Game in JavaScript Part 1

When learning a new programming language, I have found it easier to learn when applying it to a project. If you are familiar with HTML, CSS, and JavaScript and would like to take your skills to the next level, please follow this tutorial series in creating a simple card matching game.

Credit goes to Jp Silver for help building this game. If you would like to give a shout out to Jp Silver, tweet him @ScifiDynamic or visit his site at amd-overclock.com.

What You Need

You’ll need a text editor, 10 images, and your project folder setup. The project will have one main file called index.html and one main folder called media. The folder media will contain the folders backgrounds, js, css, and cards.

  1. /media
    • /backgrounds
      • jpg
    • /js
      • js
    •  /css
      • css
    •  /cards
      • 1.png
      • 2.png
      • 3.png
      • 4.png
      • 5.png
      • 6.png
      • 7.png
      • 8.png
      • 9.png
      • cardBack.png
  2. index.html

You can download the blank project by clicking the following link: Card Matching Game – Javascript. The background image came from Pixabay.com and the other images were created by me.

Getting Started

To get this project started, let’s go ahead and open index.html in your favorite text editor. Please copy and paste the code below into index.html. After you’ve done that, I’ll provide a short explanation of each line.

<html>
 <head>
 <title>Card Matching Game</title>

 <script type="text/javascript" src="media/js/main.js"></script>
 <link rel="stylesheet" href="media/css/main.css">
 </head>

 <body background="media/backgrounds/bg_main.jpg">

 <div id="cardHolder"/>
 <script type="text/javascript">
 addCards("cardHolder");
 </script>

 </body>
</html>

If you’re familiar with HTML, you can skip this part as most of is just the shell for our game. If you are not familiar with HTML, let’s break down each section so we can get a better understanding of the game.

<html></html> : Every web page starts and ends with this element. This tag tells the browser that it should display html content and format it accordingly.

<head></head> : The <head> tag holds external file links, information about the pages, styles, and more. In our case, we’ll place the title, a link to the javascript file, and a link our css file. The title is encased in the <title> tag.

<script></script> : On line 5, we are calling in an external javascript file. This happens by specifying the type, text/javascript, and then specifying the location using src, media/js/main.js.

<link> : This tag calls in an external stylesheet. We specify the relationship, in the tag it’s shortened to rel, and then the location of our stylesheet, media/css/main.css.

<body> : Next, we have the body tag. This tag is where hold all of the page contents for our game, images, buttons, text, etc. We’ve added an attribute labeled background=”media/backgrounds/bg_main.jpg” and this points to our background image. Please make sure you are use the right file extensions otherwise, they will not work.

Lines 11 through 14 :

<div id=”cardHolder” />
<script type=”text/javascript”>
addCards(“cardHolder”);
</script>

These lines contain a div tag, a script tag, and a piece of JavaScript. The div tag is there to define a section of text or content and I’ve placed it there to separate it from the rest. The div tag is assigned with the attribute of id=”cardholder” so we can reference it later.

The script tag tells the browser that anything between <script type=”text/javascript> and </script> is to be interpreted as JavaScript. This is called an inline script because it is directly embedded within the HTML. Inside of our script tags, we have the function addCards(“cardHolder”); More on this later.

The CSS

Now that we have our index.html file setup, we are going to edit main.css. Lines that start with @keyframe applies towards an animation. The 0% represents when the animation is at to 0, or just started. The 100% represents when the animation is complete. For example, in @keyframes flipBack, the width starts out at 150px when the animation starts. When it is complete, the width gets set to 5px. flipFront and slideIn follow the same general structure, but the CSS applied is different in each case.

@keyframes flipBack {
 0% {
  width: 150px
 }
 100% {
  width: 5px
 }
}

@keyframes flipFront {
 0% {
  width: 5px
 }
 100% {
  width: 150px
 }
}

@keyframes slideIn {
 0% {
  position: absolute;
  top:0;
  bottom: 0;
  left: -100%;
  right: 0;
 }
 100% {
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
 }
}

div {
 width: 600px;
 height: 600px;
 position: absolute;
 top:0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 animation: slideIn 4s;
 animation-fill-mode: forwards;
}

In this post, we’ve covered the project setup, index.html, and main.css. Your game should look like the screenshot below and it doesn’t look like much yet. In part 2, we’ll be building on our JavaScript file to add functionality to the game. Click here to read Part 2.

Daniel Williams

One thought on “How to Create a Simple Card Matching Game in JavaScript Part 1

  1. Pingback: How to Create a Simple Card Matching Game in JavaScript Part 2 - Game Building Tools

Leave a Reply

Your email address will not be published. Required fields are marked *