EDIT**

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 pleted 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?

When it was a drag and drop game I did it like this...

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


    }
});

Here is the code for the click to animate function...

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

I have tried this...

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


            }
    });

and this...

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

    });

Thanks!

If it helps, here is a fiddle /

EDIT**

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 pleted 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?

When it was a drag and drop game I did it like this...

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


    }
});

Here is the code for the click to animate function...

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

I have tried this...

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


            }
    });

and this...

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

    });

Thanks!

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

• javascript
• jquery
• jquery-ui

2 Answers 2

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

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

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

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

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

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

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

Edit

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)
    {
        // pare 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');
            });
        }
    }
});

If I understand the question, you are looking for a way to check the validity of a word that is created by selecting letters, and then applying styles to the word.

Heres what I would do:

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

Good Luck! Hope this helps.

-Brian