JOGUINHO DA MEMÓRIA MUITO BOM
Autor: R. Lima | Publicado: 2014-03-11T19:00:00-04:00


JOGUINHO DA MEMÓRIA

            var boxopened = "";
            var imgopened = "";
            var count = 0;
            var found =  0;
 
            function randomFromTo(from, to){
                return Math.floor(Math.random() * (to - from + 1) + from);
            }
 
            function shuffle() {
                var children = $("#boxcard").children();
                var child = $("#boxcard div:first-child");
 
                var array_img = new Array();
 
                for (i=0; i<children.length; i++) {
                    array_img[i] = $("#"+child.attr("id")+" img").attr("src");
                    child = child.next();
                }
 
                var child = $("#boxcard div:first-child");
 
                for (z=0; z<children.length; z++) {
                    randIndex = randomFromTo(0, array_img.length - 1);
 
                    // set new image
                    $("#"+child.attr("id")+" img").attr("src", array_img[randIndex]);
                    array_img.splice(randIndex, 1);
 
                    child = child.next();
                }
            }
 
            function resetGame() {
                shuffle();
                $("img").hide();
                $("img").removeClass("opacity");
                count = 0;
                $("#msg").remove();
                $("#count").html("" + count);
                boxopened = "";
                imgopened = "";
                found = 0;
                return false;
            }
 
            $(document).ready(function() {
                $("img").hide();
                $("#boxcard div").click(openCard);
 
                shuffle();
 
                function openCard() {
 
                    id = $(this).attr("id");
 
                    if ($("#"+id+" img").is(":hidden")) {
                     $("#boxcard div").unbind("click", openCard);
                     
                        $("#"+id+" img").slideDown('fast');
 
                        if (imgopened == "") {
                            boxopened = id;
                            imgopened = $("#"+id+" img").attr("src");
                            setTimeout(function() {
                                $("#boxcard div").bind("click", openCard)
                            }, 300);
                        } else {
                            currentopened = $("#"+id+" img").attr("src");
                            if (imgopened != currentopened) {
                                // close again
                                setTimeout(function() {
                                    $("#"+id+" img").slideUp('fast');
                                    $("#"+boxopened+" img").slideUp('fast');
                                    boxopened = "";
                                    imgopened = "";
                                }, 400);
                            } else {
                                // found
                                $("#"+id+" img").addClass("opacity");
                                $("#"+boxopened+" img").addClass("opacity");
                                found++;
                                boxopened = "";
                                imgopened = "";
                            }
                            setTimeout(function() {
                             $("#boxcard div").bind("click", openCard)
                         }, 400);
                        }
 
                        count++;
                        $("#count").html("" + count);
 
                        if (found == 10) {
                             msg = 'Congrats ! You Found All Sushi With ';
                            $("span.link").prepend(msg);
                        }
                    }
                }
            });
        

            * {
                font-family: Arial, "Free Sans";
            }
 
            #boxcard {
                margin: 0 auto;
                width: 625px;
                z-index: 1;
            }
 
            #boxcard div {
                float: left;
                width: 100px;
                height: 100px;
                background: #d9d9d9;
                margin: 5px;
                padding: 5px;
                border: 1px solid #999;
                cursor: pointer;
                -webkit-border-radius: .5em;
                -moz-border-radius: .5em;
                border-radius: .5em;
                -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
                -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
                box-shadow: 0 1px 2px rgba(0,0,0,.5);
                z-index: 2;
            }
 
            #boxcard div img {
                border: none;
                z-index: 3;
            }
 
            .opacity {
                opacity: .6;
                filter: alpha(opacity=60);
            }
 
            #boxbutton {
                text-align: center;
                padding: 20px;
            }
            .link {
                font-size: 18px;
                color: #ffffff;
                text-decoration: none;
                background: #0066cc;
                padding: 5px 10px;
                -webkit-border-radius: .5em;
                -moz-border-radius: .5em;
                border-radius: .5em;
            }
            .link:hover {
                background: #999;
            }
        


0
Click

&nbsp;
Reset