Question

In my spelling game there are different size words from 3-6. Once a certain amount of words are completed in the grid the rest of the grid fades away. I want it to add up all the word size varieties rather than just taking one in to consideration. For example I have it at the moment to fadeOut once two words are completed. The problem is it only fades when two, three letter words are complete or two four letter words are complete etc.

var completeLetters = $('.wordglow2').length;
var threeLetter = (completeLetters / 3);
var fourLetter = (completeLetters / 4);
var fiveLetter = (completeLetters / 5);
var sixLetter = (completeLetters / 6);


if (threeLetter == 2) {
    $('table').fadeOut(2000);
}
if (fourLetter == 2) {
    $('table').fadeOut(2000);
}
if (fiveLetter == 2) {
    $('table').fadeOut(2000);
}
if (sixLetter== 2) {
    $('table').fadeOut(2000);
}

Is there not a way of having a variable that combines all the words and then creating an if statement for that?

Answer 1

Firstly – I would advise that you are doing this the wrong way – you are determining game state from the HTML/CSS representation of the game. I would recommend that you create an object which represents the game state and then use this object to determine the manipulations you need to make to the HTML/CSS representation. This will also make doing what you are trying to do here much easier.

For example you may end up being able to say something like…

if (gamestate.wordscomplete == 3) {//fade board//}

…which is a lot more pleasant than digging through the HTML. But I digress…

Ok so the class wordglow2 gets added to a letter when it is correct. Each <tr> in the grid can contain a word. So…

function gamestate() {
  var words = []; //new array to store completed word counts
  var wordscompleted = 0; //overall word count
  //create an entry for 3,4,5, and 6 letter words
  for (var wc = 3; wc <=6 ; wc++) {words[wc] = 0;}

  $('table.tablestyle > tr').each( function(i,el) {
    // get the number of complete letters in this row
    var wordlength = $(el).find('.wordglow2').length; 
    if (wordlength >=3 && wordlength <= 6) { 
      // a completed word should not be outside of this range anyway
      words[wordlength]++; //increment the appropriate counter
      wordscompleted++; //increment overall counter
    }
  });
  //return a gamestate object 
  return { wordscompleted : wordscompleted , words : words };
}; 

The above function will look at each row in the game table and count the number of wordglow2 cells. If this is between 3 and 6 then an overall counter is incremented and also counter for each word length is incremented.

It can be used as follows…

var gs = gamestate();

gs.wordscompleted //total words completed
gs.words[3]       //total 3-letter words completed
gs.words[4]       //total 4-letter words completed etc etc

UPDATE

http://jsfiddle.net/HZX6k/6/

This fiddle just uses a global object to track the gamestate incrementing the count and the count for each of the 3,4,5,6 letter count words as it goes.