"Play cross match game with codeuix"
Bootstrap 3.3.0 Snippet by rajesh123456

<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(); });

Related: See More


Questions / Comments: