使用Trae 生成的React版的贪吃蛇

首先你想用这个贪吃蛇，你需要先安装Trae

Trae 官方地址

他有两种模式 chat builder

我使用的是builder模式,虽然是Alpha.还是可以用。

接下来就是按着需求傻瓜式的操作生成代码

他生成的代码不完全正确，比如没有引入Game.jsx文件,需要详细的描述，他在根据描述修改代码。

最后的效果

下面就是游戏核心Game.jsx文件的内容

import React, { useState, useEffect, useCallback } from 'react';const Game = () => {// 使用useState Hook定义游戏状态// useState返回一个数组，第一个元素是当前状态值，第二个元素是更新状态的函数const [snake, setSnake] = useState([{ x: 10, y: 10 }]); // 蛇的初始位置和身体const [food, setFood] = useState({ x: 5, y: 5 }); // 食物的初始位置const [direction, setDirection] = useState('RIGHT'); // 初始移动方向const [score, setScore] = useState(0); // 初始分数// 使用useCallback Hook生成新食物的位置// useCallback用于缓存函数，避免在每次渲染时都创建新的函数实例const generateFood = useCallback(() => {const newFood = {x: Math.floor(Math.random() * 20),y: Math.floor(Math.random() * 20)};setFood(newFood);}, []);// 使用useCallback Hook检查碰撞const checkCollision = useCallback((head) => {// 检查是否撞墙if (head.x >= 20 || head.x < 0 || head.y >= 20 || head.y < 0) {return true;}// 检查是否撞到自己for (let i = 1; i < snake.length; i++) {if (head.x === snake[i].x && head.y === snake[i].y) {return true;}}return false;}, [snake]);// 使用useCallback Hook移动蛇const moveSnake = useCallback(() => {const newSnake = [...snake];const head = { ...newSnake[0] };// 根据当前方向移动蛇头switch (direction) {case 'RIGHT':head.x += 1;break;case 'LEFT':head.x -= 1;break;case 'UP':head.y -= 1;break;case 'DOWN':head.y += 1;break;default:break;}// 检查是否发生碰撞if (checkCollision(head)) {// 游戏结束逻辑return;}newSnake.unshift(head);// 检查是否吃到食物if (head.x === food.x && head.y === food.y) {setScore(score + 1);generateFood();} else {newSnake.pop();}setSnake(newSnake);}, [snake, direction, food, score, checkCollision, generateFood]);// 使用useEffect Hook监听键盘事件// useEffect用于处理副作用，如添加事件监听器useEffect(() => {const handleKeyDown = (e) => {switch (e.key) {case 'ArrowUp':if (direction !== 'DOWN') setDirection('UP');break;case 'ArrowDown':if (direction !== 'UP') setDirection('DOWN');break;case 'ArrowLeft':if (direction !== 'RIGHT') setDirection('LEFT');break;case 'ArrowRight':if (direction !== 'LEFT') setDirection('RIGHT');break;default:break;}};window.addEventListener('keydown', handleKeyDown);return () => window.removeEventListener('keydown', handleKeyDown);}, [direction]);// 使用useEffect Hook实现游戏主循环useEffect(() => {const gameLoop = setInterval(moveSnake, 200);return () => clearInterval(gameLoop);}, [moveSnake]);// JSX语法：用于描述UI的结构return (<div><div>Score: {score}</div><div style={{ display: 'grid', gridTemplateColumns: 'repeat(20, 20px)' }}>{Array.from({ length: 20 * 20 }).map((_, index) => {const x = index % 20;const y = Math.floor(index / 20);const isSnake = snake.some(segment => segment.x === x && segment.y === y);const isFood = food.x === x && food.y === y;return (<divkey={index}style={{width: '20px',height: '20px',backgroundColor: isSnake ? 'green' : isFood ? 'red' : 'lightgray',border: '1px solid gray'}}/>);})}</div></div>);
};export default Game;