Sunday, 14 September 2014

DINO PAIRS MATCHING GAME

DINO PAIRS MATCHING GAME



-------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE:
READ MORE:
http://fbgadgets.blogspot.co.uk/2014/09/dino-pairs-matching-game.htm
lhttp://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-practice-game-with-image.html
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGame.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-html-game_4.html
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGameImages.html
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGame.html
http://fbgadgets.blogspot.co.uk/2014/09/card-games-with-drag-and-drop-with.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-images-above-box-to-below.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-practice-game-with-image_6.html
-----------------------------------------------------------------------------------------------------------



<!DOCTYPE html>
<html lang=en>
<head>
<meta charset='utf-8'>
<title>Dino Pairs Game - Using CSS3 Animation</title>

<style type="text/css">
body {
text-align: center;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUk9CFUpdWqXk3trTS5g96sQpwNs69BAqO-jR5hPyF3wdmF-aRzJKD8lLIeNIhP9y9SV9KUuL92O6xRZ87susoarK7Pqvn198gIJUIyciiZU4JVx8NZtYk79A2EIbVkfVaYbKHZFxR83Ox/s1600/texture3b.jpg);
}
#game {
background: #9c9;
padding: 5px;
}
/* Define the 3D perspective view and dimension of each card. */
.card {
-webkit-perspective: 600;
width: 113px;
height: 150px;
}
.face {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: all .3s;
-webkit-backface-visibility: hidden;
}
.front {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2qoYIIptifJDJUgDOsjP10KV9kITHCctTJ5QvzpJgY-jkfcDwfk_M75PFAa4ryf2tYJFGO9BkiC4Is7RB1MzxgJ19gV1ckuEx20XczErpdtbtRuz1wdp1vnTWMr7kWeak-wwGXY2GXy71/s1600/cardback.png);
z-index: 10;
}
.back {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2qoYIIptifJDJUgDOsjP10KV9kITHCctTJ5QvzpJgY-jkfcDwfk_M75PFAa4ryf2tYJFGO9BkiC4Is7RB1MzxgJ19gV1ckuEx20XczErpdtbtRuz1wdp1vnTWMr7kWeak-wwGXY2GXy71/s1600/cardback.png);
-webkit-transform: rotate3d(0,1,0,-180deg);
z-index: 8;
}
.card-flipped .front {
-webkit-transform: rotate3d(0,1,0,180deg);
z-index: 8;
}
.card-flipped .back {
-webkit-transform: rotate3d(0,1,0,0deg);
z-index: 10;
}
</style>

