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 を既に使用しているので、 accept/revert 設定でドラッグ可能/ドロップ可能な要素を使用しないのはなぜですか?

以下は、受け入れ/元に戻すドラッグ アンド ドロップを実現するための理論的な方法です。

まず、受け入れられない場合は元に戻すようにドラッグ可能を設定する必要があります。

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

次に、もちろん、 droppable で有効なものを定義する必要があります:

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

各文字のクラスを設定して、セレクターを使用して正しい答えをフィルタリングし、(.addClass("b");)後でこのセレクターを動的に変更してみて.droppable("option","accept",".b")ください。または、jQuery UI に含まれている魔法の粉を使用します。の値として関数を挿入できます"accept"。その戻り値は、有効な要素として受け入れるものを定義します: $(".drop").droppable( { accept: function() { // ここに条件を追加して true を返すかfalse } }); </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 に答える