Show all playing cards in Javascript

Question

Show all playing cards in Javascript

Navigation

#1 by (0 votes)

0

I was able to find a memory game in Javascript and made some changes as you can see in the my repository

What I would like to do is that when I started the Game it would show all the images and after 3 seconds hid the images as it was configured before, but I do not know how to do that, someone could become available to see how to make modification in the code .

Code

This piece of code hides has the effect of turning the images;

function flip(n) {
    isPlaying && ($(n).css("pointer-events", "none"), $(n).toggleClass("flipped"), playSound("flip"), current ? ($(".card").css("pointer-events", "none"), current.attr("data") != $(n).attr("data") ? setTimeout(function() {
        current.toggleClass("flipped"), $(n).toggleClass("flipped"), current = null, playSound("incorrect"), isPlaying && $(".card").css("pointer-events", "auto")
    }, 600) : (point++, $(n).find("img").css({
        "-webkit-box-shadow": "0px 0px 15px 5px rgba(240,240,140,0.75)",
        "-moz-box-shadow": "0px 0px 15px 5px rgba(240,240,140,0.75)",
        "box-shadow": "0px 0px 15px 5px rgba(240,240,140,0.75)"
    }), current.find("img").css({
        "-webkit-box-shadow": "0px 0px 15px 5px rgba(240,240,140,0.75)",
        "-moz-box-shadow": "0px 0px 15px 5px rgba(240,240,140,0.75)",
        "box-shadow": "0px 0px 15px 5px rgba(240,240,140,0.75)"
    }), setTimeout(function() {
        $(n).css("opacity", "0").attr("onclick", "").children().children("img").css("cursor", "default"), current.css("opacity", "0").attr("onclick", "").children().children("img").css("cursor", "default"), current = null, playSound("correct"), point == numberCards ? (document.getElementById("bg-music").load(), playSound("win"), stopGame(), openModal("win")) : $(".card").css("pointer-events", "auto")
    }, 600))) : current = $(n))
}

This piece of code hides images

function loadContent() {
    $(".progressbar").css("display", "none"), cards = shuffle(cards);
    for (var n = "", e = 0; e < cards.length; e++) n += '<div class="grid"><div class="card" data="' + cards[e] + '" onclick="flip(this)"><div class="front"><img src="img/back.jpg"/></div><div class="back"><img src="img/' + cards[e] + '.jpg"/></div></div></div>';
    $(".content").html(n), openModal("begin")
}

javascript

asked by anonymous 04.04.2018 / 13:11

1 answer

How To Make Video Fileupload In Angular 4? Edit a contact within this calendar

score 0 · Answer 1

function loadContent() {
        $(".progressbar").css("display", "none"), cards = shuffle(cards);
}
 setTimeout(function(){ 
         for (var n = "", e = 0; e < cards.length; e++){
                 n += '<div class="grid"><div class="card" data="' + cards[e] + '" onclick="flip(this)"><div class="front"><img src="img/back.jpg"/></div><div class="back"><img src="img/' + cards[e] + '.jpg"/></div></div></div>';
            $(".content").html(n), openModal("begin")
        }          
    }, 3000);

This will cause the cards to be hidden after 3 seconds You may have to add jquery to your project