React蛇形游戏：玩家位置动态更新与蛇身跳转实现问询

1. 状态重构（替代棋盘数组存player布尔值） #

放弃给每个棋盘方块对象存储player布尔值的方案，改为直接维护玩家当前位置和当前回合玩家状态，大幅简化状态更新逻辑：

import { useState } from 'react';

const SnakeGame = () => {
  // 玩家初始位置（棋盘索引0-99，对应100个方块）
  const [player1Pos, setPlayer1Pos] = useState(0);
  const [player2Pos, setPlayer2Pos] = useState(0);
  // 当前回合玩家标记
  const [currentPlayer, setCurrentPlayer] = useState('player1');
  // 蛇头→蛇尾的位置映射表，提前定义所有蛇的位置关系
  const snakeMap = {
    15: 5,  // 蛇头在索引15（第16个方块），跳转到索引5（第6个方块）
    46: 25,
    62: 19,
    95: 74,
    98: 78
  };
};

2. 掷骰子与玩家移动逻辑 #

实现掷骰子函数，自动处理蛇的跳转规则，完成移动后切换回合：

const rollDice = () => {
  // 生成1-6的随机骰子数
  const diceNum = Math.floor(Math.random() * 6) + 1;
  
  let newPos;
  // 根据当前玩家计算新位置
  if (currentPlayer === 'player1') {
    newPos = player1Pos + diceNum;
    // 限制位置不超过棋盘最大索引99
    newPos = Math.min(newPos, 99);
    // 检查是否踩到蛇头，是则跳转至对应蛇尾
    newPos = snakeMap[newPos] ?? newPos;
    setPlayer1Pos(newPos);
  } else {
    newPos = player2Pos + diceNum;
    newPos = Math.min(newPos, 99);
    newPos = snakeMap[newPos] ?? newPos;
    setPlayer2Pos(newPos);
  }

  // 切换回合玩家
  setCurrentPlayer(currentPlayer === 'player1' ? 'player2' : 'player1');
};

3. 棋盘渲染优化 #

直接生成100个方块的索引数组，渲染时动态判断玩家位置，无需维护每个方块的状态：

// 生成棋盘索引数组（0-99）
const boardSquares = Array.from({ length: 100 }, (_, index) => index);

return (
  <div className="board">
    {boardSquares.map((squareIndex) => (
      <Paper key={squareIndex} className="square">
        {/* 渲染玩家1头像 */}
        {squareIndex === player1Pos && <div className="player-avatar">玩家1</div>}
        {/* 渲染玩家2头像 */}
        {squareIndex === player2Pos && <div className="player-avatar">玩家2</div>}
        {/* 可选：渲染蛇头标记 */}
        {Object.keys(snakeMap).includes(String(squareIndex)) && <div className="snake-head">🐍</div>}
      </Paper>
    ))}
    <button onClick={rollDice}>掷骰子（当前玩家：{currentPlayer}）</button>
  </div>
);

核心优势 #

• 性能提升：无需遍历100元素数组修改状态，仅更新单个玩家位置，减少不必要的组件重渲染
• 逻辑清晰：分离棋盘结构、玩家状态、蛇的规则，代码更易维护和调试
• 扩展性强：后续添加梯子跳转、获胜判断等功能时，只需扩展映射表或添加简单的状态判断

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