接受动画 [英] Accepting the animation

问题描述

编辑**

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

In my word game there is a grid with 3 letter words.

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

The aim of the game is to spell the words by clicking on the corresponding letters on the side.

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

When an area in the grid is highlighted it indicates to the user the word to spell. The user clicks the letters on the side of the grid and they move to the highlighted area.

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

At the moment I have the styles to show if the individual letters are correct, but when a word is completed I need it to recognize this so I can apply the styles to it.

有人能给我看一些识别正确和错误单词的代码吗？

Can someone show me some code that recognizes the correct and wrong words?

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

 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/

If it helps, here is a fiddle http://jsfiddle.net/smilburn/3qaGK/9/

推荐答案

为什么不使用 draggable / droppable 元素和接受/恢复设置，既然你已经在使用jQuery UI了？

Why not using a draggable/droppable element with an accept/revert setting, since you are using jQuery UI already?

这是一种完成接受/恢复拖动的理论方法。 drop：

Here is a theoretical way to accomplish an accept/revert drag & drop:

首先，如果不接受，你需要将你的可拖动设置为还原：

First you need to set your draggable to revert if it is not accepted:

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

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

Then of course you need to define what is valid in your droppable :

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

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

Either you try using a selector to filter the right answers, by setting a class for each letter (.addClass("b");) and later change dynamically this selector with .droppable("option","accept",".b"). Or use the magic powder included in jQuery UI. You can insert a function as a value for "accept", it's returned value will define what you accept as a valid element: $(".drop").droppable( { accept: function() { // add a conditon here to return true or false } });​

修改

对点击事件执行相同操作：

To do the same with your click event :

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

这篇关于接受动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！