前端实现贪吃蛇功能

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

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 += direction[0];head.y += direction[1];// 触发渲染setSnake([...snake]);
}const [click, setClick] = useState(0)
// 设置键盘监听函数
useEffect(() => {document.addEventListener('keydown', function (event) {const key = event.key;if (key === 'ArrowUp') {// 监听到了向上箭头键的按下操作setCurrentDirection(0)setClick((c)=>c+1);} else if (key === 'ArrowDown') {// 监听到了向下箭头键的按下操作setCurrentDirection(1)setClick((c)=>c+1);} else if (key === 'ArrowLeft') {// 监听到了向左箭头键的按下操作setCurrentDirection(2)setClick((c)=>c+1);} else if (key === 'ArrowRight') {// 监听到了向右箭头键的按下操作setCurrentDirection(3)setClick((c)=>c+1);}});
}, [])/*** 设定定时器，每1s向当前方向移动小蛇* 如果敲键盘，或者吃到食物需要更新定时器* tips: 吃到食物更新是因为定时器晚执行可能会有并发问题*/
useEffect(() => {console.log(click)move()const timer = setInterval(() => {move();}, 1000);return () => {clearInterval(timer);};
}, [click, snake.length]);

二、游戏结束判断

1.游戏成功判断，若无发生成新的食物，则游戏成功

2.游戏失败判断，若小蛇出边界或者小蛇撞到自己，则游戏失败。

// 每次渲染后，判断小蛇状态
useEffect(() => {// 判断小蛇撞出边界if (head.x < 0 || head.x >= width || head.y < 0 || head.y >= height) {console.log('游戏失败')alert('出界，游戏失败');reset();return;}// 判断小蛇撞到自己for (let i = 1; i < snake.length; i++) {if (head.x === snake[i].x && head.y === snake[i].y) {console.log('游戏失败')console.log('snake:' + JSON.stringify(snake))alert('撞到自己了，游戏失败');reset();return;}}})

三、食物生成以及吃食物操作

 1.食物需要在区域内随机生成，并且不能生成在小蛇身体上，若无地方生成，则游戏通关。

 2.吃食物操作会增长小蛇的长度，在小蛇的尾巴添加一截，需要存储前一个路径的尾巴位置。

// 随机生成食物
function generateFood(snake) {const x = Math.floor(Math.random() * width);const y = Math.floor(Math.random() * height);// 如果蛇长等于宽高，说明蛇占满了整个区域，已成功if (snake.length === width * height) {return null;}// 判断食物是否在蛇身上for (let node of snake) {if (node.x === x && node.y === y) {// 重新生成食物，return generateFood(snake);}}return {x, y};
}// 蛇尾巴
const lastTail = useRef(null);// 每次渲染后，判断小蛇状态
useEffect(() => {const head = snake[0];// 小蛇吃到食物if (head.x === food.current.x && head.y === food.current.y) {console.log('eat food!')// 添加上次蛇尾巴let nTail = {...lastTail.current};snake.push(nTail);lastTail.current = nTail;// 重新生成食物food.current = generateFood(snake);if (food.current === null) {console.log('恭喜已通过')alert('恭喜已经通关');reset();return;}// 发起渲染console.log('newsnake:' + JSON.stringify(snake))setSnake([...snake]);return;}
});

c.整体代码

const {useState, useRef, useEffect} = require("react");const Snake = ({width, height}) => {// 移动方向，上下左右const directions = [[0, -1], [0, 1], [-1, 0], [1, 0]];// 当前移动方向const [currentDirection, setCurrentDirection] = useState(3);// 初始小蛇const initialSnake = [{x: 0, // pos xy: 0, // pos y}];// 蛇身体const [snake, setSnake] = useState(initialSnake);// 食物const food = useRef(null);// 初始化食物if (food.current === null) {food.current = generateFood(snake);}// 随机生成食物function generateFood(snake) {const x = Math.floor(Math.random() * width);const y = Math.floor(Math.random() * height);// 如果蛇长等于宽高，说明蛇占满了整个区域，已成功if (snake.length === width * height) {return null;}// 判断食物是否在蛇身上for (let node of snake) {if (node.x === x && node.y === y) {// 重新生成食物，return generateFood(snake);}}return {x, y};}// 蛇尾巴const lastTail = useRef(null);// 小蛇移动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 += direction[0];head.y += direction[1];setSnake([...snake]);}// 游戏结束后重置function reset() {setSnake([...initialSnake]);setCurrentDirection(3);lastTail.current = null;}// 判断是否游戏结束useEffect(() => {const head = snake[0];// 判断小蛇撞出边界if (head.x < 0 || head.x >= width || head.y < 0 || head.y >= height) {console.log('游戏失败')alert('出界，游戏失败');reset();return;}// 判断小蛇撞到自己for (let i = 1; i < snake.length; i++) {if (head.x === snake[i].x && head.y === snake[i].y) {console.log('游戏失败')console.log('snake:' + JSON.stringify(snake))alert('撞到自己了，游戏失败');reset();return;}}})// 判断是否吃到食物useEffect(()=>{const head = snake[0];// 小蛇吃到食物if (head.x === food.current.x && head.y === food.current.y) {console.log('eat food!')// 添加上次蛇尾巴let nTail = {...lastTail.current};snake.push(nTail);lastTail.current = nTail;// 重新生成食物food.current = generateFood(snake);if (food.current === null) {console.log('恭喜已通过')alert('恭喜已经通关');reset();return;}// 发起渲染console.log('newsnake:' + JSON.stringify(snake))setSnake([...snake]);return;}})const [click, setClick] = useState(0)// 设置键盘监听函数useEffect(() => {document.addEventListener('keydown', function (event) {const key = event.key;if (key === 'ArrowUp') {// 监听到了向上箭头键的按下操作setCurrentDirection(0)setClick((c)=>c+1);} else if (key === 'ArrowDown') {// 监听到了向下箭头键的按下操作setCurrentDirection(1)setClick((c)=>c+1);} else if (key === 'ArrowLeft') {// 监听到了向左箭头键的按下操作setCurrentDirection(2)setClick((c)=>c+1);} else if (key === 'ArrowRight') {// 监听到了向右箭头键的按下操作setCurrentDirection(3)setClick((c)=>c+1);}});}, [])/*** 设定定时器，每1s向当前方向移动小蛇* 如果敲键盘，或者吃到食物需要更新定时器* tips: 吃到食物，由于定时器晚执行，可能会用老的state覆盖*/useEffect(() => {console.log(click)move()const timer = setInterval(() => {move();}, 1000);return () => {clearInterval(timer);};}, [click, snake.length]);/*** 游戏区域样式*/
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'
}// 小蛇组成return (<><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></>)
}export default Snake