Time for action – preparing the card-matching game

Before adding the complicated game logic to our matching game, let's prepare the HTML game structure and all the CSS styles:

  1. Let's continue with our project. Create a new file named matchgame.js inside the js folder.
  2. Replace the index.html file with the following HTML code:
    <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8> <title>CSS3 Matching Game</title> <link rel="stylesheet" href="css/matchgame.css" /> </head> <body> <header> <h1>CSS3 Matching Game</h1> </header> <section id="game"> <div id="cards"> <div class="card"> <div class="face front"></div> <div class="face back"></div> </div> <!-- .card --> </div> <!-- #cards --> </section> <!-- #game --> <footer> <p>This is an example of ...

Get HTML5 Game Development by Example : Beginner's Guide - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial