本文将指导你如何使用JavaScript和HTML创建一个简单的互动表格游戏，该游戏允许用户通过点击单元格来切换其颜色以及周围单元格的颜色。我们将讨论如何初始化特定单元格的颜色，并提供代码优化建议，以简化实现并提高可维护性，最终实现动态调整表格大小的功能。
初始化单元格颜色
在游戏开始时，我们可能需要将某些单元格预设为红色。一种有效的方法是使用二维数组来表示初始状态。数组中的每个元素代表一个单元格，例如，1 代表红色，0 代表白色。
// 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],];
然后，在页面加载后，遍历这个数组，根据数组的值设置对应单元格的背景颜色。
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);
这段代码首先获取表格中所有的单元格，然后遍历 cellsToStartRed 数组。如果数组中某个元素的值为 1，则将对应的单元格的背景颜色设置为红色。
立即学习“Java免费学习笔记（深入）”；
简化颜色切换逻辑
原始代码中，为每个单元格都定义了一个单独的函数来处理点击事件，这导致大量的重复代码。我们可以使用事件监听器和一些逻辑来简化这个过程。
首先，为每个单元格添加一个点击事件监听器：
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 < cellsToStartRed.length - 1) document.querySelector(`tr[data-row="${rowNo + 1}"] td[data-cell="${cellNo}"]`).classList.toggle("bg-red"); checkIfWon(); });});
这段代码为每个单元格添加了一个点击事件监听器。当单元格被点击时，它会切换单元格本身的颜色，以及周围单元格的颜色。
动态生成表格
为了使游戏更具灵活性，我们可以动态地生成表格。这意味着我们可以根据需要更改表格的大小，而无需修改 HTML 代码。
const table = document.querySelector("table");cellsToStartRed.forEach((row, rowNo) => { table.innerHTML += `
这段代码首先清空表格的内容，然后遍历 cellsToStartRed 数组，动态地生成表格的行和单元格。
检查游戏是否胜利
为了让游戏更有趣，我们可以添加一个检查游戏是否胜利的函数。这个函数会检查所有的单元格是否都变成了红色。
function checkIfWon() { if ([...cells].every((cell) => cell.classList.contains("bg-red"))) { document.querySelector("#youWon").classList.remove("invisible"); }}
这段代码首先获取表格中所有的单元格，然后使用 every 方法检查是否所有的单元格都包含 bg-red 类。如果所有的单元格都包含 bg-red 类，则显示 “You won!” 的消息。
总结
通过使用二维数组来表示初始状态，使用事件监听器来简化颜色切换逻辑，以及动态地生成表格，我们可以创建一个更灵活、更可维护的互动表格游戏。此外，添加检查游戏是否胜利的函数，可以使游戏更有趣。
以上就是JavaScript实现动态颜色切换的互动表格游戏的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1519589.html
微信扫一扫 
支付宝扫一扫 
