The goal of this project is to develop a memory-match card game based on the next requirements:
- cards used are pairs got from a shuffled deck
- give the possibility to replay the game
- register the clicks made and the number of the matched pairs
Some CSS3 properties will be used to add some animation to the HTML elements and jQuery framework for the game engine.
This is how the result of the project looks:
Content of the index.html file
This is how the index.html file will look:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Memory-match card game</title> <link rel="stylesheet" href="style.css" /> <link href='http://fonts.googleapis.com/css?family=Sevillana' rel='stylesheet' type='text/css'> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> <h1>Memory-match card game</h1> </header> <div id="stats"> <div>You've made <span id="clicks">0</span> clicks and found <span id="pairs">0</span> pair(s).</div> </div> <section id="game"> <div id="cards"> <div class="card"> <div class="face front"></div> <div class="face back"></div> </div> </div> <div style="clear:both"></div> </section> <div id="go-2-nxt-lvl"></div> <footer> <p>This is an example of transitioning cards.</p> </footer> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/matchgame.js"></script> <script src="js/flexie.js"></script> </body> </html> |
In head meta tag contains the links for the style.css file, for the Sevillana font and for the JavaScript file necessary to add HTML5 specifications (to some extent) for older than ninth version of Internet Explorer
The container with the ID stats will hold the clicks (made) and the pairs (found) values, that will be updated based on user’s actions.
The container with the ID cards contains a child, container with the class “card”, which contains two divs, with classes face front and face back, containers that will be manipulated during the game flow to achieve the desired result.
The container with the ID go-2-nxt.lvl will carry the necessary text which will give the user the option to restart the game (shuffle cards, reset clicks (made) and pairs (found) values).
At the end, before the ending body tag, the necessary JavaScript files are loaded.
Having this we can now style the HTML elements.
