使用 jQuery 创建一个字谜游戏

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-contains-selector 以便您可以使用$(".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');        
                }