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 :
JAVA SCRIPT BOOKS ONLINE

BASIC ELEVATE ZOOM PLUS

ELEVATE ZOOM JAVA SCRIPT WITH ONE I...

PRINT STAR PATTERN IN JAVA SCRIPT

MOUSE OVER MOUSE OUT IN JAVA SCRIPT

EDIT IMAGE IN NOTEPAD++

NOTEPAD++ REMOVE UNWANTED LINES

Direct Link Generator CODE

Direct Links to your Files on Googl...

ON LINE JAVA LIBRARY

GOOGLE CUSTOM SEARCH BOX

RADIO BUTTON SLIDER TO KEY FRAME SL...

NOTE PAD ++ SYNTAX HIGHLIGHTER FOR ...

ONLINE ZIP OPNER

JAVA COLOR PICKER WITH

GOOGLE CONSOLE

GOOGLE CHROME EXTENSION FILE SAVE O...

OPEN DESKTOP TEXT FILE BY COMMAND P...

HOW TO GET MALWARE ADD POPUP WITHOU...

SHOPIFY JACK MOORE ZOOM
?
+
X
Recommended for you
Loading..
Related Post for DINO PAIRS MATCHING GAME
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/fla…
RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD </head> TAG AND PASTE BELOW CODE WHEN W…
WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection htt…
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE -----------…
INTENSO MAGENTO QUICK VIEW BUTTON ---------------------------------------------------------------------------------------------------------------- 6:01 REMOVE QUICK VIEW BUTTON IN MAGE…
IMAGE UPLOAD WITH JAVA WITH PHP CODE ------------------------------------------------------------------------------------------------------ CREATE FOLDER AND CREATE AND SAVE FILES ONE BY ONE IN THIS FOLDER &nb…
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER ------------------------------------------------------------------------------------------------------------------- SYNTAX HIGHLIGHTER LINKS -----------------------------------…
LABEL WIDGET RAINBOW/MULTI COLOUR STYLE ------------------------------------------------------------------------------------------------- FIRST ADD LABEL WIDGET AND SET LIST OPTION REPLACE YOUR B SKIN TAG WITH BELO…
BOOTSNIPP LOGIN SIGNUP FORM ----------------------------------------------------------------------------------------------------------- READ MORE: http://bootsnipp.com/tags/login http://bootsnipp.com/s…
Magento Hello World Module (Extension) -------------------------------------------------------------------------------------------------------------- READ MORE: http://inchoo.net/magento/programming-magento/magento-…
MULTI COLOR LABEL CLOUD WIDGET ---------------------------------------------------------------------------------------------------- Read More: http://fbgadgets.blogspot.co.uk/2014/06/label-widget-rainbowmu…
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN THIS CODE U NEED SAME POST HTML CODE,P…
BODY JS FILE LINK IN MAGENTO ------------------------------------------------------------------------------------------------------------- SEARCH IN GOOGLE file content software https://www.google.co.uk/s…
MULTI COLOR -------------------------------------------------------------------------------------------------------------- Colors in alphabetical order A-F https://en.wikipedia.org/wiki/Li…
HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_U…
FLASH 8 DOWNLOAD DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINKS&n…
BLOGGER INCLUDABLE SECTION ------------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE ---------------------------------…
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.