前端实现贪吃蛇小游戏

        大家都玩过贪吃蛇小游戏，控制一条蛇去吃食物，然后蛇在吃到食物后会变大。本篇博客将会实现贪吃蛇小游戏的功能。

1.实现效果

2.整体布局

/**
 * 游戏区域样式
 */
const gameBoardStyle = {
    gridTemplateColumns: `repeat(${width}, 1fr)`,
    gridTemplateRows: `repeat(${height}, 1fr)`,
    display: 'grid',
    border: '1px solid #000',
    width: '500px',
    height: '500px',
    backgroundColor: '#488cfa'
};

/**
 * 小蛇样式
 */
const snakeBodyStyle = (segment) => ({
    gridRowStart: segment.y,
    gridColumnStart: segment.x,
    backgroundColor: 'green'
})

/**
 * 食物样式
 */
const foodStyle = {
    gridRowStart: food.current.y,
    gridColumnStart: food.current.x,
    backgroundColor: 'red'
}

<div className={'snake-game'}>
    <div className={'game-board'} style={gameBoardStyle}>
       {/*蛇身体*/}
       {snake.map((segment, idx) =>
          <div key={idx} className={'snake-body'} style={snakeBodyStyle(segment)}/>
          )
       }
       {/*食物*/}
       <div className={'food'} style={foodStyle}></div>
     </div>

</div>
        

        采用grid 布局，整个游戏区域划分为width*height个小块，小蛇身体的每一部分对应一小块，食物对应一小块。

3.技术实现

a.数据结构

        小蛇的数据结构是个坐标数组，snake[0]是蛇头，snake[snake.length-1]是蛇尾巴。snake[i].x表示第i块位置的x坐标，snake[i].y表示第i块位置的y坐标。

        食物的数据结构是坐标。

        游戏区域是一个width*height的虚拟空间。

b.场景

一、小蛇如何移动，以及移动方式

 1. 通过设置监听键盘的上下左右事件，来触发小蛇的移动。

 2. 通过定时器实现小蛇沿着当前方向移动

         

// 移动方向，上下左右
const directions = [[0, -1], [0, 1], [-1, 0], [1, 0]];
// 当前移动方向
const [currentDirection, setCurrentDirection] = useState(3);

// 小蛇移动
function move() {
    const direction = directions[currentDirection];
    // 更新上一次蛇尾巴
    lastTail.current = {x: snake[snake.length - 1].x, y: snake[snake.length - 1].y};
    const head = snake[0];
    // 移动小蛇，将数组后移动
    for (let i = snake.length - 1; i > 0; i--) {
        snake[i].x = snake[i - 1].x;
        snake[i].y = snake[i - 1].y;
    }
    // 更新蛇头
    head.x +