使用JavaScript

Question

我对JavaScript相当陌生。我有一个8 x 8 HTML表格作为游戏板，该游戏是在JS文件中动态创建的，如下所示：

function drawBoard(rows, cols){
   var grid = document.getElementById("grid");
   grid.className = 'grid';
   for (var r = 0; r < rows; r++){
       var row = grid.appendChild(document.createElement('tr'));
       for (var c = 0; c < cols; c++){
            var cell = row.appendChild(document.createElement('td'));
       }    
    }
    return grid;
}
document.body.appendChild(drawBoard(ROW, COL));

加载页面时，面板成功显示。我需要在5个单元格上随机插入5个关键字。这些单元格不能沿着正方形的外部边界（即不能在第一行或最后一行或列中）。我的JavaScript文件中有5个关键字作为数组。我如何在表中随机选择除第一行或最后一行或最后一列以外的5个单元格，并在每次画板时在这些单元格上插入这些关键字？我尝试了cell.innerHTML =“ keyword”，但最终只在表的每个单元格上插入了一个关键字。在网上进行了彻底的搜索，没有任何运气。谢谢！

Answer 1

首先从可用的64-28个中提取5个随机单元。然后我们有一个6x6的正方形。

[2,3]

Answer 2

// I'm assuming ROW, COL and keywords are declared somewhere in your code
const ROW = 8;
const COL = 8;
const keywords = ['a', 'b', 'c', 'd', 'e'];
// --- your code, no changes
function drawBoard(rows, cols, keywords) {
    var grid = document.getElementById("grid");
    grid.className = 'grid';
    for (var r = 0; r < rows; r++) {
        var row = grid.appendChild(document.createElement('tr'));
        for (var c = 0; c < cols; c++) {
            row.appendChild(document.createElement('td'));
        }
    }
    return grid;
}
// save the table in a variable
const grd = document.body.appendChild(drawBoard(ROW, COL));
//--- NEW CODE STARTS HERE
const shuffle = array => {
    const shuffled = [];
    while (array.length) {
        const index = Math.floor(Math.random() * array.length);
        shuffled.push(array.splice(index, 1).pop());
    }
    return shuffled;
};

const filtered = Array.from(grd.querySelectorAll('td'))
    .filter(({cellIndex, parentElement: {rowIndex}}) => rowIndex && rowIndex < ROW - 1 && cellIndex && cellIndex < COL - 1);

const shuffled = shuffle(filtered);

const sliced = filtered.slice(0, keywords.length);

sliced.forEach((cell, index) => cell.innerHTML = keywords[index]);

<table id="grid"></table>

filtered是不是所有单元格都在边界上

shuffled数组只是使用随机播放功能随机播放的所有已过滤单元格

sliced数组是混洗后的数组中的前n个单元格，其中n是关键字数

然后只需添加关键字

---

解释过滤器功能：

({cellIndex, parentElement: {rowIndex}}) => 
    rowIndex && rowIndex < ROW - 1 && cellIndex && cellIndex < COL - 1;

这是ES6的执行方式

function(cell) {
    var cellIndex = cell.cellIndex;
    var parentElement = cell.parentElement;
    var rowIndex = parentElement.rowIndex;
    return rowIndex && rowIndex < ROW - 1 && cellIndex && cellIndex < COL - 1;
}