javascript - 使用 html/js 创建可点击网格的最有效方法是什么？

Question

我正在尝试制作一款类似扫雷游戏的游戏，我可以通过网络与我的爸爸分享。我将如何使用循环来创建该网格并使每个索引位于我可以操作的某个坐标处？感谢大家。

Answer 1

您可以使用多维数组(数组的数组)。

var gridWidth = 10;
var gridHeight = 10;
var grid = [];
for(var y = 0; y < gridHeight; y++)
{
    grid.push([]);
    for(var x = 0; x < gridWidth; x++)
    {
        grid[y].push(0);
    }
}

您现在有一个 10x10 网格，可以通过 grid[x][y] 访问它

在页面上以 HTML 形式表示此内容取决于您所使用的框架。如果您想使用原始 JavaScript 来完成此操作，您也许可以输出一个表格。

document.write('<table>');
var gridWidth = 10;
var gridHeight = 10;
var grid = [];
for(var y = 0; y < gridHeight; y++)
{
    document.write('<tr>');
    grid.push([]);
    for(var x = 0; x < gridWidth; x++)
    {
        document.write('<td onclick="alert(\'clicked\');">');
        grid[y].push(0);
        document.write('</td>');
    }
    document.write('</tr>');
}
document.write('</table>');