<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="pragma" content="no-cache" />
<title>Memory Test</title>
<meta name="description" content="" />
<meta name="author" content="Mayank Johri" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<style>
#quest{
width: 24em;
height:24em;
margin-left:auto;
margin-right:auto;
border: 1px solid #1E90FF;
}
.mango{
height: 4em;
width: 4em;
margin: 1em;
float: left;
background: url(imgs/mango.svg) ;
background-size: 4em 4em;
}
.orange{
height: 4em;
width: 4em;
margin: 1em;
float: left;
background: url(imgs/Orange_Icon.svg) ;
background-size: 4em 4em;
}
.grapes{
height: 4em;
width: 4em;
margin: 1em;
float: left;
background: url(imgs/grape_red.svg) ;
background-size: 4em 4em;
}
.freshorange2{
height: 4em;
width: 4em;
margin: 1em;
float: left;
background: url(imgs/freshorange2.svg) ;
background-size: 4em 4em;
}
.Peach{
height: 4em;
width: 4em;
margin: 1em;
float: left;
background: url(imgs/Peach.svg) ;
background-size: 4em 4em;
}
.passion{
height: 4em;
width: 4em;
margin: 1em;
float: left;
background: url(imgs/passion.svg) ;
background-size: 4em 4em;
}
.watermelon{
height: 4em;
width: 4em;
margin: 1em;
float: left;
background: url(imgs/watermelon.svg) ;
background-size: 4em 4em;
}
.apple{
height: 4em;
width: 4em;
margin: 1em;
float: left;
background: url(imgs/Red_Apple.svg) ;
background-size: 4em 4em;
}
.pineapple{
height: 4em;
width: 4em;
margin: 1em;
float: left;
background: url(imgs/Pineapple.svg) ;
background-size: 4em 4em;
}
.box{
/*background-color: #0000FF;*/
height: 4em;
width: 4em;
}
.blank{
background-color: #FF9933;
height: 4em;
width: 4em;
}
</style>
</head>
<body>
<div style="text-align: center;">
<header>
<h1>Memory Game</h1>
</header>
<div id="quest">
</div>
<div style="clear: both;" style="text-color: blue" >Click Count: <span id="count">0</span> | Items Left: <snap id="left">16</span> </div>
<footer>
<p>
© Copyright by Mayank Johri
</p>
</footer>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
count = 0;
Array.prototype.shuffle = function () {
for (var i = this.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = this[i];
this[i] = this[j];
this[j] = tmp;
}
return this;
}
$().ready(function(){
count = 0;
objs = new Array("orange", "apple", "grapes", "freshorange2", "Peach","mango", "passion", "watermelon",
"orange", "apple", "grapes", "freshorange2", "Peach","mango", "passion", "watermelon")
objs.shuffle();
for (var index = 0; index < objs.length; ++index) {
$("#quest").append(
"<div class='" + objs[index] + "'> \
<div class='blank'> </div>"
)
}
$("#quest>div").on("click", function(){
count++;
$("#count").text(count);
$(this).find(">div").toggleClass("blank box");
if($("#quest>div>.box").length == 2){
var other = $("#quest>div>.box").parent().not($(this)).attr("class");
if($(this).hasClass(other)){
$("#quest>div>.box").parent().css({"visibility":"hidden"});
$("#quest>div>.box").toggleClass("blank box");
}else{
$("#quest>div>.box").toggleClass("blank box");
}
}else{
}
})
})
</script>
</body>
</html>
Advertisements
