After this learning unit, you will be able to:
- Dynamically change the look of an HTML element
- Use jQuery to select and trigger changes in your page
- Understand the logic behind the Memory game
- Show off a little bit for the first time with your recently acquired front-end abilities 😉
- Fork this repo
- Clone this repo into your
~/code/labs
Upon completion, run the following commands
$ git add .
$ git commit -m "done"
$ git push origin master
Navigate to your repo and create a Pull Request from your master branch to the original repository master branch.
In the Pull request name, add your name and last names separated by a dash "-"
The starter-code provides every resource you need to style your game. Please, push every thing you need to make it work properly on GitHub before creating the pull request.
Do you remember that game called Memory that you used to play in with actual paper tiles? To win, you needed to remember the position of tiles.
The game consists of an even number of tiles with images on one side and a generic back. Each image appears on precisely two tiles.
When the game starts, all tiles are turned face down. The player then flips over two cards, selecting them by clicking on them. If the two tiles have the same image, they remain face up. Otherwise, the tiles flip back over after a small period of time.
The goal of the game is to get all the tiles flipped face up in the least number of tries. That means that lower number of tries are better scores.
Let's do this in JavaScript!
To code the game, on one hand we will need to re-create the physical parts of the game (the layout). On the other hand, we will implement the rules of the game (the logic). We will make a single-player version of the game, which will simplify some of the logic.
Remember: organization is the key. Keep the JavaScript related to your layout and your user interface in one section of your file and the JavaScript related to the code in another section.
- Add to your html the parts you'll game will have. The board, the tiles and the score.
<!DOCTYPE html>
<html>
<head>
<title>Superhero Memory Game</title>
<link type="text/css" rel="stylesheet" href="memory.css" media="screen">
</head>
<body>
</body>
</html>Take a look above. We are not adding a Start button. If you think about it, we don't need it. We can render the tiles and create a listener to begin the game when the user clicks on an element.
- At the bottom of your
bodyelement, you can already add the CDN for your jQuery library:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>Also, link your js file. We already know how to do it 😉.
- In the
headersection, remember to add the link to your CSS file.
<link type="text/css" rel="stylesheet" href="memory.css" media="screen">Take a look at the src/main.js and src/memory.js starter file. You already have one file for the logic and one file for the HTML/CSS interactions.
We will test our game logic using Jasmine (at this point you shold be Jasmine Masters!). Actually, for this game the game logic is pretty simple, we only going to need a MemoryGame constructor, and some methods to shuffle and compare cards, and one to check when the game finishes.
-
First things first: Create a
MemoryGameconstructor that will receive an array of cards as a parameter and set this array to athis.cardsproperty. We also need athis.pickedCardsarray, where we will be storing the cards the user have clicked so we can compare them. Finally athis.pairsClickedandthis.pairsGuessedproperties where will be adding every time a user choose and guess a pair. -
Create a method to shuffle the cards, so every time you create a new game, the order of the cards changes. You will only need to change the
cardsproperty from your object. Hint: It would be a good idea to implement something like a Fisher-Yates Shuffle. If you struggle on this function, you can skip for the moment and go back on it later.
MemoryGame.prototype.shuffleCards = function() {
};- When a user pick 2 cards, we will need to check if they are the same. Let's create a method
checkIfPair, that will receive two parameters, the names of both cards selected by the user (example:'ironman'and'batman'). The method will add 1 to ourpairsClickedproperty, and if the cards are the same also add 1 topairsGuessed.
Finally it will return true or false depending on the result of comparing both cards.
MemoryGame.prototype.checkIfPair = function(firstCard, secondCard) {
};- As Memory doesn't have a 'Game Over', we just need a 'Win' function, where we need to check if our property
pairsGuessedreach the numbers of pairs the game has.
MemoryGame.prototype.isFinished = function() {
};Think about the interactions your user and the game will have: basically the user will click on elements of the page and receive a result - whether he guessed the pair or not.
- The first thing we need to do is use the information to dynamically fill the tiles in the board element. As we want this behavior to be trigged as soon as the page loads, we need to wrap it under a
document.readymethod. Use jQuery to change the elements dynamically.
$(document).ready(function(){
});- The other important interaction is the click listener. Remember to add the listeners when the document is loaded.
$('.back').click(function(){
});To flip a card, there are different possibilities. One them is toggle the classes front and back, like in the following example:
<!-- Only display the back that is blue -->
<div class= "card" data-card-name="ironman">
<div class="back" name="ironman.jpg"></div>
<div class="front" style="background: url(img/ironman.jpg) no-repeat"></div>
</div>
<!-- After flipping (back and front are reverted) -->
<!-- Only display the back that has a ironman backgroung image -->
<div class= "card" data-card-name="ironman">
<div class="front" name="ironman.jpg"></div>
<div class="back" style="background: url(img/ironman.jpg) no-repeat"></div>
</divIn this Learning Unit, you were able to separate the logic of the game from the logic of the user interaction. You used jQuery to listen to events and trigger the game. Also, learned a new useful shuffle algorithm.