javascript - 接受动画

Question

编辑**

在我的文字游戏中，有一个包含 3 个字母单词的网格。

游戏的目的是通过点击旁边相应的字母来拼写单词。

当网格中的某个区域突出显示时，它会向用户指示要拼写的单词。用户点击网格边上的字母，然后移动到突出显示的区域。

目前我有显示单个字母是否正确的样式，但是当一个单词完成时我需要它来识别它以便我可以将样式应用于它。

谁能告诉我一些识别正确和错误单词的代码？

当它是一个拖放游戏时，我是这样做的......

 if (guesses[word].length == 3) {
        if (guesses[word].join('') == word) {

        $('td[data-word=' + word + ']').addClass('wordglow2');

    } else {

        $('td[data-word=' + word + ']').addClass("wordglow4");
        target.splice(0, guesses[word].length);


    }
});

这里是点击动画功能的代码...

if (target.length) {
    $(".minibutton").prop("disabled", true);
    b.clone().addClass(
    b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow").appendTo("table").css({
        background: "transparent",
        position: "absolute",
        top: currentPos.top,
        left: currentPos.left
    }).animate({
        top: targetPos.top,
        left: targetPos.left
    }, "slow", function() {
        $(this).css({
            top: 0,
            left: 0
        }).appendTo(target);
        target.addClass("occupied");
    });
}

我试过这个...

        if (target.length == 3) {
            if (target.join('') == word) {

                $(this).addClass('wordglow2');

     } else {

            $('td[data-word=' + word + ']').addClass("wordglow4");       
                guesses[word].splice(0, guesses[word].length);


            }
    });

还有这个……

if $(('.wordglow3').length == 3) {

                $('td[data-word=' + word + ']').addClass('wordglow2');

     } else if $(('.wordglow').length == 3) { 

                $('td[data-word=' + word + ']').addClass("wordglow4");
                guesses[word].splice(0, guesses[word].length);
            }

    });

谢谢!

如果有帮助，这里有一个 fiddle http://jsfiddle.net/smilburn/3qaGK/9/

Answer 1

既然您已经在使用 jQuery UI，为什么不使用具有接受/还原设置 的draggable/droppable 元素？

这是完成接受/恢复拖放的理论方法:

首先你需要设置你的draggable在不被接受时恢复:

$(".drag").draggable({ revert: 'invalid' });

当然你需要定义什么在你的 droppable 中是有效的:

$(".drop").droppable({ accept: '.drag' });​

要么尝试使用选择器来过滤正确答案，方法是为每个字母 (.addClass("b");) 设置一个类，然后使用 动态更改此选择器。可丢弃(“选项”，“接受”，“.b”)。或者使用 jQuery UI 中包含的魔法粉。您可以插入一个函数作为 "accept" 的值，它的返回值将定义您接受的有效元素: $(".drop").droppable( { 接受:功能() { //在这里添加一个条件来返回 true 或 false } });

编辑

对您的点击事件做同样的事情:

$('.drag').on('click', function(e)
{
    e.preventDefault();

    var target     = $('.drop-box.spellword:not(.occupied):first');
    var targetPos  = target.position();
    var currentPos = $(this).offset();
    var b = $(this);

    if(target.length)
    {
        // compare clicked letter with expected letter
        if(b.attr("data-letter") == target.attr("data-letter"))
        {
            b.remove().appendTo('table').css({
            'position' : 'absolute',
            'top' : currentPos.top,
            'left': currentPos.left
            });

            b.animate({
               top  : targetPos.top,
                left : targetPos.left
            }, 'slow', function() {
                b.remove().css({ top: 0, left: 0 }).appendTo(target);
                target.addClass('occupied');
            });
        }
    }
});