12

编辑**

在我的文字游戏中，有一个带有 3 个字母单词的网格。

游戏的目的是通过单击侧面的相应字母来拼写单词。

当网格中的某个区域被突出显示时，它会向用户指示要拼写的单词。用户单击网格一侧的字母，它们会移动到突出显示的区域。

目前我有样式来显示单个字母是否正确，但是当一个单词完成时，我需要它来识别它，以便我可以将样式应用于它。

有人可以给我看一些识别正确和错误单词的代码吗？

当它是一个拖放游戏时，我是这样做的......

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


    }
});

这是单击动画功能的代码...

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

我试过这个...

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


            }
    });

还有这个...

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

    });

谢谢！

如果有帮助，这里有一个小提琴http://jsfiddle.net/smilburn/3qaGK/9/

4

2 回答 2

10

为什么不使用带有接受/恢复设置的可拖动/可放置元素，因为您已经在使用 jQuery UI？

这是完成接受/恢复拖放的理论方法：

首先，如果不接受，您需要将可拖动设置为恢复：

$(".drag").draggable({ revert: 'invalid' });

然后，您当然需要定义 droppable 中有效的内容：

$(".drop").droppable({ accept: '.drag' });​

您可以尝试使用选择器来过滤正确的答案，方法是为每个字母设置一个类，(.addClass("b");)然后使用.droppable("option","accept",".b"). 或者使用jQuery UI 中包含的魔法粉末。您可以插入一个函数作为 的值"accept"，它的返回值将定义您接受的有效元素： $(".drop").droppable( { accept: function() { // 在此处添加条件以返回 true 或假 } });​</p>

编辑

对你的点击事件做同样的事情：

$('.drag').on('click', function(e)
{
    e.preventDefault();

    var target     = $('.drop-box.spellword:not(.occupied):first');
    var targetPos  = target.position();
    var currentPos = $(this).offset();
    var b = $(this);

    if(target.length)
    {
        // compare clicked letter with expected letter
        if(b.attr("data-letter") == target.attr("data-letter"))
        {
            b.remove().appendTo('table').css({
            'position' : 'absolute',
            'top' : currentPos.top,
            'left': currentPos.left
            });

            b.animate({
               top  : targetPos.top,
                left : targetPos.left
            }, 'slow', function() {
                b.remove().css({ top: 0, left: 0 }).appendTo(target);
                target.addClass('occupied');
            });
        }
    }
});
于 2012-08-13T16:02:55.680 回答
4

如果我理解这个问题，您正在寻找一种方法来检查通过选择字母创建的单词的有效性，然后将样式应用于该单词。

这是我会做的：

var dict = []; // Create an array with all of the possible words
var word = "";

function createWord(){ // Creates the variable word to be checked against array
  var addToWord = $(this).html(); // Sets the variable addTo Word to the letter selected
  word = word + addToWord; // Adds the selected letter to the current word
};

function checkWord(){
  var i = dict[].length; // Sets incrementor "i" to the length of the array
  while (i){  // While "i" is a positive value
    if (word == dict[i]){ // Checks if the word is equal to the word in that spot of the array
      // If it is, apply the correct styles
    }
    else{ // If it isn't, 
      // Do Nothing
    }
   i = i--; // Decrease i by one, and repeat until the whole array has been checked
  }
};

$('foo bar').click(function(){
  createWord();
  checkWord();
}

祝你好运！希望这可以帮助。

-布赖恩

于 2012-08-18T17:09:50.027 回答