O'Reilly logo

HTML5 Game Development by Example : Beginner's Guide - Second Edition by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required