Pergunta

I'm making a drag-and-drop matching game for a client.

Question 1: Once all images are matched to their words, how can I make a popup appear saying "Game Over" or something similar?

Question 2: Once an image has been matched to its word, is it possible to have both the image and the word fade out of view (so the page isn't cluttered by images that have already been matched)?

Here is my Javascript:

$("#bottle, #butterfly").draggable({ revert: "invalid", containment: "#wrapper"});
$("#bottleDrop").droppable({
    accept: "#bottle",
    drop: function(event, ui) {
        if(ui.draggable.is("#bottle")){
            $(this).addClass("correct").find("p").html("correct!");
        }
    }
});
$("#butterflyDrop").droppable({
    accept: "#butterfly",
    drop: function(event, ui) {
        if(ui.draggable.is("#butterfly")){
            $(this).addClass("correct").find("p").html("correct!");
        }
    }
});

JSFiddle

Foi útil?

Solução

Here is one way it could be done:

var done = true;    
    $("#bottle, #butterfly").draggable({ 
        revert: "invalid", containment: "#wrapper",
        start: function(event, ui){
        if(!done)
            return false;
        },
        stop: function(event, ui){
            if($(".correct").length == $(".drop").length){
                setTimeout(function(){
                    alert('All items have been matched!');
                },2000);
            }
        }
    });
    $("#bottleDrop").droppable({
        accept: "#bottle",
        drop: function(event, ui) {
            if(ui.draggable.is("#bottle")){
                $(this).addClass("correct").find("p").html("correct!");
                ui.draggable.fadeOut(2000);
                $(this).fadeOut(2000);
            }
        }
    });
    $("#butterflyDrop").droppable({
        accept: "#butterfly",
        drop: function(event, ui) {
            if(ui.draggable.is("#butterfly")){
                $(this).addClass("correct").find("p").html("correct!");
                done = false;
                ui.draggable.fadeOut(2000);
                $(this).fadeOut(2000,function(){
                    done = true;
                });
            }
        }
    });

Example:

http://jsfiddle.net/trevordowdle/Uf8Tq/2/

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top