Sunday, 14 September 2014
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>
Related movie you might like to see :

CSS SLIDER WITHOUT JS

FLICKITY SLIDER SCROLL WITH RADIO N...

FLICKITY JS CSS SLIDER

CONVERT FILE PATH TO A URL LINK
Make Own API English Dictionary

JS IMAGE SCROLLER

QUICK FIND TOOL GOOGLE CHROME FOR ...

WEB DEVELOPER 0.5

BODY JS FILE LINK IN MAGENTO

INTENSO MAGENTO QUICK VIEW BUTTON

Magento Hello World Module (Extensi...

BOOLEAN MATCHING GAME JAVASCRIPT

GET BUTTON ID AFTER CLICK IN JAVA S...

JAVA SCRIPT LOOP

QUIZY MEMORY CARD GAME

CTX STYLE

IMAGE SRC ARRAY IN JAVA SCRIPT

QUIZ ACTIVITY MAKER

MEMORY GAME WITH UPPER HIDDEN CARD

HTML SYNTAX HIGHLIGHTER
?
+
X
Recommended for you
Loading..
Related Post for DINO PAIRS MATCHING GAME
SEO SCORE TOOLS SEO Audit Tool Reasons to be a Professional Member 1. Generate more SEO leads from your website 2. Increase SEO sales with personalized audits 3. Get email notifications o…
JS IMAGE SCROLLER -------------------------------------------------------------------------------------------------------------- JS IMAGE SCROLLER CODE image scroller https://amazingcarousel.com…
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST --------------------------------------------------------------------------------------------------------------------- NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST https://…
SCREEN TO GIF ------------------------------------------------------------------------------------------------------------------ Read More: 3:30 PDF HTML IMAGE CONVERTER HD…
IMAGE UPLOAD WITH JAVA WITH PHP CODE ------------------------------------------------------------------------------------------------------ CREATE FOLDER AND CREATE AND SAVE FILES ONE BY ONE IN THIS FOLDER &nb…
CSS SLIDER WITHOUT JS ----------------------------------------------------------------------------------------------------------- ReadMore: http://cssslider.com/non-jquery-carousel-7.html SAVE …
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE -----------…
NOTEPAD++ REMOVE UNWANTED LINES ------------------------------------------------------------------------------------------------------------------------------------------------------------ STEP NO : 1 1- CT…
SHARING WIDGET Add To Any For Blogger Share button for Blogger To place under every post in Blogger To place under every post in Bloggerhttps://codepen.io/sunnysingh/pen/OPxbgq<!DOCTYPE html><html lan…
AUTO CSS JS SLIDER WITH ARROW BULLET ------------------------------------------------------------------------------------------------------- BX SLIDER CODE: READ MORE: BX SLIDER IN BLOGGER TEMPALTE - You…
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER ------------------------------------------------------------------------------------------------------------------- SYNTAX HIGHLIGHTER LINKS -----------------------------------…
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.