Принятие анимации

ИЗМЕНИТЬ **

В моей игре слова есть сетка с тремя буквами.

Цель игры - записать слова, щелкнув соответствующие буквы сбоку.

Когда область в сетке подсвечивается, она указывает пользователю слово для заклинания. Пользователь нажимает буквы на боковой стороне сетки и перемещается в выделенную область.

В настоящий момент у меня есть стили, чтобы показать, правильно ли написаны отдельные буквы, но когда слово завершено, мне нужно, чтобы оно распознало это, чтобы я мог применить к нему стили.

Может кто-нибудь показать мне код, который распознает правильные и неправильные слова?

Когда это была игра с перетаскиванием, я сделал это как это...

 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/

Ответ 1

Почему бы не использовать draggable/droppable элемент с параметром принять/отменить, так как вы уже используете jQuery UI?

Вот теоретический способ выполнить переход/перетаскивание accept/revert:

Сначала вам нужно настроить перетаскивание, если оно не принято:

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

Тогда, конечно, вам нужно определить, что действительно в вашем droppable:

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

Попробуйте использовать селектор для фильтрации правильных ответов, установив класс для каждой буквы (.addClass("b");), а затем динамически измените этот селектор с помощью .droppable("option","accept",".b"). Или используйте волшебный порошок , включенный в пользовательский интерфейс jQuery. Вы можете вставить функцию как значение для "accept", это возвращаемое значение будет определять то, что вы принимаете как действительный элемент: $ ( "Уронить" ). Droppable ( { accept: function() { // добавим условие для возврата true или false } });

Edit

Чтобы сделать то же самое с событием click:

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

Ответ 2

Если я понимаю этот вопрос, вы ищете способ проверить правильность слова, которое создается путем выбора букв, а затем применения стилей к слову.

Вот что я буду делать:

var dict = []; // Create an array with all of the possible words
var word = "";

function createWord(){ // Creates the variable word to be checked against array
  var addToWord = $(this).html(); // Sets the variable addTo Word to the letter selected
  word = word + addToWord; // Adds the selected letter to the current word
};

function checkWord(){
  var i = dict[].length; // Sets incrementor "i" to the length of the array
  while (i){  // While "i" is a positive value
    if (word == dict[i]){ // Checks if the word is equal to the word in that spot of the array
      // If it is, apply the correct styles
    }
    else{ // If it isn't, 
      // Do Nothing
    }
   i = i--; // Decrease i by one, and repeat until the whole array has been checked
  }
};

$('foo bar').click(function(){
  createWord();
  checkWord();
}

Удачи! Надеюсь, это поможет.

-Брайан