Skip to content

Latest commit

 

History

History
109 lines (80 loc) · 4.63 KB

README.textile

File metadata and controls

109 lines (80 loc) · 4.63 KB
Raw

CatMatch – an html5 game

Intro

This is a simple memory matching game, we taught people how to code it during AppsWorld 2012, http://www.apps-world.net

It uses some features which may not be available in your default browser, so we’d recommend either the latest versions of Mozilla Firefox , Google Chrome, or Safari browers. Personally I’ve not tried with internet explorer

Please note you will need to put in your API key in order for the game to work. You will need to modify the catmatch.js source code in change the folloiwng section to include your API key.

Enjoy, if you come up with improvements please do send us a pull request. We’d like to keep the codebase as small as possible so that folks with little or no coding experience can download it an not feel daunted.

The Code

There are less than 250 lines in the game, including many black lines, html and css. In short we think it is quite compact. It could be made even smaller, but this might start affecting how easy it is to read. There are only four files:

  • catmatch.html
  • catmatch.js
  • catmatch.css
  • dkimages.js

catmatch.html

In the <head> section we declare our dependencies:

  • jQuery.js
  • ICanHaz.js to help us generate html at runtime
  • catmatch.css for styling our game
  • dkimages.js a simple client library to call the dkimages.com API
  • catmatch.js the game code

The <head> also contains two inline <script> sections, the first gets jQuery to initalise our game and the second uses moustache to allow us to easily generate the list of cards we need to show.

The body of the html contains screens:

  • welcome
  • loading
  • main game
  • play again

These are enclosed in <div> tags

catmatch.css

This styles our game, sets font sizes etc and all the stuff normally done with CSS. The one thing that is worth highlighting is the use of the browser vendor extentions which enable us to flip the cards.

For example, the card is flipped by turning it 180 degrees on its Y axis (in 3d) and hiding any image that is faced down. This is done using the following css:

/* Use 3d transformations */
 li {
  -moz-transform-style: preserve-3d;
  -moz-transition: 0.5s;
}
/* when facedown hide the image */
img {
  -moz-backface-visibility: hidden;
}
/* cards are layed face down */
.front {
  -moz-transform: rotateY(180deg);
}
/* flip the card when clicked */
.flipped {
  -moz-transform: rotateY(180deg);
}

dkimages.js

This code seperates the calling of the API from the game code. Given how brief the code is, it could easily be included in the main catmatch.js source. Keeping the code seperate mean the client library could be easily used by another app or if the API changes then all the change could be contained in this file. The code itself is a simple ajax call using jQuery, when a sucessful response is received it will call back into the game code using the data_handler

catmatch.js

The main flow of the game looks like this:

We cache the results of calling the ‘get me a list of images of cats’ call, which is stored in the module scoped deck variable. It’s quite straight forwad code, a couple of bit worth mentioning:

When layout the cards we use the ICanHaz library to generate html based on the following template (in catmatch.html)

   <script type="text/html" id="cards">
      <!-- block iterated over for each element of cards -->
      {{#cards}}
        <!-- each element has an id, url and caption --> 
        <li class="card" data-imageid="{{id}}">
          <!-- back and front face picutres on the card -->
          <img src="{{url}}&size=qvga" class="front" alt="{{caption}}">
          <img src="back.png" class="back">
        </li>
      {{/cards}}
    </script>

The layoutCards() method invokes the template, passing in the cards to lay out. It then clears any items in the list (from a previous game) and inserts the html generated from the template. Lastly each card is made clickable.

 function layout(cards) {
    var cardsHtml = ich.cards({cards: cards});
    $('#board').empty();
    $('#board').html(cardsHtml);
    $('li').click(turnCard);
  }

When a user clicks the card we toggle a class on the <li> for the card, this triggers it to be turned in 3d (see catmatch.css) and then after a slight delay (which allows the transition to complete) we check the card that has been flipped over.

 function turnCard(evtObj) {
    var card = evtObj.currentTarget;
    $(card).toggleClass('flipped');
    setTimeout( function() {
      checkTurned(card); },
      500
    );
  }

I hope this is more than enough to get you started with the dkimages.com API, feel free to ask questions :)