使用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;