使用jQuery创建anagram游戏

Question

我正在构建一个字谜游戏，它把字母从一个混乱的字谜字母中移到一排空白的瓷砖上，让玩家知道这个单词有多少字母。我已经实现了基本功能；当您单击任何字母时，它会跳转到第一个可用的空白瓷砖，如果您单击该瓷砖，一旦其中有一个字母，它就会将信发送回混乱列表中的第一个空瓷砖。

我的问题是，如果所有空白块都已填充，用户仍然可以单击混乱的字母，而当前，这会破坏该字母，因为它被发送给具有目标类的div --只有在上面有空白块的情况下才存在。

我已经尝试过几种方法来解决这个问题，我认为最好的方法是获得一个if语句来检查是否有任何线索空间有目标类--如果没有，就不要附加这个字母。我的另一个想法是在点击的字母和空白的瓷砖之间切换html。

这是if语句

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

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

我好像没办法做到这点。如果能提供任何帮助，我将不胜感激，因为我在过去的两天里一直被困在这上面。你可以在这里看到游戏：http://jsfiddle.net/alan1986/V3Lv2/

(您可以看到我尝试过的所有不同的解决方案。)

Answer 1

我意识到这个线程有点旧，但是如果有人正在看这个并且想要一个稍微精致一些的版本，请看这里：

$(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

您可以尝试api.jquery.com/attribute-收集器，这样您就可以使用$(".clue[class*='target']")，这样就可以找到具有目标css类而不遍历所有空格的space-x。

Answer 3

我用以下代码解决了这个问题：

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