Hello everyone. If you visit the home page frequently or the CSS forum you might have seen some of the CSS challenges I’ve posted. This week’s challenge is broken in half between CSS and Java Script. The members of the CSS forum have been challenged to style and animate the cards of a game of Memory, and the challenge to the forum is to adjudicate the game. Here’s the HTML we are working from
<!DOCTYPE html>
<html>
<head>
<title>Memory</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$('.card').click(function(){
$(this).toggleClass('down');
});
</script>
</head>
<body>
<div id="Playfield">
<div class="card down one" data-face="1"></div>
<div class="card down two" data-face="2"></div>
<div class="card down three" data-face="3"></div>
<div class="card down four" data-face="4"></div>
<div class="card down five" data-face="5"></div>
<div class="card down six" data-face="6"></div>
<div class="card down seven" data-face="7"></div>
<div class="card down eight" data-face="8"></div>
<div class="card down nine" data-face="9"></div>
<div class="card down ten" data-face="10"></div>
<div class="card down eleven" data-face="11"></div>
<div class="card down twelve" data-face="12"></div>
<div class="card down one" data-face="1"></div>
<div class="card down two" data-face="2"></div>
<div class="card down three" data-face="3"></div>
<div class="card down four" data-face="4"></div>
<div class="card down five" data-face="5"></div>
<div class="card down six" data-face="6"></div>
<div class="card down seven" data-face="7"></div>
<div class="card down eight" data-face="8"></div>
<div class="card down nine" data-face="9"></div>
<div class="card down ten" data-face="10"></div>
<div class="card down eleven" data-face="11"></div>
<div class="card down twelve" data-face="12"></div>
</div>
</body>
</html>
Note that I’ve already provided the CSS members enough JS to test their styling - toggling the classes of the cards. Here’s the rest of the challenge, and most of its logic can be tied into the click event above
The cards are in pairs, their last class name reveals the matching. I don’t expect 4 year olds to check and read source code, so don’t worry about that - it simplifies the coding.
When a card is clicked, a check needs to be made if any other cards are face up that do not have the CSS class ‘matched’. If there is, does the value of the data-face attribute of the two cards match? If so, the two cards gain the css class of ‘matched’, otherwise turn both face down.
You also need to test when all cards are matched to give a ‘You Win’ result.
Advanced
Shuffle the position of the cards. You can do this a number of ways - but if you choose the changing of the data-face value make sure you change the corresponding css class because that’s how the styling is going to give the card it’s particular image.
Expert
Make a two player game and keep score.
At all levels you may add to the HTML to give additional controls, like a reset game or shuffle button, but don’t remove anything or you risk breaking the style sheets being written for the challenge.
Use spoiler tags to hide your answers to the challenge that you post.
This…
[noparse]
[spoiler]Like this[/spoiler]
[/noparse]
Renders
[spoiler]Like this[/spoiler]
If you want to participate in the CSS side of this challenge you may [thread=991430]do so here.[/thread]
Note - the data-face attribute is present to make the JS code easier to write - I realize it’s redundant to the final CSS class name. I also know it’s possible to style on attributes, but browser support for that trick is uneven (not that such has stopped us before). Both are presented to keep the difficulty of the challenge down some.
