<!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