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

时间:2016-04-23 01:40:57

标签: javascript html grid click minesweeper

我正试图建立一个扫雷 - 我可以通过网络与爸爸分享的游戏。我如何使用循环创建该网格并使每个索引处于我可以操作的某个坐标?感谢大家。

2 个答案:

答案 0 :(得分:3)

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

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网格,您可以通过网格[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>');

答案 1 :(得分:1)

这将为您提供一些点击事件,报告列和行。

的CSS:

SFSafariViewController

HTML:

td {
    border: black solid 1px;
}

的javascript:

<table class="table"></table>