<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<span class="image-position"><a href="https://www.facebook.com/meuix/?ref=settings" target="_blank">
<img src="https://lh4.googleusercontent.com/fLEIj3iQb7O1FhjOpLFbJtHmsMlLGmLynSWUvAP70qF0HLEBty-FANvwweg7Sv2XqSpzOKNI=w1366-h638"></a>
</span>
<div id="picbox">
<span id="boxbuttons">
<span class="button">
<span id="counter">0</span>
</span>
<span class="button">
<a onclick="ResetGame();">Reset</a>
</span>
</span>
<div id="boxcard">
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
}
body {
font: 18px Verdana;
color: #FFF;
background: -webkit-gradient(linear, center top, center bottom, color-stop(0%,#1D3749), color-stop(60%,#1D3749), color-stop(100%,#559BB5));
}
.image-position{
position: absolute;
left: 3%;
}
.image-position img{
width: 70%;
}
a {
color: #E91E63;
text-decoration: none;
}
#picbox {
margin: 0px auto;
width: 436px;
}
#boxcard {
z-index: 1;
margin: 10px 0 0;
}
#boxcard div{
float: left;
width: 100px;
height: 100px;
margin: 0px;
/*padding: 5px; */
/*border: 2px solid #1d3749;*/
cursor: pointer;
border-radius: 0px;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
background: #fffff0;
z-index: 2;
}
#boxcard div img {
z-index: 3;
width: 100%;
display: none;
}
#boxcard div div {
z-index: 3;
width: 100%;
display: none;
}
#boxbuttons {
text-align: center;
margin: 20px;
display: block;
}
#boxbuttons .button {
text-transform: uppercase;
background: aliceblue;
padding: 8px 20px;
color: #1d3749;
margin: 5px;
border-radius: 0px;
cursor: pointer;
}
#boxbuttons .button:hover {
background: #999;
}
var BoxOpened = "";
var ImgOpened = "";
var ImgFound = 0;
var Source = "#boxcard";
var score = 0;
var ImgSource = [
"#fff",
"#000",
"red",
"blue",
"orange",
"pink",
"yellow",
"green"
];
function RandomFunction(MaxValue, MinValue) {
return Math.round(Math.random() * (MaxValue - MinValue) + MinValue);
}
function ShuffleImages() {
var ImgAll = $(Source).children();//all divs
console.log(ImgAll);
var ImgThis = $(Source + " div:first-child");//first div
console.log(ImgThis);
var ImgArr = new Array();
for (var i = 0; i < ImgAll.length; i++) {
ImgArr[i] = $("#" + $(ImgThis).attr("id") + ' div').css("background-color");
ImgThis = $(ImgThis).next();
}
ImgThis = $(Source + " div:first-child");
for (var z = 0; z < ImgAll.length; z++) {
var RandomNumber = RandomFunction(0, ImgArr.length - 1);
// debugger;
$("#" + $(ImgThis).attr("id") + ' div').css("background-color", ImgArr[RandomNumber]);//assign backgroundcolor to div neby one//#card10 div
ImgArr.splice(RandomNumber, 1);
ImgThis = $(ImgThis).next();
}
}
function ResetGame() {
//alert("Asd");
ShuffleImages();
$(Source + " div div").hide();
$(Source + " > div").css("visibility", "visible");
// Counter = 0;
$("#success").remove();
//$("#counter").html("" + Counter);
BoxOpened = "";
ImgOpened = "";
ImgFound = 0;
return false;
}
function OpenCard() {
var id = $(this).attr("id");
if ($("#" + id + " div").is(":hidden")) {
$(Source + " div").unbind("click", OpenCard);
$("#" + id + " div").slideDown('fast');
if (ImgOpened == "") {
BoxOpened = id;
ImgOpened = $("#" + id + " div").css("background-color");
setTimeout(function() {
$(Source + " div").bind("click", OpenCard)
}, 300);
} else {
CurrentOpened = $("#" + id + " div").css("background-color");
if (ImgOpened != CurrentOpened) {
setTimeout(function() {
$("#" + id + " div").slideUp('fast');
$("#" + BoxOpened + " div").slideUp('fast');
BoxOpened = "";
ImgOpened = "";
}, 400);
} else {
$("#" + id + " div").parent().css("visibility", "hidden");
$("#" + BoxOpened + " div").parent().css("visibility", "hidden");
ImgFound++;
BoxOpened = "";
ImgOpened = "";
score += 20;
}
setTimeout(function() {
$(Source + " div").bind("click", OpenCard)
}, 400);
}
// Counter++;
$("#counter").html("score " + score);
if (ImgFound == ImgSource.length) {
$("#counter").prepend('<span id="success">You Found All Pictues With </span>');
}
}
}
$(function() {
for (var y = 1; y < 3 ; y++) {
$.each(ImgSource, function(i, val) {
$(Source).append("<div id=card" + y + i + "><div style='background-color: "+val+";'></div></div>");
});
}
$(Source + " div").click(OpenCard);
ShuffleImages();
});
