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

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