为更大的单词准备网格

Question

在我的拖放式文字游戏中，设置了6x6（36格）的网格大小。它由6个3字母单词和18个空格组成。

现在，由于网格是每行2个单词，当我在列表中添加一个长度超过3个字母的单词时，它会在该行上存在另一个单词时重叠网格。

我需要一些脚本，可以给单词大于3个字母自己的行，以便网格不会重叠。

有人可以给我一些建议吗？

下面是创建从HTML数组列表表中的脚本...

var listOfWords = []; 
var rndWord = []; 
var ul = document.getElementById("wordlist"); 

var i; 
for (i = 0; i < ul.children.length; ++i) { 

    listOfWords.push({ 
     "name": ul.children[i].getAttribute("data-word"), 
     "pic": ul.children[i].getAttribute("data-pic"), 
     "audio": ul.children[i].getAttribute("data-audio") 
    }); 

    console.log(listOfWords); 
    } 

    console.log(listOfWords); 

var chosenWords = []; 
var cpy_list = listOfWords.slice(); 

for (var x = 0; x < 6; x++) { 
    var rand = Math.floor(Math.random() * (cpy_list.length)); 
    console.log('push ' + cpy_list[rand].name); 
    chosenWords.push(cpy_list[rand].name); 
    cpy_list.splice(rand, 1); 
    console.log(cpy_list); 
     if (chosenWords.length < 12) { 
     console.log('make a blank'); 
     chosenWords.push(' '); 
    } 
} 

console.log(chosenWords); 
var shuffledWords = []; 
shuffledWords = chosenWords.sort(function() { 
    return 0.5 - Math.random() 
}); 

var guesses = {}; 
console.log(shuffledWords); 
var tbl = document.createElement('table'); 
tbl.className = 'tablestyle'; 
var wordsPerRow = 2; 

for (var i = 0; i < shuffledWords.length - 1; i += wordsPerRow) { 

    var row = document.createElement('tr'); 
    console.log(shuffledWords); 
    for (var j = i; j < i + wordsPerRow; ++j) { 
     var word = shuffledWords[j]; 
     console.log(j); 
     console.log(word); 
     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]; 

      row.appendChild(cell); 
     } 
    } 
    tbl.appendChild(row); 
} 
document.body.appendChild(tbl); 

这里是在HTML中的单词列表...

<ul style="display:none;" id="wordlist"> 

    <li data-word="mum" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/5/e/7/f/1195445022768793934Gerald_G_Lady_Face_Cartoon_1.svg.med.png"></li> 

    <li data-word="cat" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/c/9/9/5/119543969236915703Gerald_G_Cartoon_Cat_Face.svg.med.png"></li> 

    <li data-word="dog" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/e/9/4/1/1195440435939167766Gerald_G_Dog_Face_Cartoon_-_World_Label_1.svg.med.png"></li> 

    <li data-word="bug" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/4/b/4/2/1216180545881311858laurent_scarabe.svg.med.png"></li> 

    <li data-word="rat" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/C/j/X/e/k/D/mouse-md.png"></li> 

    <li data-word="dad" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/H/I/n/C/p/Z/bald-man-face-with-a-mustache-md.png"></li> 

    <li data-word="cop" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/1/4/c/5/1194984609285255522police_man_ganson.svg.med.png"></li> 

    <li data-word="pig" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/6/c/c/c/13286504431247546768Simple%20Pig%20Cartoon.svg.med.png"></li> 

    <li data-word="sun" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/3/b/1/2/11971486551534036964ivak_Decorative_Sun.svg.med.png"></li> 

    <li data-word="kid" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/d/9/9/f/11954449391541537067Gerald_G_Girl_Face_Cartoon.svg.med.png"></li> 

Answer 1

试试这个，让我知道它是否有帮助...

var listOfWords = []; 
var rndWord = []; 
var counter = 0; 
var ul = document.getElementById("wordlist"); 
var i; 

for (i = 0; i < ul.children.length; ++i) { 

    listOfWords.push({ 
     "name": ul.children[i].getAttribute("data-word"), 
     "pic": ul.children[i].getAttribute("data-pic"), 
     "audio": ul.children[i].getAttribute("data-audio") 
    }); 
} 

var chosenWords = []; 
var copylist = listOfWords.slice(); 

for (var x = 0; x < 6; x++) { 
    var rand = Math.floor(Math.random() * (copylist.length)); 
    chosenWords.push(copylist[rand].name); 
    copylist.splice(rand, 1); 
    if (chosenWords.length < 12) { 
     chosenWords.push(' '); 
    } 

} 

var shuffledWords = []; 
shuffledWords = chosenWords.sort(function() { 
    return 0.5 - Math.random() 
}); 

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

for (var i = 0; i < shuffledWords.length - 1; 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-box').attr('data-word', word).attr('data-letter', word[k]); 
      cell.textContent = word[k]; 

      row.appendChild(cell); 
     } 
    } 

    tbl.appendChild(row); 
} 

$(".container").append(tbl);