2

ドラッグ アンド ドロップのワード ゲームを作成しています。スクリプトのこの部分では、 listOfWordsから抽出された12 のランダムな単語からテーブルを動的に作成します。ユーザーにどの単語を綴るかを示すために完成するまで、指定された CSS でテーブル内の単語を強調表示する必要があります。次に、すべての単語が完了するまで、テーブル内の別の単語をランダムに選択して綴ります....

色々やってみたのですが上手くいきません 助けてください

var listOfWords = ["mat", "cat", "dog", "pit", "pot", "fog", "log", "pan", "can", "man", "pin", "gag", "sat", "pat", "tap", "sap", "tag", "gig", "gap", "nag", "sag", "gas", "pig", "dig", "got", "not", "top", "pop", "god", "mog", "cot", "cop", "cap", "cod", "kid", "kit", "get", "pet", "ten", "net", "pen", "peg", "met", "men", "mum", "run", "mug", "cup", "sun", "mud", "rim", "ram", "rat", "rip", "rag", "rug", "rot", "dad", "sad", "dim", "dip", "did", "mam", "map", "nip", "tin", "tan", "nap", "sit", "tip", "pip", "sip", "had", "him", "his", "hot", "hut", "hop", "hum", "hit", "hat", "has", "hug", "but", "big", "bet", "bad", "bad", "bed", "bud", "beg", "bug", "bun", "bus", "bat", "bit", "fit", "fin", "fun", "fig", "fan", "fat", "lap", "lot", "let", "leg", "lit"];

var guesses = {};

var shuffledWords = listOfWords.slice(0).sort(function() {
return 0.5 - Math.random();
}).slice(0, 12);

var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var wordsPerRow = 2;

for (var i = 0; i < shuffledWords.length; i += wordsPerRow) {
var row = document.createElement('tr');

for (var j = i; j < i + wordsPerRow; ++j) {
    var word = shuffledWords[j];
    guesses[word] = [];

    for (var k = 0; k < word.length; ++k) {
        var cell = document.createElement('td');


        $(cell).addClass('drop').attr('data-word', word);
        cell.textContent = word[k];
        // IF FIREFOX USE cell.textContent = word[j]; INSTEAD
        row.appendChild(cell);
        }
   }
    tbl.appendChild(row);
}

document.body.appendChild(tbl);

スペルに必要な単語に適用したいCSSは次のとおりです...

.spellword {

    -webkit-box-shadow: inset 0px 0px 10px 5px #176BC9;
    box-shadow: inset 0px 0px 10px 5px #176BC9;

}

私はそれがこれらの線に沿ったものになると思います...

var wordToSpell = shuffledWords.slice(0).sort(function() {
return Math.round(Math.random())-0.5
$("wordToSpell").addClass("spellword");
  }).slice(0,1);

私もこれを試しましたが、喜びはありません...

$(document).ready(function() {
 var wordToSpell = [
     <c:forEach var="word" items="${listOfWords}">'${word}', </c:forEach> // JSP : server-side
 ];  
 for (var i = 0; i < wordToSpell.length; i++) {
     $('td').highlight(wordToSpell[i]);
 }
});
4

3 に答える 3

1

jqueryソリューションは次のようになります。

$('#pickNext').click(function(){
    // remove the class from all td's
    $('td').removeClass('spellword');
    // pick a random word
    var rndWord = shuffledWords.sort(function() {  return 0.5 - Math.random(); })[0];
    // apply class to all cells containing a letter from that word
    $('td[data-word="' + rndWord + '"]').addClass('spellword');
});

実例： http： //jsfiddle.net/zWfm3/1/

于 2012-07-23T10:30:07.280 に答える
0

したがって、ツリーを作成するときに、単語であるそれぞれにクラスを追加できます。

$(cell).addClass(word)

それを強調表示するには、次のようにします。

$(word).addClass("spellword");
于 2012-07-23T09:05:10.300 に答える
-1

はい、ボタンの名前を変更して .mousedown を使用することができます。

$('.minibutton').mousedown(function() {
    $('td').removeClass('spellword'); 
    var randomWord = shuffledWords.sort(
        function() {
            return 0.8 - Math.random(); 
         }
     )[0]; 

     $('td[data-word="' + randomWord + '"]').addClass('spellword'); 
});
于 2012-07-23T14:05:04.443 に答える