import React, { useState, useEffect, useRef } from "https://esm.sh/react@19"; import ReactDOMClient from "https://esm.sh/react-dom@19/client"; function App() { const [isGameOver, setIsGameOver] = useState(false); const [score, setScore] = useState(0); const [playerPos, setPlayerPos] = useState({ x: 50, y: 180 }); // Player's initial position const [obstacles, setObstacles] = useState([]); // Array of obstacles const [isJumping, setIsJumping] = useState(false); // Player's jump state const gameContainerRef = useRef(null); const obstaclesRef = useRef([]); // Use ref to store obstacles for collision detection const playerYRef = useRef(180); // Ref to track player's current y-position for gravity const GAME_WIDTH = 600; const GAME_HEIGHT = 300; const PLAYER_WIDTH = 20; const PLAYER_HEIGHT = 40; const OBSTACLE_WIDTH = 20; const OBSTACLE_HEIGHT = 40; const GRAVITY = 4; // Increased gravity for faster falling const JUMP_FORCE = -20; // Adjusted jump force for a lower jump height const GROUND_LEVEL = 180; // Represents the y-coordinate of the ground // Player jump const jump = () => { if (!isJumping && !isGameOver) { setIsJumping(true); playerYRef.current = JUMP_FORCE; // Apply initial upward force } }; // Game loop for physics and updates useEffect(() => { let gameLoopTimer; const updateGame = () => { if (isGameOver) return; // Update player position (apply gravity) let currentPlayerY = playerYRef.current; currentPlayerY += GRAVITY; // Apply gravity if (currentPlayerY >= GROUND_LEVEL) { currentPlayerY = GROUND_LEVEL; // Land on ground setIsJumping(false); } playerYRef.current = currentPlayerY; setPlayerPos(prev => ({ ...prev, y: currentPlayerY })); // Move obstacles and remove off-screen ones setObstacles(prev => { const updatedObstacles = prev.map(obstacle => { const newX = obstacle.x - 5; // Obstacle speed if (newX < -obstacle.width) { return null; // Remove obstacle } return { ...obstacle, x: newX }; }).filter(obstacle => obstacle !== null); obstaclesRef.current = updatedObstacles; // Update ref with current obstacles return updatedObstacles; }); // Generate new obstacles if (Math.random() < 0.02) { // Adjust obstacle spawn rate setObstacles(prev => { const newObstacle = { id: Math.random(), x: GAME_WIDTH, y: GROUND_LEVEL, width: OBSTACLE_WIDTH, height: OBSTACLE_HEIGHT, }; const updatedObstacles = [...prev, newObstacle]; obstaclesRef.current = updatedObstacles; // Update ref with current obstacles return updatedObstacles; }); } // Collision detection obstaclesRef.current.forEach(obstacle => { if ( playerPos.x < obstacle.x + obstacle.width && playerPos.x + PLAYER_WIDTH > obstacle.x && playerPos.y < obstacle.y + obstacle.height && // playerPos.y is the top of the player playerPos.y + PLAYER_HEIGHT > obstacle.y // playerPos.y + PLAYER_HEIGHT is the bottom of the player ) { setIsGameOver(true); clearInterval(gameLoopTimer); // Stop the game loop on game over } }); }; // Initialize game loop gameLoopTimer = setInterval(updateGame, 20); // Adjust game loop speed return () => clearInterval(gameLoopTimer); // Cleanup on unmount }, [isGameOver, playerPos]); // Re-run effect if game over state or player position changes // Score update useEffect(() => { let scoreInterval; if (!isGameOver) { scoreInterval = setInterval(() => { setScore(prev => prev + 1); }, 100); } return () => clearInterval(scoreInterval); }, [isGameOver]); // Handle input (Spacebar for jump, Enter for restart) useEffect(() => { const handleKeyDown = (e) => { if (e.code === "Space") { jump(); } else if (e.code === "Enter" && isGameOver) { resetGame(); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [isJumping, isGameOver]); // Ensure correct dependencies // Handle click/touch for jump useEffect(() => { const handleClick = () => { jump(); }; const gameElement = gameContainerRef.current; if (gameElement) { gameElement.addEventListener('click', handleClick); gameElement.addEventListener('touchstart', handleClick); } return () => { if (gameElement) { gameElement.removeEventListener('click', handleClick); gameElement.removeEventListener('touchstart', handleClick); } }; }, [isJumping, isGameOver]); // Ensure correct dependencies const resetGame = () => { setIsGameOver(false); setScore(0); setPlayerPos({ x: 50, y: GROUND_LEVEL }); // Reset player to ground level playerYRef.current = GROUND_LEVEL; // Reset internal y position setObstacles([]); obstaclesRef.current = []; // Clear ref as well setIsJumping(false); }; // Calculate player's bottom CSS property based on its y-position const playerBottomStyle = GAME_HEIGHT - playerPos.y - PLAYER_HEIGHT; return (

{/* Ground */}

{/* Player */}

{/* Obstacles */} {obstacles.map(obstacle => (

))} {/* Score Display */}

Score: {score}

{/* Game Over Screen */} {isGameOver && (

Game Over!

Final Score: {score}

)}

{/* Instructions (conditionally displayed) */} {!isGameOver && (

Tap/Click or Press Space to Jump!

)}

); } ReactDOMClient.createRoot(document.getElementById('root')).render();