javascript - 允许用户第二次尝试获得正确答案

Question

在我的拖放式拼写游戏中，我将其设计为当将正确的字母拖到相应的单词上时，应用一种样式 (wordglow2) 使其消失并显示背后的图片 - 这就是游戏的目的.问题在于，当用户输入错误的单词时，他/她不会再尝试输入该单词，因此它停留在网格中，这意味着游戏无法完成。将样式应用于错误的单词(wordglow)后，我需要再次尝试它，有人可以帮忙吗？

$(".drop").droppable({
drop: function(event, ui) {
    word = $(this).data('word');

    guesses[word].push($(ui.draggable).attr('data-letter'));
    console.log($(event));
    console.log($(ui.draggable).text());

    console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());


    if ($(this).text() == $(ui.draggable).text().trim()) {

        $(this).addClass('wordglow3');
    } else {
        $(this).addClass('wordglow');
    }
    console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());


    console.log(guesses);

    if (guesses[word].length == 3) {
        if (guesses[word].join('') == word) {
            $('td[data-word=' + word + ']').addClass("wordglow2");

        } else {
            $('td[data-word=' + word + ']').addClass("wordglow4");

        }
    }


},

activate: function(event, ui) {
    word = $(this).data('word');

    // try to remove the class
    $('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3');
}


});

Answer 1

目前你只是填充一个数组来检查单词是否正确。但这还不够。假设我想解决“top”问题，但我很懒，所以从“p”开始，因为我的鼠标指针靠近这个特定的字母。然后该数组将由单个字母 ['p'] 组成，并且该词不再可解。

而是检查您当前正在操作的哪个字母，将字母保存在正确的位置并使用固定为 3 的数组而不是 Array.push。

但是，如果您不希望用户提供错误的订单，您可以简单地删除旧的猜测(参见 splice):

if (guesses[word].length == 3) {
    if (guesses[word].join('') == word) {
        $('td[data-word=' + word + ']').addClass("wordglow2");

    } else {
        $('td[data-word=' + word + ']').addClass("wordglow4");
        guesses[word].splice(0,guesses[word].length);
    }
}