Вопрос

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