Book Image

HTML5 Game Development by Example: Beginner's Guide

By : Seng Hin Mak
Book Image

HTML5 Game Development by Example: Beginner's Guide

By: Seng Hin Mak

Overview of this book

Table of Contents (18 chapters)
HTML5 Game Development by Example Beginner's Guide Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
9
Building a Physics Car Game with Box2D and Canvas
Index

Time for action – creating a game over dialog with the elapsed played time


We will continue with the code from the card matching game we made in Chapter 3, Building a Card-matching Game in CSS3. Carry out the following steps:

  1. Open the CSS3 matching game folder as our working directory.

  2. Download a background image from the following URL (we will use it as the background of the popup): http://mak.la/book-assets

  3. Place the image in the images folder.

  4. Open index.html in any text editor.

  5. We will need a font for the game over popup. Add the following font embedding CSS into the head section:

    <link href="http://fonts.googleapis.com/css?family=Orbitron:400,700" rel="stylesheet" type="text/css">
  6. Before the game section, we add a div named timer to show the elapsed playing time. In addition, we add a new popup section containing the HTML markup of the pop-up dialog:

    <div id="timer">
       Elapsed time: <span id="elapsed-time">00:00</span>
    </div>
    <section id="game">
       &lt...