Today we show how to create a pairing game using CSS3 animation and Javascripts. This game playable only on firefox, chrome and later version of Internet Explorer because we use 3d transforms. No Flash / Action script is been included in this pairing game. It purely developed on JQuery Javascripts and CSS3. To make this pairing game we need to think and create some physical part of the game. Then implement the rules by using our variables and logic. Every games has some logic steps. We must understand the correct logic.

Below are the some outline that we had implement in the game:

• 1. The game consists of an even number of tiles with images on one side and a generic back. Each image appears on precisely two tiles.
• 2. When the game starts, all tiles are turned face down.
• 3.The player then flips over two cards, selecting them by clicking on them. If the two tiles have the same image, they will be hide automatically. Otherwise, the tiles flip back over after a small period of time.
• 4. The goal of the game is to get all the tiles flipped face up (i.e., find all the matching image pairs) in the least number of tries. That means that lower number of tries (clicks) are better scores.

Javascript function to open image

 function OpenCard() {
        var id = $(this).attr("id");

        if ($("#" + id + " img").is(":hidden")) {
            $(sourceId  + " div").unbind("click", OpenCard);

            $("#" + id + " img").slideDown('fast');
            $("#" + id).removeClass('cards');
            if (openedImaage == "") {
                openedBox  = id;
                openedImaage = $("#" + id + " img").attr("src");
                setTimeout(function() {
                    $(sourceId  + " div").bind("click", OpenCard)

                }, 300);
            } else {
                CurrentOpened = $("#" + id + " img").attr("src");
                if (openedImaage != CurrentOpened) {
                    setTimeout(function() {
                        $("#" + id + " img").slideUp('fast');
                        $("#" + id).addClass('cards');
                        $("#" + openedBox  + " img").slideUp('fast');
                        $("#" + openedBox).addClass('cards');
                        openedBox  = "";
                        openedImaage = "";
                    }, 400);
                } else {
                    $("#" + id + " img").parent().css("visibility", "hidden");
                    $("#" + openedBox  + " img").parent().css("visibility", "hidden");
                    ImageEstablish++;
                    openedBox  = "";
                    openedImaage = "";
                }
                setTimeout(function() {
                    $(sourceId  + " div").bind("click", OpenCard)
                }, 400);
            }
            Counter++;
            $("#counter").html("" + Counter);

            if (ImageEstablish == Imgpath.length) {
                $("#counter").prepend('You Found All Pictues With ');
            }
        }
    }

By Thirumani Raj posted on - 23rd Aug 2016

Live Demo