CSS网格棋盘格配色异常求助：蛇与食物区域显示错乱

我用CSS Grid实现了贪吃蛇游戏棋盘，想要做棋盘格交替配色效果。已经写好对应的HTML/CSS代码，用JS的draw函数生成棋盘格，但蛇和食物所在区域的棋盘格显示错乱，怀疑是appendChild(tile)导致的，附上代码寻求帮助。

更新：已经生成类似棋盘格的效果，但蛇与食物区域依旧显示错乱，附上绘制棋盘格的JS代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake</title>
    <style>
        body {
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            background-color: #578a34
        }
        #game-board {
            background-color: #aad751;
            width: 100vmin;
            height: 100vmin;
            display: grid;
            grid-template-rows: repeat(21, 1fr);
            grid-template-columns: repeat(21, 1fr);
        }
        .dark-tile {
            background-color: #a2d149;
        }
        .light-tile {
            background-color: #aad751;
        }
        .snake {
            background-color: #4e7cf6;
        }
        .food {
            background-color: #e7471d;
        }
    </style>
    <script src="game.js" defer type="module"></script>
</head>
<body>
    <div id="game-board">
        <div style="grid-row-start: 11; grid-column-start: 11;" class="snake"></div>
        <div style="grid-row-start: 7; grid-column-start: 14;" class="food"></div>
    </div>
</body>
</html>

export function draw(gameBoard) {
    for (let j = 0; j < GRID_SIZE+1; j++){
        for (let i = 0; i < GRID_SIZE+1; i++){
            if (Math.abs(i % 2) == 1){
                const tile = document.createElement('div')
                tile.classList.add('dark-tile')
                gameBoard.appendChild(tile)
            } else {
                const tile = document.createElement('div')
                tile.classList.add('light-tile')
                gameBoard.appendChild(tile)
            }
        }
    }
}

核心问题 #

1. 棋盘格交替逻辑错误：当前仅根据列索引i判断颜色，未结合行索引j，导致每一行的颜色完全一致，无法形成交错棋盘格。
2. 元素顺序干扰Grid布局：蛇和食物提前放在game-board中，后续append的棋盘格会排在它们之后，Grid会按元素顺序分配网格位置，导致蛇和食物被挤到非指定的网格区域。

修正后的JS代码 #

const GRID_SIZE = 21; // 确保该变量已全局定义或传入函数

export function draw(gameBoard) {
    // 先清空棋盘，避免重复绘制导致的元素堆积
    gameBoard.innerHTML = '';

    // 生成交错棋盘格
    for (let j = 0; j < GRID_SIZE; j++) {
        for (let i = 0; i < GRID_SIZE; i++) {
            const tile = document.createElement('div');
            // 通过行+列的和判断奇偶，实现相邻行颜色错开的棋盘格
            if ((i + j) % 2 === 1) {
                tile.classList.add('dark-tile');
            } else {
                tile.classList.add('light-tile');
            }
            gameBoard.appendChild(tile);
        }
    }

    // 重新添加蛇元素到指定位置
    const snake = document.createElement('div');
    snake.style.gridRowStart = 11;
    snake.style.gridColumnStart = 11;
    snake.classList.add('snake');
    gameBoard.appendChild(snake);

    // 重新添加食物元素到指定位置
    const food = document.createElement('div');
    food.style.gridRowStart = 7;
    food.style.gridColumnStart = 14;
    food.classList.add('food');
    gameBoard.appendChild(food);
}

额外优化建议 #

• 把蛇和食物的位置数据单独存储（比如用对象snakePos = {x:11, y:11}），避免硬编码，方便后续动态更新位置。
• 若不想用JS生成棋盘格，可尝试纯CSS实现（需注意21列网格的奇偶行错位问题）：

#game-board > div:nth-child(42n + 1):nth-child(-n + 421) {
    background-color: #a2d149;
}
/* 注：该CSS逻辑需根据网格行数计算，JS生成方式更灵活易维护 */

内容的提问来源于stack exchange，提问作者User