本文将介绍如何使用 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。
以下是一个优化的代码示例：
Table game
Try to color all of the cells to red
You won!
// 0=white, 1=redconst 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 0) document.querySelector(`tr[data-row="${rowNo - 1}"] td[data-cell="${cellNo}"]`).classList.toggle("bg-red"); //bottom if (rowNo 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 += `
这段代码会根据 cellsToStartRed 数组的大小动态地创建表格。
总结
通过使用数据属性、事件委托和 CSS 类，我们可以极大地简化 JavaScript 代码，使其更易于维护和扩展。此外，动态生成表格可以使游戏更具灵活性。希望本教程对您有所帮助！
以上就是JavaScript 实现动态颜色切换的互动表格游戏的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/75091.html
微信扫一扫 
支付宝扫一扫 