<style type="text/css">
* {
padding:0;
margin:0;
}
body {
text-align: center;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL6HOa5TRzZwsPBlrEz2nzvmpmMCAxUKt5M3yrqxdd65HIPThdUU9UB8DppqLenu0fBq_-Ddnvdxdjzo6-7tWLO9c1XjSfTJlCe8mHsfcoN26jnBES8G2FiRqnamBQLRa8-MvBgsTC_R9r/s1600/greenbg.png);
color: #fff;
font-family: myriad pro;
}
#gameStats{
background: #001711;
width: 780px;
margin: 20px auto 20px;
display: block;
-moz-box-shadow: 0px 3px 8px #000;
box-shadow: 0px 3px 8px #000;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
padding: 10px;
overflow: auto;
}
#gameStats p#timer{
width: 200px;
float: left;
text-align: left;
font-family: myriad pro;
padding: 0 0 0 10px;
}
#gameStats p#reset{
width: 200px;
float: right;
text-align: right;
padding: 0 10px 0 0;
}
#gameStats .gameReset{
width: 200px;
float: right;
text-align: right;
font-family: myriad pro;
padding: 0 10px 0 0;
color: #fff;
text-decoration:none;
display:block;
}
#game {
background: #001711;
width: 760px;
height: 470px;
margin: 0 auto;
display: block;
-moz-box-shadow: 0px 3px 12px #000;
-webkit-box-shadow: 0px 3px 12px #000;
box-shadow: 0px 3px 12px #000;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
padding: 20px;
}
#cards {
position: relative;
width: 760px;
height: 480px;
display: none;
}
/* Define the 3D perspective view and dimension of each card. */
.card {
-webkit-perspective: 600;
width: 109px;
height: 145px;
position: absolute;
-moz-transition: all .3s;
-webkit-transition: all .3s;
transition: all .3s;
cursor: pointer;
}
#gameIntro {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixvlnDyIk_KChuyma4_lwSBxU-YKRi954pbx_NNb9RhTN99qoZHdOK_Z0t7BgQNNezjXLGBUUI6Q0PKXUGItX7xrDm5-tD4U1YiqCHP6i5dpk736PJ0913cttFX7kh1Ezb2rgH7CPzRqP0/s1600/startpage.png) top left no-repeat;
padding: 80px 0;
text-align: center;
height: 330px;
}
#gameIntro a.button {
background: white;
border-radius: 5px;
display: block;
font-size: 30px;
margin: 230px auto 0;
padding: 10px;
width: 150px;
border: 3px solid #006438;
color:#006438;
text-decoration:none;
}
#gameIntro a.button:hover {
background: #006438;
color:#fff;
text-decoration:none;
}
#gameComplete {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCsfV6Arywts-JSMvgOoErhK7-Hnr3L6RTyIX7y_PLJC572siiZdGEuICUTE5-AIJmeYe5HcFe9MS8D2tqr47aelxrl13GaUQIQ4TMvC3YaUFwmzdGfA-s2f0gxmcjabKPz-bRrihWk0a2/s1600/endPage.png) top left no-repeat;
padding: 80px 0;
text-align: center;
height: 330px;
}
#gameComplete a.button {
background: white;
border-radius: 5px;
display: block;
font-size: 30px;
margin: 50px auto 0;
padding: 10px;
width: 150px;
border: 5px solid #006438;
color:#006438;
text-decoration:none;
}
#gameComplete p#top {
margin: 200px 0 0;
font-size: 20px;
color:#006438;
}
.face {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition-property: opacity, transform, box-shadow;
-webkit-transition-duration: .3s;
-webkit-backface-visibility: hidden;
}
.front {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZPQTtqduT1RXQpk631oXDgprMRbPW5Bb01WAhyphenhyphenNdyqD1XewIa4IC6w_1qe9ROnRn-0xfpcZvFD7hyEWm_ST_m3Lggd_7vqWA-XpwNDR072-VpU2qxrCZwartfwGWIOs7G9tgwyMlswwTl/s1600/deck.jpg) 0 -146px;
z-index: 10;
}
.back {
background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZPQTtqduT1RXQpk631oXDgprMRbPW5Bb01WAhyphenhyphenNdyqD1XewIa4IC6w_1qe9ROnRn-0xfpcZvFD7hyEWm_ST_m3Lggd_7vqWA-XpwNDR072-VpU2qxrCZwartfwGWIOs7G9tgwyMlswwTl/s1600/deck.jpg);
-webkit-transform: rotate3d(0,1,0,-180deg);
z-index: 8;
}
.card:hover .face, .card-flipped .face {
-webkit-box-shadow: 0 0 10px #aaa;
}
.card-flipped .front {
-webkit-transform: rotate3d(0,1,0,180deg);
z-index: 8;
}
.card-flipped .back {
-webkit-transform: rotate3d(0,1,0,0deg);
z-index: 10;
}
.card-removed {
opacity: 0;
}
.blueDino {background-position: 0 0;}
.brownDino {background-position: -110px 0;}
.redDino {background-position: -220px 0;}
.greenDino {background-position: -330px 0;}
.purpDino {background-position: -440px 0;}
.burgDino {background-position: -550px 0;}
.orangeDino {background-position: -660px 0;}
.purp2Dino {background-position: -770px 0;}
.pinkDino {background-position: -880px 0;}
#linkBack a.button {
background: white;
border-radius: 5px;
display: block;
font-size: 30px;
margin: 30px auto 0;
padding: 10px;
width: 250px;
border: 3px solid #006438;
color:#006438;
text-decoration:none;
}
#linkBack a.button:hover {
background: #006438;
color:#fff;
text-decoration:none;
}
</style>


</head>

<body>

<section id="gameStats">
<p id="timer">Time: <span class="gameScore"></span></p>
<p id="reset"><a class="gameReset" href="">Reset</a></p>
</section>
<section id="game">
<section id="gameIntro">
<p><a id="gamePlay" class="button" href="">Play</a></p>
</section>
<section id="gameComplete">
<p id="top">Your time taken was <span class="gameScore"></span>.</p>
<p><a class="gameReset button" href="">Play again</a></p>
</section>
<div id="cards">
<div class="card">
<div class="face front"></div>
<div class="face back"></div>
</div>
</div>
</section>
<p id="linkBack"><a class="button" href="http://fbgadgets.blogspot.co.uk/2014/09/dino-pairs-matching-game_14.html">Back to Tutorial</a></p>

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>

