Untitled
unknown
plain_text
17 days ago
4.9 kB
3
Indexable
Never
import React, { useState, useEffect } from 'react'; interface Bird { x: number; y: number; velocity: number; } interface Pipe { x: number; y: number; gap: number; } const App = () => { const [bird, setBird] = useState<Bird>({ x: 100, y: 200, velocity: 0 }); const [pipes, setPipes] = useState<Pipe[]>([]); const [score, setScore] = useState(0); const [gameOver, setGameOver] = useState(false); useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === ' ') { setBird((prevBird) => ({ ...prevBird, velocity: -10 })); } }; document.addEventListener('keydown', handleKeyDown); return () => { document.removeEventListener('keydown', handleKeyDown); }; }, []); useEffect(() => { const intervalId = setInterval(() => { if (gameOver) returnsetBird((prevBird) => ({ ...prevBird, y: prevBird.y + prevBird.velocity, velocity: prevBird.velocity + 0.5, })); setPipes((prevPipes) => { const newPipes = prevPipes.map((pipe) => ({ ...pipe, x: pipe.x - 2 })); if (newPipes.length === 0 || newPipes[newPipes.length - 1].x < 200) { newPipes.push({ x: 400, y: Math.random() * 200, gap: 150 }); } return newPipes.filter((pipe) => pipe.x > -50); }); setScore((prevScore) => prevScore + 1); }, 16); return () => { clearInterval(intervalIdimport React, { useState, useEffect } from 'react'; interface Bird { x: number; y: number; velocity: number; } interface Pipe { x: number; y: number; gap: number; } const App = () => { const [bird, setBird] = useState<Bird>({ x: 100, y: 200, velocity: 0 }); const [pipes, setPipes] = useState<Pipe[]>([]); const [score, setScore] = useState(0); const [gameOver, setGameOver] = useState(false); useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === ' ') { setBird((prevBird) => ({ ...prevBird, velocity: -10 })); } }; document.addEventListener('keydown', handleKeyDown); return () => { document.removeEventListener('keydown', handleKeyDown); }; }, []); useEffect(() => { const intervalId = setInterval(() => { if (gameOver) return; setBird((prevBird) => ({ ...prevBird, y: prevBird.y + prevBird.velocity, velocity: prevBird.velocity + 0.5, })); setPipes((prevPipes) => { const newPipes = prevPipes.map((pipe) => ({ ...pipe, x: pipe.x - 2 })); if (newPipes.length === 0 || newPipes[newPipes.length - 1].x < 200) { newPipes.push({ x: 400, y: Math.random() * 200, gap: 150 }); }return newPipes.filter((pipe) => pipe.x > -50); }); setScore((prevScore) => prevScore + 1); }, 16); return () => { clearInterval(intervalId); }; }, [gameOver]); useEffect(() => { if (bird.y > 400 || bird.y < 0) { setGameOver(true); } pipes.forEach((pipe) => { if ( bird.x + 20 > pipe.x && bird.x - 20 < pipe.x + 50 && (bird.y - 20 < pipe.y || bird.y + 20 > pipe.y + pipe.gap) ) { setGameOver(true); } }); }, [bird, pipes]); return ( <div className="h-screen w-screen bg-gray-900 flex justify-center items-center"> <div className="relative w-400 h-600"> {gameOver && ( <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-bold"> Game Over! </div> )} <div className="absolute top-0 left-0 w-full h-full bg-gray-900" style={{ overflow: 'hidden' }} > {pipes.map((pipe, index) => ( <div key={index} className="absolute" style={{ left: pipe.x, top: 0, width: 50, height: pipe.y, backgroundColor: 'green', }} /> ))} {pipes.map((pipe, index) => ( <div key={index} className="absolute" style={{ left: pipe.x, top: pipe.y + pipe.gap, width: 50, height: 400 - pipe.y - pipe.gap, backgroundColor: 'green', }} /> ))} <div className="absolute" style={{ left: bird.x, top: bird.y, width: 40, height: 40, backgroundColor: 'yellow', borderRadius: '50%', }} /> </div> <div className="absolute top-0 left-0 w-full text-white text-xl font-bold"> Score: {score} </div> </div> </div> ); }; export default App;
Leave a Comment