1

単語のスペル、ドラッグ アンド ドロップ ゲームを作成しています。表内の単語に文字をドラッグすると、スペルが正しいか間違っているかに応じてスタイルがトリガーされます。それが正しい場合、単語は消えて背後の絵が現れます。間違っている場合は、スタイルで設定されているとおりに文字が赤く光ります。

私の問題は、ゲームの残りの部分で文字が赤のままであることです。つまり、赤く光る単語を綴ることができないため、背後の画像を完成させることができません。次のターンが発生したときにスタイルを維持し、その単語のスペルをもう一度試してもらいたいのですが、誰か助けてくれませんか?

CSSをトリガーするスクリプトは次のとおりです...

$(".drop").droppable({ 

hoverClass: 'drophover',
drop: function(event, ui) {
    word = $(this).data('word');

    guesses[word].push($(ui.draggable).attr('data-letter'));

    console.log(guesses);

    if (guesses[word].length == 3) {
        if (guesses[word].join('') == word) {
            $('td[data-word=' + word + ']').addClass("wordglow2");


        } else {
            $('td[data-word=' + word + ']').addClass("wordglow");

        }
    }
}
});

このためのCSSは次のとおりです...

.wordglow {
    -webkit-box-shadow: inset 20px 0px 10px 5px #ff0000;
    box-shadow: inset 0px 0px 10px 5px #ff0000;

}

.drop.wordglow2 {

    -webkit-box-shadow: inset 0px 0px 10px 5px #22ff22;
    box-shadow: inset 0px 0px 10px 5px #22ff22;
    visibility: hidden;
    opacity: 0;


}

間違った答えを再びスペル可能にするためにこれを試しました..

$('td[data-word=' + word + ']').addClass("wordglow").removeAttr('disabled');;
4

1 に答える 1

1

activateイベントでクラスを削除できます。そのため、オブジェクトが赤く光っている場合、もう一度次の位置にドラッグし始めると赤が消えます!

$(".drop").droppable({ 
    hoverClass: 'drophover',
    drop: function(event, ui) {
        word = $(this).data('word');

        guesses[word].push($(ui.draggable).attr('data-letter'));

        console.log(guesses);

        if (guesses[word].length == 3) {
            if (guesses[word].join('') == word) {
                $('td[data-word=' + word + ']').addClass("wordglow2");
            } else {
                $('td[data-word=' + word + ']').addClass("wordglow");
            }
        }
    },

    // this event is triggered when a draggable object is activated
    activate: function(event, ui) {
        word = $(this).data('word');

        // try to remove the class
        $('td[data-word=' + word + ']').removeClass('wordglow');
    }
});
于 2012-07-19T08:24:05.983 に答える