蛇游戏开发求助：JS逻辑转HTML可视化及食物随机放置

1. 基础HTML结构 #

先搭建棋盘容器，后续用JS动态生成格子：

<div id="game-board"></div>

2. CSS样式定义 #

通过类区分蛇、食物和普通格子，核心靠类切换实现视觉变化：

#game-board {
  display: grid;
  grid-template-columns: repeat(20, 20px); /* 20列，每列20px */
  gap: 1px;
  background-color: #eee;
  padding: 1px;
}

.grid-cell {
  width: 20px;
  height: 20px;
  background-color: #fff;
}

.grid-cell.snake {
  background-color: #2ecc71; /* 蛇身颜色 */
}

.grid-cell.food {
  background-color: #e74c3c; /* 食物颜色 */
}

3. JavaScript核心逻辑 #

初始化棋盘与游戏状态

const boardSize = 20; // 20x20棋盘
const gameBoard = document.getElementById('game-board');
let snake = [0, 1, 2]; // 初始蛇占据前3个格子（索引从左到右、从上到下）
let foodPosition = getRandomFoodPosition();
let direction = 1; // 初始向右移动（每次索引+1）

// 生成棋盘格子
for (let i = 0; i < boardSize * boardSize; i++) {
  const cell = document.createElement('div');
  cell.classList.add('grid-cell');
  cell.dataset.index = i; // 给每个格子标记索引，方便定位
  gameBoard.appendChild(cell);
}

随机生成食物位置

确保食物不会出现在蛇身上：

function getRandomFoodPosition() {
  let position;
  do {
    position = Math.floor(Math.random() * boardSize * boardSize);
  } while (snake.includes(position));
  return position;
}

实现Tick函数（核心类切换逻辑）

用setInterval定时触发tick，每次更新蛇的位置并同步DOM类：

function tick() {
  // 1. 计算蛇头新位置（根据移动方向）
  const headPosition = snake[snake.length - 1] + direction;
  // 可扩展：这里添加边界碰撞、自撞的判断逻辑

  // 2. 更新蛇的位置数组
  snake.push(headPosition);
  // 如果吃到食物，不删除尾部；否则移除尾部维持长度
  if (headPosition === foodPosition) {
    foodPosition = getRandomFoodPosition();
  } else {
    snake.shift();
  }

  // 3. 重置所有格子的状态类，重新标记蛇和食物
  document.querySelectorAll('.grid-cell').forEach(cell => {
    cell.classList.remove('snake', 'food');
  });

  // 给蛇身位置添加.snake类
  snake.forEach(pos => {
    document.querySelector(`.grid-cell[data-index="${pos}"]`).classList.add('snake');
  });

  // 给食物位置添加.food类
  document.querySelector(`.grid-cell[data-index="${foodPosition}"]`).classList.add('food');
}

// 启动游戏，每200ms执行一次tick
setInterval(tick, 200);

关键说明 #

• 核心逻辑是每次tick先清空所有格子的状态类，再根据当前蛇和食物的位置重新添加对应类，避免类残留导致的视觉错误。
• 方向控制可扩展：监听键盘事件修改direction变量（比如向上是-boardSize，向下是+boardSize，向左是-1）。
• 碰撞检测可在tick开头补充：判断headPosition是否超出棋盘范围，或者是否存在于蛇身体数组中。

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