Dino Pairs Game | Using CSS3 Animation

By | January 11, 2012

Today were talking about how I created my Dino Pairs Game using CSS3 animations. This tutorial only really works in Chrome because I’m using 3d transforms. The game is playable in Firefox but better in Chrome.

So yeah I’ve had a bit of time off and had a little dabble with games. I’ve been having a look at the canvas tag, looking at out of the box game development like Construct2 (which by the way is awesome for rapid development of HTML5 games). I’ve also had a look at impactjs but haven’t managed to get to grips with that yet. But my heart lies with CSS, I just get it. I find it easy can experiment with confidence and enjoy coding it. So over the next few weeks I’m going to be really pushing the boat out with CSS3 and trying new stuff little bits of tips and tricks to full blown posts like this one.
So where was I, oh yeah Dino pairs. So the idea behind this game is that my eldest son loves to play this game the traditional way so whilst playing one evening I thought I have a go at creating one on line to up my profile and get loads of people to link to my game.(Something like that anyway).

View DemoDownload

Hit the Deck

So first things first we need the image assets for the deck. As you can see, I aggregated all the images together into one image so later I could position the image as a background with CSS.

Dino Pairs Deck Image

So now that is done we can get on with the rest of the game.

HTML5 Page

The HTML is pretty straight forward but I have used HTML5 layout elements within the page.





Dino Pairs Game - Using CSS3 Animation



 

Time:

Reset

Play

Your time taken was .

Play again

As you can see we’ve got game stats section that holds all the information about the game. Then below that we have the game section that holds all the game elements like the gameIntro screen and and the gamecomplete screen and also a div called cards that is eventually going to hold the deck. Then within that we create one card with a div to hold the front and back of the card. We will clone this to create the rest of the cards. I’ve also got jquery in there because I’m lazy and can’t be bothered to write pure javascript and a link to my js file.

The Javascript

Ok so there’s a lot going on in the javascript so I’m only going to highlight a couple of things. I’ve commented all the code in the download to make it easier to understand but just can always ask me any questions in the comments below.

//onclick function add flip class and then check to see if cards are the same
function selectCard() {
 // we do nothing if there are already two cards flipped.
 if ($(".card-flipped").size() > 1) {
  return;
 }
 $(this).addClass("card-flipped");
// check the pattern of both flipped card 0.7s later.
 if ($(".card-flipped").size() == 2) {
  setTimeout(checkPattern,700);
 }
}

So as I said we are concentrating on the CSS3 animations here. So the selectCard function runs when the card div is clicked. So first if there is more than 1 element with the class name .card-flipped then the click does nothing because we already have two cards turned over. Otherwise we add the class .card-flipped to the element that has been clicked. And when we have a look at the CSS this is where we will see the transition has been created. Also at the end of this function we start the check to see if the cards match but I’m not going to get into that stuff here.

//if pattern is same remove cards otherwise flip back
function checkPattern() {
 if (isMatchPattern()) {
  $(".card-flipped").removeClass("card-flipped").addClass("card-removed");
  $(".card-removed").bind("webkitTransitionEnd",removeTookCards);
 } else {
  $(".card-flipped").removeClass("card-flipped");
 }
}

So there’s quite a bit going on in this function so firstly we’re checking if the card is matched with the isMatchedpattern function. If it is then we removed the card-flipped class and add the card-removed class which as you will see just reduces the opacity of the div to zero so you can no longer see it. Then we bind the event listener webkitTransitionEnd to say when the div has zero opacity run the removeTookCards function which basically deletes the div.

So now the CSS

So here is where the good stuff happens. Basically the javascript just adds and removes classes when needed and the CSS does the rest.

For each card, we define a perspective property to give it a visual depth effect. We also set the transition property otherwise it’s not a card flip: the card simply toggles between the front and back faces.

/* Define the 3D perspective view and dimension of each card. */
.card {
 -webkit-perspective: 600;
 width: 109px;
 height: 145px;
 position: absolute;
 -moz-transition: all .3s;
 -webkit-transition: all .3s;
 transition: all .3s;
 cursor: pointer;
}

There are two faces on each card. The face will be rotated later and we will define the transition properties to animate the style changes. We also want to make sure the back face is hidden:

.face {
 width: 100%;
 height: 100%;
 position: absolute;
 -webkit-transition-property: opacity, transform, box-shadow;
 -webkit-transition-duration: .3s;
 -webkit-backface-visibility: hidden;
}

Then we set the front and back face styles. They are almost the same as the flipping card example, except that we are now giving them background images
and box shadows:

.front {
 background: url(../images/deck.jpg) 0 -146px;
 z-index: 10;
}
.back {
background: #efefef url(../images/deck.jpg);
-webkit-transform: rotate3d(0,1,0,-180deg);
z-index: 8;
}
.card:hover .face, .card-flipped .face {
 -webkit-box-shadow: 0 0 10px #aaa;
}
.card-flipped .front {
 -webkit-transform: rotate3d(0,1,0,180deg);
 z-index: 8;
}
.card-flipped .back {
 -webkit-transform: rotate3d(0,1,0,0deg);
 z-index: 10;
}

When any card is removed, we want to fade it out. Therefore, we declare a card-removed class with 0 opacity:

.card-removed {
 opacity: 0;
}

