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

有帮助吗?

解决方案

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/

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top