A simple HTML5 memory game using CSS3 animations.
Game playable at http://andrewtavis.com/memory/
This game is a result of a test exercise. It took me 2 hours to complete this project. The parameters were as follows:
Let’s make a game! Your time is valuable so let’s make it a simple game. For this exercise a game of Memory should do. So let’s get started!
-
Step 1: First we need to create the page for the game to live in. The requirements for the page are that it must be HTML5 compliant and have a header 150px tall, a content area for the game at 800x600, a sidebar 300px wide, and footer 100px tall. The header and footer need a background gradient but the content and sidebar areas are up to you.
-
Step 2: Using the sprite sheet provided, create a CSS stylesheet that can display our memory cards by adding classes to html elements. The first image in the sprite should be used as the back of the card.
-
Step 3: Create your game engine! Arrange the cards in a 4x4 grid face down. When a card is selected it should smoothly flip around to reveal the face of the card. The game is over once the player has matched all of the cards.
-
Step 4: During the game you will need to display a game timer with the time that has passed and the number of failed attempts.