Question

我想在填充有随机字母的表格内放置单词数组。

我只是想简单地将单词水平放置，以便孩子们轻松找到它们。

预期输出示例：

o r a n g e a
d h j d k k t
b e e r g h k
w r t u i o p
a f t y u o j

我当前的代码：

  function randomWord() {
        var cols = 5; 
        var rows = 5; 
        var html = ""; 
        var words = ['apple', 'beer'],

        for(var i =0; i <= rows; i++) { 
            html += '<tr>'; 
            for(var h=0; h<= cols; h++) { 
               var characters = 'ABCDEFGHIJKLMNOPQRSTUVXYZ'; 
               var random = parseInt(Math.random()*characters.length);
               var letter = characters.charAt(random); //returning random letter
               html += '<td>' + letter + '</td>'; 
            } 
            html += '</tr>'; 
        }

        document.getElementById('wsBox').innerHTML += html;
    }

HTML

<table>
    <tbody id="wsBox">
    </tbody>
</table>
<button onclick="randomWord()">Click me</button>

Answer 1

一种方法是实施以下算法：

从您的字母表中初始化一个2D随机字符数组，然后输入要隐藏到该2D数组中的单词
随机排列2D数组中的行顺序，这将在整个结果表的行中随机分布单词位置
从2D数组数据构建实际表

在代码中，可以表示为：

function randomWord() {
  var cols = 5;
  var rows = 5;
  var words = ['apple', 'beer', 'cow'];
  var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVXYZ';

  // Array to store all letters for resulting table
  const data = [];
  
  // Populate 2D-array with characters
  for (var i = 0; i <= rows; i++) {

    // Array to store letters for current row      
    const row = [];

    // Populate this row with random letters
    for (var h = 0; h <= cols; h++) {
      const letterIdx = Math.floor(Math.random() * alphabet.length);
      const letter = alphabet[letterIdx];
      row.push(letter);
    }

    // While there are words to be read, insert those
    if (words.length > 0) {
    
      // Current word to insert
      const word = words.pop();          
      // If there's space to horizontally offset the word, then 
      // caluclate a random offset. Add 1 because loop range is 
      // 0 < i <= col
      const offsetIdx = Math.floor((1 + cols - word.length) * Math.random());
      
      for (let i = 0; i < word.length; i++) {          
        if(i + offsetIdx < cols) {              
          // Write each letter of the word into the 2D-array
          row[i + offsetIdx] = word[i];
        }
      }
    }

    data.push(row);
  }

  // Randomise the order of rows in the 2D-array
  data.sort(() => Math.random() - 0.5);

  const table = document.getElementById('wsBox');
  
  // Clear the tablet
  table.innerHTML = '';
  
  // Iterate both dimensions of the table and build table from 2D-array
  data.forEach((rowData, i) => {
    const row = table.insertRow(i);

    rowData.forEach((cellData, j) => {
      const cell = row.insertCell(j);
      cell.innerText = cellData;
    })
  });
}

<table>
  <tbody id="wsBox">
  </tbody>
</table>
<button onclick="randomWord()">Click me</button>

JavaScript：如何生成随机字母表，其中随机包含所有藏经字？

1 个答案: