接受动画

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);
            }

    });

谢谢!

如果它有帮助,这里是一个小提琴http://jsfiddle.net/smilburn/3qaGK/9/

Answer 1

为什么不使用带有accept/revert设置的draggable/droppable元素,因为你已经使用了jQuery UI？

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

首先,如果不接受,则需要将draggable设置为还原:

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

当然,您需要定义droppable中的有效内容:

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

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

编辑

要对您的点击事件执行相同操作:

$('.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');
            });
        }
    }
});