本文将介绍如何使用 JavaScript 和 html 创建一个简单的互动表格游戏，其中点击单元格会切换其周围单元格的颜色。我们将讨论如何初始化指定单元格的颜色，并提供一种更简洁的代码实现方案，使代码更易于维护和扩展，同时增加动态生成表格大小的功能。
初始化指定单元格颜色
在游戏开始时，我们可能需要将某些单元格预先设置为红色。一种简单的方法是在 window.onload 事件中使用 JavaScript 来修改这些单元格的背景颜色。
window.onload = function() { document.getElementById("zero0").style.backgroundColor = "red"; document.getElementById("one3").style.backgroundColor = "red"; document.getElementById("three2").style.backgroundColor = "red"; }
这段代码会在页面加载完成后，将 ID 为 “zero0″、”one3” 和 “three2” 的单元格的背景颜色设置为红色。
代码优化与简化
原始代码中存在大量的重复代码，每个单元格都需要一个单独的函数来处理点击事件。这使得代码难以维护和扩展。我们可以通过以下方法来简化代码：
立即学习“Java免费学习笔记（深入）”；
- 使用数据属性 (data attributes): 将单元格的行号和列号存储在 data-row 和 data-cell 属性中，这样我们就可以在 JavaScript 中轻松地获取这些信息。
- 事件委托 (Event Delegation): 将点击事件监听器添加到表格本身，而不是每个单元格。这样可以减少事件监听器的数量，提高性能。
- 使用 css 类 (CSS Classes): 使用 CSS 类来控制单元格的颜色，而不是直接修改 style 属性。这样可以更好地分离 HTML、CSS 和 JavaScript。
以下是一个优化的代码示例：
<body> <div class="container"> <h2>Table game</h2> <p>Try to color all of the cells to <span onclick="newGame(simpleWin)">red</span></p> <div id="youWon" class="invisible"> <h2>You won!</h2> <button onclick="newGame(cellsToStartRed)">New Game</button> </div> <table> <tr data-row="0"> <td data-cell="0" /> <td data-cell="1" /> <td data-cell="2" /> <td data-cell="3" /> <td data-cell="4" /> </tr> <tr data-row="1"> <td data-cell="0" /> <td data-cell="1" /> <td data-cell="2" /> <td data-cell="3" /> <td data-cell="4" /> </tr> <tr data-row="2"> <td data-cell="0" /> <td data-cell="1" /> <td data-cell="2" /> <td data-cell="3" /> <td data-cell="4" /> </tr> <tr data-row="3"> <td data-cell="0" /> <td data-cell="1" /> <td data-cell="2" /> <td data-cell="3" /> <td data-cell="4" /> </tr> <tr data-row="4"> <td data-cell="0" /> <td data-cell="1" /> <td data-cell="2" /> <td data-cell="3" /> <td data-cell="4" /> </tr> </table> </div> </body>
// 0=white, 1=red const cellsToStartRed = [ [1, 0, 0, 0, 0], [0, 0, 0, 1, 0], [0, 0, 0, 0, 0], [0, 0, 1, 0, 0], [0, 0, 0, 0, 0], ]; const simpleWin = [ [1, 1, 1, 1, 1], [1, 1, 0, 1, 1], [1, 0, 0, 0, 1], [1, 1, 0, 1, 1], [1, 1, 1, 1, 1], ]; function newGame(startConfig) { document.querySelector("#youWon").classlist.add("invisible"); startConfig.forEach((row, rowNo) => { row.forEach((cell, cellNo) => { // clear table document.querySelector(`tr[data-row="${rowNo}"] td[data-cell="${cellNo}"]`).classList.remove("bg-red"); if (cell === 1) document.querySelector(`tr[data-row="${rowNo}"] td[data-cell="${cellNo}"]`).classList.add("bg-red"); }); }); } newGame(cellsToStartRed); const cells = document.querySelectorAll("td[data-cell]"); cells.forEach((cell) => { cell.addEventListener("click", () => { const rowNo = parseInt(cell.parentnode.getAttribute("data-row")); const cellNo = parseInt(cell.getAttribute("data-cell")); cell.classList.toggle("bg-red"); //left if (cellNo > 0) document.querySelector(`tr[data-row="${rowNo}"] td[data-cell="${cellNo - 1}"]`).classList.toggle("bg-red"); //right if (cellNo < cellsToStartRed[rowNo].length - 1) document.querySelector(`tr[data-row="${rowNo}"] td[data-cell="${cellNo + 1}"]`).classList.toggle("bg-red"); //top if (rowNo > 0) document.querySelector(`tr[data-row="${rowNo - 1}"] td[data-cell="${cellNo}"]`).classList.toggle("bg-red"); //bottom if (rowNo < cellsToStartRed.length - 1) document.querySelector(`tr[data-row="${rowNo + 1}"] td[data-cell="${cellNo}"]`).classList.toggle("bg-red"); checkIfWon(); }); }); function checkIfWon() { if ([...cells].every((cell) => cell.classList.contains("bg-red"))) { document.querySelector("#youWon").classList.remove("invisible"); } }
body { text-align: center; display: flex; justify-content: center; } table { /*border-radius: 10px;*/ margin-top: 60px; border: 1px solid; background-color: lightcyan; box-shadow: 5px 5px 40px royalblue; } td { border: 1px solid; width: 40px; height: 40px; } p { font-weight: bold; font-size: 17px; } p span { color: red; } td { background-color: white; } .bg-red { background-color: red; } .invisible { display: none; }
在这个示例中，我们使用 bg-red 类来设置单元格的背景颜色，并使用 invisible 类来控制 “You won!” 消息的显示。
动态生成表格
为了使游戏更具灵活性，我们可以动态地生成表格。这意味着我们可以根据需要更改表格的大小，而无需修改 HTML 代码。
const table = document.querySelector("table"); cellsToStartRed.forEach((row, rowNo) => { table.innerHTML += `<tr data-row="${rowNo}"></tr>`; row.forEach((cell, cellNo) => { document.querySelector(`tr[data-row="${rowNo}"]`).innerHTML += `<td data-cell="${cellNo}"></td>`; if (cell === 1) document.querySelector(`tr[data-row="${rowNo}"] td[data-cell="${cellNo}"]`).classList.add("bg-red"); }); });
这段代码会根据 cellsToStartRed 数组的大小动态地创建表格。
总结
通过使用数据属性、事件委托和 CSS 类，我们可以极大地简化 JavaScript 代码，使其更易于维护和扩展。此外，动态生成表格可以使游戏更具灵活性。希望本教程对您有所帮助！
评论（已关闭）
评论已关闭