This is a game you can create, customize and play in any web browser with your family and friends over the Thanksgiving Holiday.
Download the root folder for the web page by going to this web page:
https://createasecurewebsite.com/free-downloads/5-create-a-thanksgiving-matching-game-web-page
Then move the zipped folder from your Downloads folder to the top level of your file manager. Then right click on zipped file to extract the folder. Then open the folder:
Then open game.html file with your HTML editor (Bluefish)
Step 1: In your head section, styles section (CSS), add a background image property to the <body> element and cover the entire page.
body { text-align: center; background-image: url('/autumn.jpg'); background-size: 50%; }
NOTE THAT STEP ONE HAS ALREADY BEEN DONE!
Save and view the result.
Step 2: Step 2: Add your game area and title it
In the body area of your HTML file, add a div with id game-wrapper and add a <h1> header for your game inside it.
<div id="game-wrapper">
<h1>Thanksgiving Match Game</h1>
</div>
Then save and view the result.
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.
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;
}
Hint: Change the background color property and the heading font size.
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.
<div id="game-wrapper">
<h1>Thanksgiving Match Game</h1>
<div id="match-grid">
</div>
</div>
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.
.card {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
}
.card_front {
background-image:
linear-gradient(orange, yellow);
}
Tip: You can change the colors in the background-image
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.
var images = ["pumpkin.png",
"boat.png",
"corn.png"];
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.
.card_back {
background: #ffffff;
transform: rotateY( 180deg );
}
.card_back img {
width: 80px;
height: 80px;
margin-top: 10px;
}
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.
.is-flipped {
transform: rotateY(180deg);
}
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.
<div id="game-wrapper">
<h1>Thanksgiving Match Game</h1>
<div id="match-grid">
</div>
<a onclick="start()">RESTART</a>
</div>
Tip: Your button can say anything you want, replace the text inside your <a> tag with the words DO OVER!.
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.
a {
font-family: 'Sniglet', cursive;
background-color: orange;
display: block;
padding: 10px;
margin: 10px;
}
Tip: You can change the button and text colors to match your theme here. Test your game by viewing it in a web browser.
Does it work? Congratulations you are done!