Image match javascript memory game

Games !!! Its always fun to play games. i think 70% people likes to play games, out of remaining 30% percent 20% likes to play but dont find time, and remaining 10% ?? i dont want to talk about them . well, thats not a point we are going to discuss here.
This Image match javascript memory game idea was in my mind from long back but due to time i wasnt able to draw it in a browser. but no matter Image match javascript memory game is in browser now and i am feeling little little light, because there are still many ideas waiting for their turn.
For this Image match javascript memory game i am using one free jquery plugin named rotate3Di and i am really thankful of Zachary Johnson half of work was done my him and remaining half was done by jquery,i didnt do anything at all.Play ! Download

Image match javascript memory game Game Setup

1) Include javascript,jquery and css files

2) Put images in images folder
Make sure they are .PNG files. You can change this to any extension just dont forgot to mention it in game.js file.

3) Create HTML page
For this you just need to add few lines (If you want to show game only and dont want to show click and high scores etc)

4) Game Logic
And here is the logic, the game.js.

$(document).ready(function () {
	var counter = 0;
	var images  = new Array();
	var match = new Array();
	var check = 0;
	var blocks = "";
	var no_of_blocks = 24;

	//clear input box and load scores on bodyload event
	$("#uname").val("");
	load_scores_list();

	// add image blocks to game screen
	for(i=1;i<=no_of_blocks;i++){
	  blocks +='<li id="'+i+'"><div class="front"><a href="#"></a></div><div class="back" style="display:none;"><a href="#"></a></div></li>\n';
	}
	$("#nav-list-example").html(blocks);
	
	// shuffle images and show
	$('#nav-list-example li div.back').each(function(){
	  var randomnumber = Math.floor(Math.random()*Math.round(no_of_blocks/2));
	  
	  // generate new random number until u find unique number
	  while (get_occurance_count(randomnumber)) {
		randomnumber = Math.floor(Math.random()*Math.round(no_of_blocks/2));
	  }
	  
	  $(this).css("background","url('images/"+randomnumber+".png')").css("background-repeat","no-repeat");	
	  //$(this).css("background","url(images/"+randomnumber+".png)").css("background-repeat","no-repeat");	  
	  images.push(randomnumber);
	});

	$('#nav-list-example li div.back').hide().css('left', 0);
    
    function mySideChange(front) {
        if (front) {
            $(this).parent().find('div.front').show();
            $(this).parent().find('div.back').hide();
            
        } else {
            $(this).parent().find('div.front').hide();
            $(this).parent().find('div.back').show();
        }
    }
    
	// on image block click event
    $('#nav-list-example li').click(function(){
      id = $(this).attr("id");
	  // if 2 images are open then close all and open recently clicked image    
       if(counter == 2 && $(this).find("div").html() != null){  
        $("#nav-list-example").find('div.active').removeClass("active");  
        $("#nav-list-example").find('div').stop().rotate3Di('unflip', 200, {sideChange: mySideChange});
        counter = 0;
        match = new Array();
        flipImage(id);
      } else{
	  	flipImage(id);
      }
    });

	var clicks = 0;
	$("#list ul").live("mouseover",function(){
		$(this).find("li").css("background","black");
	});
	
	$("#list ul").live("mouseout",function(){
		$(this).find("li").css("background","#252525");
	});
	
	$("#nav-list-example li").click(function(){
		clicks++;
		$("#score").find("span").html(clicks);
	});
	
	$("#controls input").click(function(){
		document.location.href = document.location.href;
	});
	
	// save game score
	$("#save").click(function(){
		var user  = $("#uname").val();
		var score = $("#score").find("span").html();
		if(user != ""){
			$.ajax({
			   type: "POST",
			   url: "ajax_server.php",
			   data: "action=save&name="+user+"&score="+score,
			   success: function(msg){
				 $(".userinfo").fadeOut("slow");
				 $('<ul><li id="name">'+user+'</li><li>'+score+'</li></ul>').appendTo("#list");
			   }
			 });
		}
	});

	$("#cancel").click(function(){
		$(".userinfo").fadeOut("slow");
	});
	
	function load_scores_list(){
		var list = "";
		$.ajax({
		   type: "POST",
		   url: "ajax_server.php",
		   data: "action=get",
		   success: function(responce){
			 var json = jQuery.parseJSON(responce);
			 $.each(json, function(i,record){
				list += '<ul><li id="name">'+record.name+'</li><li>'+record.score+'</li></ul>';
				$("#list").html(list);
			 });
		   }
		 });
	}
	
	// check if image is there 2 times ?
    function get_occurance_count(randomnumber){
        var count = 0;
        for ( var i = 0; i < images.length; i++ ) {
            if(images[i] == randomnumber)
              count++;
        }
        if(count == 2) return true;
        return false;
    }
    
	function flipImage(id){
       if($('#nav-list-example li[id='+id+']').find('div.front').css("display") == 'block'){
          if($('#nav-list-example li[id='+id+']').find("div").html() != null){
            counter++; 
            match.push($('#nav-list-example li[id='+id+']').find('div.back').css("background-image"));
            $('#nav-list-example li[id='+id+']')
            .find('div')
            .addClass("active")
			.stop().rotate3Di('flip', 200, {direction: 'clockwise', sideChange: mySideChange,complete: checkMatch});           
          }
      }else{
          if($('#nav-list-example li[id='+id+']').find("div").html() != null){
             $('#nav-list-example li[id='+id+']').find('div').stop().rotate3Di('unflip', 200, {sideChange: mySideChange});
             counter--;
          }
      }    
    }

    function checkMatch(){
	    if(match.length == 2){
	        // check if there are 2 unique entries and not same image clicked twice
	        if(match[0] == match[1] && $("#nav-list-example").find('div.active').length == 4){
	          $('.active').fadeOut("fast",function(){$(this).remove();gameEnd();});
	        }
	        match = new Array();
  		}                
    }
    
	// check game end
    function gameEnd(){
		if(parseInt($('#nav-list-example li').find("div:visible").length) == 0)
			$(".userinfo").fadeIn("slow");
	}
}); /* End of WORLD */

 

How to play Image match javascript memory game game