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 :

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

RELATED POST WIDGET LIST SHAPE

BUTTON PADDING CHANGE HEIGHT WIDTH
?
+
X
Recommended for you
Loading..
Related Post for DINO PAIRS MATCHING GAME
OPEN DESKTOP TEXT FILE BY COMMAND PROMPT -------------------------------------------------------------------------------------------------------------- Read More: Very Simple Java Hello World program with Notepad and …
BLOGGER INCLUDABLE SECTION ------------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE ---------------------------------…
GOOGLE CHROME EXTENSION FILE SAVE ON WINDOW --------------------------------------------------------------------------------------------------- Where are my Google Chrome extensions stored? -----------------------------…
RAINBOW RANDOM POST CODE WITH BLOG URL BUT NO IMAGE -------------------------------------------------------------------------------------- RAINBOW RANDOM POST CODE WITH BLOG URL BUT NO IMAGE: ADD HTML/JAVA WIDGET AND PASTE BELO…
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/fla…
BRICK WALL MENU BAR CODE -------------------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE http://fbgadgets.blogspo…
JAVA FILE MAKE & SAVE IN NOTE PAD CLICK AND OPEN NOTE PAD IN WNDOW MENU BAR -------------------------------------------------------------------------------------------------------- COPY…
Direct Links to your Files on Google Drive 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 LINK…
IMAGE UPLOAD WITH JAVA WITH PHP CODE ------------------------------------------------------------------------------------------------------ CREATE FOLDER AND CREATE AND SAVE FILES ONE BY ONE IN THIS FOLDER &nb…
ON LINE JAVA LIBRARY -------------------------------------------------------------------------------------------------------- READ MORE: https://cdnjs.com/libraries https://code.angularjs.org/ http…
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE -----------…
Magento Hello World Module (Extension) -------------------------------------------------------------------------------------------------------------- READ MORE: http://inchoo.net/magento/programming-magento/magento-…
Bread Crumb Navigation Menu Guardian Style --------------------------------------------------------------------------------- CODE BELOW ---------------------------------------------------------------------------------…
BOOTSNIPP LOGIN SIGNUP FORM ----------------------------------------------------------------------------------------------------------- READ MORE: http://bootsnipp.com/tags/login http://bootsnipp.com/s…
MULTI COLOR LABEL CLOUD WIDGET ---------------------------------------------------------------------------------------------------- Read More: http://fbgadgets.blogspot.co.uk/2014/06/label-widget-rainbowmu…
RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD </head> TAG AND PASTE BELOW CODE WHEN W…
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…
WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection htt…
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER ------------------------------------------------------------------------------------------------------------------- SYNTAX HIGHLIGHTER LINKS -----------------------------------…
JS IMAGE SCROLLER -------------------------------------------------------------------------------------------------------------- JS IMAGE SCROLLER CODE image scroller https://amazingcarousel.com…
MULTI COLOR -------------------------------------------------------------------------------------------------------------- Colors in alphabetical order A-F https://en.wikipedia.org/wiki/Li…
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.