That was fun 
Code:
<!DOCTYPE html>
<html>
<head>
<title>Memory</title>
<style>
body {
font-family: sans-serif;
padding: 20px 20px 10px;
}
#Playfield {
margin: 0 auto;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
-o-perspective: 1000;
-webkit-perspective: 1000;
position: relative;
width: 960px;
}
#Playfield .card {
float: left;
height: 110px;
margin: 0 5px 10px;
position: relative;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
-o-transition: -o-transform 0.5s;
-webkit-transition: -webkit-transform 0.5s;
width: 110px;
}
#Playfield .card div {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
height: 110px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#Playfield .card .front {
background-color: #dedede;
z-index: 0;
}
#Playfield .card .back {
background-color: #333;
color: #fff;
font-size: 30px;
line-height: 100px;
text-align: center;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
#Playfield .card.down {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
#Playfield .card.down .front {
z-index: 1;
}
</style>
</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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.shuffle = function() {
return this.each(function(){
var items = $(this).children();
return (items.length)
? $(this).html($.shuffle(items))
: this;
});
}
$.shuffle = function(arr) {
for(
var j, x, i = arr.length; i;
j = parseInt(Math.random() * i),
x = arr[--i], arr[i] = arr[j], arr[j] = x
);
return arr;
}
})(jQuery);
// The total number of cards currently selected and total times failed
var counter = 0,
failed = 0,
limit = 3;
// Shuffle the cards around
$('#Playfield').shuffle();
$('.card').each(function() {
var $this = $(this);
// Create the front side of the card
$('<div />', {'class' : 'front'}).appendTo($this);
// Create the back side of the card
$('<div />', {
'class' : 'back',
html : $this.data('face')
}).appendTo($this);
});
// Bind the click event to the card so we can toogle the state the
// backface-visibility, this property only applies to browsers that
// support it
$(document.body).on('click', '.card', function() {
// If the counter/current class matches something that should ensure the
// click is check for it and prevent anything else from happening
if (counter === 2 || $(this).is('.matched') || !$(this).is('.down'))
return;
// Remove the "down" class since the current card can't be turned off
// unless a second card is selected
$(this).removeClass('down');
// Increment the active cards counter
counter++;
// Find the 2 cards that have been selected if the counter is at 2
if (counter === 2) {
var cards = $('.card:not(.down, .matched)'),
delay = 0,
match = $(cards[0]).data('face') === $(cards[1]).data('face');
if (match) {
cards.addClass('matched');
// Now we need to check if every card was matched, we can do this by
// simply getting a total count of all the cards compared to how many
// have the "matched" class
var $cards = $('.card'),
total = $cards.length,
matched = $('.card.matched').length;
if (total === matched){
alert('You Win!');
$cards.toggleClass('matched down');
}
} else {
delay = 700;
failed++;
setTimeout(function() {
cards.addClass('down');
}, delay);
}
// Check the number of times that the player has failed, if they have hit
// the limit reset the cards and the counter
setTimeout(function() {
if (failed === limit) {
alert('Sorry, but you have wrongly matched too many cards. The cards will now be shuffled around!');
// Reset the cards
$('.card').removeClass('matched').addClass('down');
// Shuffle the cards around
setTimeout(function() {
$('#Playfield').shuffle();
}, 200);
// Reset the counters
counter = failed = 0;
} else {
counter = 0;
}
}, delay);
}
});
</script>
</body>
</html>
Live demo as well http://codepen.io/ChrisUpjohn/full/6...05b613e4c368fc
)
Reply With Quote
Originally Posted by sami89
Bookmarks