Creating an anagram game using jQuery

Question

I'm building an anagram game which moves letters from a selection of jumbled anagram letters to a row of blank tiles which give the player a clue to how many letters the word has. I've got the basic functionality working; when you click any letter it jumps to the first available blank tile and if you click that tile once it has a letter in it, it sends the letter back to the first empty tile on the jumbled list.

My problem is that if all blank tiles are filled the user can still click the jumbled letters and currently that destroys that letter as it is sent to a div with class of target - which only exists while there are blank tiles above.

I have tried several ways to resolve this issue, what I think would be best is getting an if statement to check whether any clue spaces have the class of target - if not then don't append the letter. another idea I had was to toggle html between the clicked letter and the blank tile.

here's the if statement

    if ($('.space-1' || '.space-2' || '.space-3' || '.space-4' || '.space-5').hasClass('target')) {

$('.target').append(letter);
$(this).html('');
}

I can't seem to get this working. Any help would be appreciated I've been stuck on this for the last two days. you can see the game here: http://jsfiddle.net/alan1986/V3Lv2/

(you can see all the different solutions I've tried commented out)

Answer 1

I realize this thread is a little old but in case anyone is looking at this and wants a slightly more refined version, here you go:

$(document).ready(function() {
    var i = 1;
    var j = 1;
    var k = 0;

    //add number to each letter 
    $('.anagram-letter').each(function(){
        $(this).addClass('letter-' + i);
        i++;
    });

    $('.clue').each(function(){
        $(this).addClass('space-' + j);
        j++;
    });

    //clicking letter sends it to first empty div   
    $('.anagram-letter').click(function(){
        var $this = $(this);
        var clue = $('.clue');
        var target = $('.target');
        //defines the clicked anagram letter content
        var letter = $this.html();
        //loop checking if each clue has a class of target
        var full = clue.each(function(){
            clue.hasClass('target');
            //k counts from 0 adding 1 each time as it moves from clue to clue
            k++;                     
        });

        if(clue.hasClass('target') && $this.html() != ''){
            //add empty class to clicked anagram-letter
            $this.addClass('empty');
            //append letter to first clue with class of target
            target.first().append(letter);
            $this.html('');
            //add full class to first target
            target.first().addClass('full');
            //add target class to the clue next to the original target
            target.next('.clue').addClass('target');
            //remove target class from first clue with target class
            target.first('.clue').removeClass('target');
        }
    });

    $('.clue').click(function(){
        var $this = $(this);
        //defines the content of the clicked clue
        var letters = $this.html();
        if(letters != ''){
            //append content of clue to first anagram with empty class
            $('.anagram-letter.empty').first().append(letters);
            $this.html('');
            //remove empty class from that anagram
            $('.anagram-letter.empty').first().removeClass('empty');
            $('.clue').removeClass('target');
            $this.addClass('target');
            $this.removeClass('full');
        }
    });
});

Answer 2

You can try api.jquery.com/attribute-contains-selector so you can use $(".clue[class*='target']") this will find the space-x which has target css class without looping through all spaces.

Answer 3

I resolved this with the following code:

if ($('.space-5').hasClass('full') && $('.space-4').hasClass('full') && $('.space-3').hasClass('full') && $('.space-2').hasClass('full') && $('.space-1').hasClass('full') == true) {
                    $('.anagram-letter').off('click');        
                }