In order to show different card graphics from the sprite sheet of the card deck, we clip the background of the card into different background positions:

.blueDino {background-position: 0 0;}
.brownDino {background-position: -110px 0;}
.redDino {background-position: -220px 0;}
.greenDino {background-position: -330px 0;}
.purpDino {background-position: -440px 0;}
.burgDino {background-position: -550px 0;}
.orangeDino {background-position: -660px 0;}
.purp2Dino {background-position: -770px 0;}
.pinkDino {background-position: -880px 0;}

And that’s it. If you want to download the code I’ve attached it. Hope you enjoy it and play the game.

View DemoDownload

33 thoughts on “Dino Pairs Game | Using CSS3 Animation

  1. Pingback: Dino Pairs Game Tutorial using CSS3 Animation | HTML5 Game Development

    1. Matt Walker Post author

      Sorry. Don’t know whats happened there.

      I’ll sort that out ASAP.

      Reply
  2. WM

    Thanks for your sharing, I’m from MozTW Community (http://moztw.org), could you tell me how about the license?

    I want to replace the pictures to make my card game and modify it for Firefox 10 to demo CSS3 transform supporting, what kind of attribution should I put on my modified version?

    Sorry for my poor English.

    Reply
    1. Matt Walker Post author

      Your English is very good. You can use the code if you can include a link back to my site and a thank you in your page. And thanks for spotting the height error. I have fixed that in the demo and the download.

      Reply
  3. WM

    BTW, I don’t know why you set #cards {height: 580px} instead of 530px in #gameIntro and #gameComplete, but that would make #linkBack not able to be clicked after the game started.

    Reply
    1. Matt Walker Post author

      Great stuff. Could you also send a link to your article?

      Reply
  4. WM

    The other members in our community is preparing hand-painting original art for this demo project, so we still not finish it.

    Currently, I’ve added Firefox 10 and fullscreen API support, when we finally done it, I’ll come back here and leave a comment to notify, thank for your patience 😛

    Reply
    1. Matt Walker Post author

      That’s fine. It’s sounds like its going to be great. Can’t wait to see it.

      Reply
  5. WM

    Hello~

    We almost done it, now it has original card art and background music, but is still waiting for other detail tuning.

    Could you declare a specific license like CC:BY on your work? So that we could also distribute our work base on your license when we publish it.

    Reply
  6. Pingback: WebDesign | Pearltrees

  7. Mark

    Would it be hard to modify this matching game to match a word to another word? For example, to teach English vocabulary through opposites, etc.?

    Reply
  8. Method

    HTML5 is so sweet. i can’t wait to learn more about it. great article btw, my best time was 29 seconds lol

    Reply
  9. Pingback: Online Gaming with CSS Animation | CSS Animation Studio

  10. Chris Weeks

    Matt, thank you for this very informative tutorial! I have been tasked with HTML5ing our non-profit website, and one area I am really excited to explore is in HTML5 Game Development. My first thought was of a Memory card game, and yours is already fully-functional. I am in the process of making it my own, and I will certainly linkback to you, but I have just a few questions before the game can go live. I have the cards created, but I would like to use 20 cards. I see the comment in your JS which manually creates the 3×6 array, but how can I change that to be 4×5? Also, I would like to keep score by number of turns instead of time taken. Apologies in advance, I am not much of a Javascripter. Thanks again for this wonderful look at the power of HTML5/CSS3!

    Reply
  11. Pingback: 设计新闻,资源,教程专栏N.25

  12. Gabriel

    Hello Matt, amazing example of the power of css3, ive been playing with your code, and what if i didnt want to remove the cards after the match is done, i mean, what if i want to see all the cards after they are flipped, i cant figure out how not to remove them??

    thank you!

    Reply
  13. Jerome

    Hi man great job with Dino Pairs Game | Using CSS3 Animation.
    I was wondering how to transition to a new card in place of the old card after its flip transition? I’m trying to have the cards line up in the same postion and each new click displays a new card.. Thanks for making the coding understandable..
    If you write a book Im getting the first copy..

    Reply
    1. Matt Walker Post author

      Thanks for the great feedback. I’d love to write a book. Thinking out loud, without testing I would suggest setting the opacity to 0 for all the cards except the active(.card-flipped) one. Then in your js just move add and remove the class as per the original game. Hope this helps.

      Reply
  14. andrew

    Hi,I would like to ask how do you change the card pictures? How about the deck pictures, how do I get to change the source code?

    Reply
  15. Ash

    Hi Matt,

    We really like what you have produced here. We would like to use some of your code as a starting point for a project we are going to be working on for a client of ours. Would this be OK? Could you email me to discuss it further.

    Thanks.

    Reply
  16. Veer

    Good to see this nice game. I want to edit this game if you allow me.
    I want to change that pictures. Pls tell me how can I change the picture using source code.

    Reply
  17. Pingback: CSS3 | Annotary

  18. Dodi

    Hello ,

    Thank you so much for the beautiful game.

    I need to minimize the number of cards and make them 7 cards so 14 cards later. How can I do this ?

    Thanks

    Reply
  19. Mona

    Hi Matt,

    I have not tried your code yet but I know this is exactly what I need for a project I have in mind. I will definitely reference you and I just want to say Thank you and please keep doing what you are doing!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *