Thanksgiving is a great time to gather around the table and spend time with our families. In our household, it’s a tradition to play board games before we eat dinner.

Here’s a chance to practice your HTML and CSS coding skills and give your family a fun activity to do when you get together.

Code this Thanksgiving matching game in HTML and CSS and play it with your family and friends this year. It’s a coding and memory challenge! As a bonus, you can also color your own cards using our printable coloring pages.

Play Thanksgiving Match Game

Thanksgiving Coding Activity Gif

Video Tutorial

Printable Thanksgiving Coloring Activity

Before you start, you can print and color your own version of these Thanksgiving images. Simply color the images you want to use in the match game, take a picture of your artwork, then add it to your application as you would any other image.

Thanksgiving Coloring Activity

Download Printable Coloring Activity

This tutorial assumes you understand basic HTML and CSS. Let’s get started!

Table of Contents

What you need:

1. Text editor

You can use a simple text editor like Notepad, TextEdit, Sublime Text, etc. You may also use an online text editor like Repl.it to write and share your code.

2. Base HTML/CSS file.

Download the base folder and open the game.html file. This folder contains all the images and files you will need to complete your game. 

The game functionality is powered by JavaScript in the logic.js file.

CodeWizardsHQ students, you can download the starter files called “x_matching_game” in your editor and easily share your project URL with family and friends. That’s what I’m using for my project!

Recommended: HTML & CSS Classes for Kids

Step 1: Add a background image to the page

We’re starting with what looks like a blank page. 

In your CSS, add a background image property to the <body> element and cover the entire page. By default, the background is repeated.

Add this code:

body {
  text-align: center;
  background-image: 
url('autumn.jpg');
  background-size: 50%;
}

Output

Thanksgiving Coding Activity - Step 1

Hint: To change the background, use a different JPEG or PNG image file in place of ‘autumn.jpg’.

Step 2: Add your game area and title it

In your HTML, add a div with id game-wrapper and add a <h1> header for your game inside it.

Add this code:

<div id="game-wrapper">
  <h1>Thanksgiving Match Game</h1>
</div>

Output

Thanksgiving Coding Activity - Step 2

Tip: Change the text inside the <h1> to give your game a new name.

Step 3: Style your game area and title 

We’ve already linked the google font Sniglet in the <head>, but here’s where you can get creative. 

In your CSS, style the <h1> font and color as well as the game wrapper.

Add this code:

h1 {
  font-family: 'Sniglet', cursive;
  color: orange;
  margin: 10px;
}
#game-wrapper {
  width: 760px;
  margin: auto;
  margin-top: 40px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 20px;
  border: 2px solid orange;
}

Output

Thanksgiving Coding Activity - Step 3

Hint: Change the background color property or add a background-image to your game wrapper to match your theme.

Step 4: Show the game cards

Next, we want to shuffle and then show all of the game cards. We have a JavaScript function that does this, but you need to add the right HTML div for it to work. 

In your HTML, after your <h1> add a div called match-grid.

Add this code:

<div id="game-wrapper">
  <h1>Thanksgiving Match Game</h1>
  <div id="match-grid">
  </div>
</div>

Output

Thanksgiving Coding Activity - Step 4

Hint: We show 18 cards, but you can change this in your JavaScript code. In logic.js, change the number 18 in this loop to show more or less cards: for (var i = 0; i < 18; i++).

Step 5: Add a gradient to the face of the cards

Right now, clicking on a card doesn’t do anything and all cards will match. Let’s style the front and back of our card so our code can match the images.

In your CSS, style the face of the cards.

Add this code:

.card {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}
.card_front {
  background-image:
 linear-gradient(orange, yellow);
}

Output

Thanksgiving Coding Activity - Step 5

Tip: You can change the colors in the background-image or add a link to an image file. 

Step 6: Add images to the back of the cards

Our images are stored in our JavaScript code. Find the <script> tag at the bottom with the images variable and add your image files inside the quotes. 

Add this code:

var images = ["pumpkin.png", 
"boat.png", 
"corn.png"];

Output

Thanksgiving Coding Activity - Step 6

Tip: You can add more image files using quotations and separating them with commas. The last image file does not have a comma at the end. (Ex: var images = [“pumpkin.png”, “boat.png”, “corn.png”, “pie.png”, “turkey.png”];)

Step 7: Style Images on the back of the cards

The images are too big and the back is showing! 

In your CSS, style the card to flip and the image on the back of the card to fit. 

Add this code:

.card_back {
  background: #ffffff;
  transform: rotateY( 180deg );
}
.card_back img {
  width: 80px;
  height: 80px;
  margin-top: 10px;
}

Output

Thanksgiving Coding Activity - Step 7

Tip: You can change the color on the back of the card and the size of the image here.

Step 8: Flip the card

Nothing happens when we click. We need to add the “is-flipped” class and a transformation when a div has this class. 

In your CSS, add this code then click a card to turn it over. The logic to match the cards should also work now. 

Add this code:

.is-flipped {
  transform: rotateY(180deg);
}

Output

Thanksgiving Coding Activity - Step 8

Tip: We’re using CSS 3D transformations to make our card flip on click.

Step 9: Add a restart button

When the game is over, we need to reset the board and randomize our cards. Inside the game wrapper, let’s create an anchor element and connect it to our JavaScript using an onclick attribute.

Add this code:

<div id="game-wrapper">
  <h1>Thanksgiving Match Game</h1>
  <div id="match-grid">
  </div>
  <a onclick="start()">RESTART</a>
</div>

Output

Thanksgiving Coding Activity - Step 9

Tip: Your button can say anything you want, replace the text inside your <a> tag. 

Step 10: Style the restart button

You should see your link and it should be working to restart your game. It just looks like text, so let’s change the color, font, and size to create a button.

In your CSS, style your anchor tag to look like a button.

Add this code:

a {
  font-family: 'Sniglet', cursive;
  background-color: orange;
  display: block;
  padding: 10px;
  margin: 10px;
}

Output

Thanksgiving Coding Activity - Step 10

Tip: You can change the button and text colors to match your theme here. 

Your game is complete! 

Check out the finished product.

Thanksgiving Coding Activity Gif

We want to see how you’ve styled your Thanksgiving games! 

Use #codewizardshq and #NowYouCode to share your project link and show us what you’ve created or post it in our Facebook Group. All complete projects will be added to this article. Our instructors will also be answering questions and fixing bugs in the Facebook Group. 

Ready to level up your coding experience? Take a fun html coding class with our live, expert instructors.

This year, we’re grateful for your family reading the CodeWizardsHQ blog and we wish you a very happy Thanksgiving.

Elementary School Coding Banner 2020

Thanksgiving Game Gallery

Play the completed match games and get inspired for designing your game too.

Thanksgiving Match Game Theme
Thanksgiving Match Game Pusheen Theme