本文将指导你如何在 JavaScript 和 HTML 构建的颜色切换游戏中，预先设置某些单元格为红色，以及如何优化代码结构，使其更加简洁和易于维护。我们将探讨如何使用二维数组来表示游戏初始状态，并利用更高效的事件监听和状态更新方法来简化代码。
初始状态设置
要在游戏开始时将某些单元格设置为红色，最有效的方法是使用一个二维数组来表示游戏面板的初始状态。数组中的每个元素代表一个单元格，可以使用 0 和 1 分别表示白色和红色。
// 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免费学习笔记（深入）”；
代码优化
原始代码中存在大量的重复代码，每个单元格都需要一个单独的函数来处理点击事件。这不仅增加了代码的复杂性，也降低了代码的可维护性。我们可以通过以下方式来优化代码：
使用事件委托： 将点击事件监听器添加到表格元素上，而不是每个单元格上。这样可以减少事件监听器的数量，提高性能。使用数据属性： 在 HTML 元素中使用 data-* 属性来存储单元格的坐标信息。这样可以避免使用 id 属性，使代码更加灵活。使用 CSS 类名： 使用 CSS 类名来切换单元格的颜色，而不是直接修改 style 属性。这样可以使代码更加清晰，也方便进行样式管理。简化颜色切换逻辑： 使用 classList.toggle() 方法来切换单元格的颜色，而不是使用 if…else 语句。
以下是优化后的代码示例：
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 中硬编码。这样可以方便地修改表格的大小，而无需修改 HTML 代码。
const table = document.querySelector("table");cellsToStartRed.forEach((row, rowNo) => { table.innerHTML += `
这段代码首先获取到表格元素，然后遍历 cellsToStartRed 数组，动态生成表格的行和单元格。
总结
通过使用二维数组来表示游戏面板的初始状态，以及使用事件委托、数据属性、CSS 类名和简化的颜色切换逻辑，我们可以大大简化代码，提高代码的可维护性。同时，动态生成表格可以使代码更加灵活，方便修改表格的大小。
注意事项：
确保 HTML 结构中包含必要的元素，例如表格、行和单元格。确保 CSS 样式表中包含必要的样式，例如单元格的背景颜色。在测试代码时，可以使用浏览器的开发者工具来调试 JavaScript 代码。注意处理边界情况，例如当用户点击表格边缘的单元格时。
通过以上步骤，你就可以创建一个更加简洁、高效和易于维护的 JavaScript 动态颜色切换游戏。
以上就是JavaScript 动态颜色切换游戏：初始状态设置与代码优化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1519587.html
微信扫一扫 
支付宝扫一扫 
