Skip to Content
HTML5 Game Development by Example(Second Edition)
book

HTML5 Game Development by Example(Second Edition)

by Seng Hin Mak
June 2015
Beginner
354 pages
8h 23m
English
Packt Publishing
Content preview from HTML5 Game Development by Example(Second Edition)

Chapter 3. Building a Card-matching Game in CSS3

CSS3 introduces many exciting features. In this chapter, we will explore and use some of them to create a card-matching game. CSS3 styles how the game objects look and animate, while the jQuery library helps us to define the game logic.

In this chapter, we will:

  • Transform a playing card with animation
  • Flip a playing card with new CSS3 properties
  • Create the whole memory matching game
  • Embed a custom web font to our game

You can try the card-matching game at the following URL to have a glimpse of what we are going to achieve in this chapter:

http://makzan.net/html5-games/card-matching/

So, let's get on with it.

Moving game objects with CSS3 transition

We had a glimpse of the CSS3 transition and transformation ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

AirBnbBlueOriginElectronic ArtsHomeDepotNasdaqRakutenTata Consultancy Services

QuotationMarkO’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
QuotationMarkI wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
QuotationMarkI’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
QuotationMarkI'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Mark W.
Embedded Software Engineer

You might also like

HTML5 Game Development For Dummies

HTML5 Game Development For Dummies

Andy Harris
HTML5 Game Development Insights

HTML5 Game Development Insights

Colt McAnlis, Petter Lubbers, Brandon Jones, Duncan Tebbs, Andrzej Manzur, Sean Bennett, Florian d'Erfurth, Bruno Garcia, Shun Lin, Ivan Popelyshev, Jason Gauci, Jon Howard, Ian Ballantyne, Jesse Freeman, Takuo Kihira, Tyler Smith, Don Olmstead, John McCutchan, Chad Austin, Andres Pagella

Publisher Resources

ISBN: 9781785287770