<script type="text/javascript">

//create all the variables
var score;
var cardsmatched;
var ui = $("#gameUI");
var uiIntro = $("#gameIntro");
var uiStats = $("#gameStats");
var uiComplete = $("#gameComplete");
var uiCards= $("#cards");
var uiReset = $(".gameReset");
var uiScore = $(".gameScore");
var uiPlay = $("#gamePlay");
var uiTimer = $("#timer");
//create deck array
var matchingGame = {};
matchingGame.deck = ['blueDino', 'blueDino','brownDino', 'brownDino','redDino', 'redDino','greenDino', 'greenDino','purpDino', 'purpDino','burgDino', 'burgDino',
'orangeDino', 'orangeDino','purp2Dino', 'purp2Dino','pinkDino', 'pinkDino',];
//on document load the lazy way
$(function(){
init();
});
//initialise game
function init() {
uiComplete.hide();
uiCards.hide();
playGame = false;
uiPlay.click(function(e) {
e.preventDefault();
uiIntro.hide();
startGame();
});
uiReset.click(function(e) {
e.preventDefault();
uiComplete.hide();
reStartGame();
});
}
//start game and create cards from deck array
function startGame(){
uiTimer.show();
uiScore.html("0 seconds");
uiStats.show();
uiCards.show();
score = 0;
cardsmatched = 0;
if (playGame == false) {
playGame = true;
matchingGame.deck.sort(shuffle);
for(var i=0;i<17;i++){
$(".card:first-child").clone().appendTo("#cards");
}
// initialize each card's position
uiCards.children().each(function(index) {
// align the cards to be 3x6 ourselves.
$(this).css({
"left" : ($(this).width() + 20) * (index % 6),
"top" : ($(this).height() + 20) * Math.floor(index / 6)
});
// get a pattern from the shuffled deck
var pattern = matchingGame.deck.pop();
// visually apply the pattern on the card's back side.
$(this).find(".back").addClass(pattern);
// embed the pattern data into the DOM element.
$(this).attr("data-pattern",pattern);
// listen the click event on each card DIV element.
$(this).click(selectCard);
});
timer();
};
}
//timer for game
function timer() {
//alert("timer set")
if (playGame) {
scoreTimeout = setTimeout(function() {
uiScore.html(++score + " seconds");
timer();
}, 1000);
};
};
//shuffle cards
function shuffle() {
return 0.5 - Math.random();
}
//onclick function add flip class and then check to see if cards are the same
function selectCard() {
// we do nothing if there are already two cards flipped.
if ($(".card-flipped").size() > 1) {
return;
}
$(this).addClass("card-flipped");
// check the pattern of both flipped card 0.7s later.
if ($(".card-flipped").size() == 2) {
setTimeout(checkPattern,700);
}
}
//if pattern is same remove cards otherwise flip back
function checkPattern() {
if (isMatchPattern()) {
$(".card-flipped").removeClass("card-flipped").addClass("card-removed");
if(document.webkitTransitionEnd){
$(".card-removed").bind("webkitTransitionEnd", removeTookCards);
}else{
removeTookCards();
}
} else {
$(".card-flipped").removeClass("card-flipped");
}
}
//put 2 flipped cards in an array then check the image to see if it's the same.
function isMatchPattern() {
var cards = $(".card-flipped");
var pattern = $(cards[0]).data("pattern");
var anotherPattern = $(cards[1]).data("pattern");
return (pattern == anotherPattern);
}
//check to see if all cardmatched variable is less than 8 if so remove card only otherwise remove card and end game
function removeTookCards() {
if (cardsmatched < 8){
cardsmatched++;
$(".card-removed").remove();
}else{
$(".card-removed").remove();
uiCards.hide();
uiComplete.show();
clearTimeout(scoreTimeout);
}
}
//recreate the original card , stop the timer and re populate the array with class names
function reStartGame(){
playGame = false;
uiCards.html("<div class='card'><div class='face front'></div><div class='face back'></div></div>");
clearTimeout(scoreTimeout);
matchingGame.deck = ['blueDino', 'blueDino','brownDino', 'brownDino','redDino', 'redDino','greenDino', 'greenDino','purpDino', 'purpDino','burgDino', 'burgDino',
'orangeDino', 'orangeDino','purp2Dino', 'purp2Dino','pinkDino', 'pinkDino',];
startGame();
}
</script>


</body>

</html>




0 comments:

Post a Comment

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets