在js/html/css中製作單元格的可點擊網格

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

編輯：我已經修改了代碼婁dinamically產生的網格。

---

注意：請注意，這個答案用了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>