Pregunta

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

¿Fue útil?

Solución

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 bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top