Question

我想为类似于tic tac toe的游戏创建一个网格，除非你想要连续5个而不是3个，这意味着我需要超过9个单元格用于网格。我需要一个类似图纸的网格，网格的每个单元格都是可点击的，并在点击时变成某种颜色。每个单元格都需要有一个单独的标记，因为稍后当程序需要确定玩家是否连续达到五个时，我将需要它。例如，第一行的第二个单元格是单元格[2] [1]。

到目前为止我所拥有的：

for (var x=0;x <gridWidth; x=x+10){  //each cell is 10px by 10px
    for (var y=0; y<gridHeight; y=y+10){
        return Cell[x][y];   //I am not sure how to print out a cell at each of these 'coordinates'.
    };
};

Answer 1

编辑：我修改了下面的代码，以动态生成网格。

注意：请注意，此答案使用jQuery。

首先，您可以创建一个生成网格的函数。它将按照您尝试的方式循环行和列，但它将返回包含正确HTML代码的字符串。您将使用jQuery将HTML字符串作为HTML元素附加到文档中。

顺便说一句，你不应该尝试使用javascript来设置单元格的大小，因为你有CSS。

当用户单击一个单元格时，您可以使用jQuery .index()来检索单元格的索引，并从那里检索它所属的行和列。

最后，要更改单元格的颜色，只需编辑其background-color属性。

这样的事情可以帮助你开始：

function generateGrid( rows, cols ) {
    var grid = "<table>";
    for ( row = 1; row <= rows; row++ ) {
        grid += "<tr>"; 
        for ( col = 1; col <= cols; col++ ) {      
            grid += "<td></td>";
        }
        grid += "</tr>"; 
    }
    return grid;
}

$( "#tableContainer" ).append( generateGrid( 5, 5) );

$( "td" ).click(function() {
    var index = $( "td" ).index( this );
    var row = Math.floor( ( index ) / 5) + 1;
    var col = ( index % 5 ) + 1;
    $( "span" ).text( "That was row " + row + " and col " + col );
    $( this ).css( 'background-color', 'red' );
});

td {
    border: 1px solid;
    width: 50px;
    height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span>Select a cell!</span>
<div id="tableContainer"></div>

在js / html / css中创建可单击的单元格网格

1 个答案: