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 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?
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.net/smilburn/3qaGK/9/