Question

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

Était-ce utile?

La solution

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/

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top