import React from "https://esm.sh/react@19"; import ReactDOMClient from "https://esm.sh/react-dom@19/client"; const BOARD_SIZE = 20; // Size of the board (e.g., 20x20) const INITIAL_SPEED = 150; // ms per move, lower is faster Initially const SPEED_INCREMENT_PER_FOOD = 5; // ms to decrease interval for each food eaten const MAX_SPEED = 50; // ms, fastest possible speed const FOOD_COLOR = '#FF0000'; // Red const SNAKE_COLOR = '#00FF00'; // Green const BOARD_COLOR = '#000000'; // Black function App() { const [snake, setSnake] = React.useState([{ x: 10, y: 10 }]); // Snake initial position const [food, setFood] = React.useState({ x: 5, y: 5 }); // Food initial position const [direction, setDirection] = React.useState({ x: 1, y: 0 }); // Initial direction (right) const [speed, setSpeed] = React.useState(INITIAL_SPEED); const [gameOver, setGameOver] = React.useState(false); const [score, setScore] = React.useState(0); const gameAreaRef = React.useRef(null); const intervalRef = React.useRef(null); // Function to generate food at a random position, avoiding the snake const generateFood = () => { let newFood; do { newFood = { x: Math.floor(Math.random() * BOARD_SIZE), y: Math.floor(Math.random() * BOARD_SIZE), }; } while ( snake.some(segment => segment.x === newFood.x && segment.y === newFood.y) ); setFood(newFood); }; // Function to handle game reset const resetGame = () => { setSnake([{ x: Math.floor(BOARD_SIZE / 2), y: Math.floor(BOARD_SIZE / 2) }]); setFood({ x: Math.floor(Math.random() * BOARD_SIZE), y: Math.floor(Math.random() * BOARD_SIZE) }); setDirection({ x: 1, y: 0 }); // Reset direction to right setSpeed(INITIAL_SPEED); setGameOver(false); setScore(0); if (intervalRef.current) clearInterval(intervalRef.current); }; // Effect for game logic (movement, collision, eating food) React.useEffect(() => { const moveSnake = () => { if (gameOver) return; setSnake((prevSnake) => { const head = { ...prevSnake[0] }; head.x += direction.x; head.y += direction.y; // Check for collision with walls if ( head.x < 0 || head.x >= BOARD_SIZE || head.y < 0 || head.y >= BOARD_SIZE ) { setGameOver(true); return prevSnake; // Keep the snake state to show the collision visually } // Check for collision with itself for (let i = 1; i < prevSnake.length; i++) { if (head.x === prevSnake[i].x && head.y === prevSnake[i].y) { setGameOver(true); return prevSnake; } } // Check if food is eaten let newSnake = [...prevSnake]; if (head.x === food.x && head.y === food.y) { generateFood(); setScore(prevScore => prevScore + 1); setSpeed(prevSpeed => Math.max(MAX_SPEED, prevSpeed - SPEED_INCREMENT_PER_FOOD)); // Add new head, don't remove tail newSnake.unshift(head); } else { // Move snake: add new head, remove tail newSnake.unshift(head); newSnake.pop(); } return newSnake; }); }; // Start the game loop intervalRef.current = setInterval(moveSnake, speed); // Cleanup on component unmount or when speed/gameOver changes return () => { clearInterval(intervalRef.current); }; }, [direction, gameOver, speed, food, score]); // Re-run effect when these change // Effect for key press handling React.useEffect(() => { const handleKeyPress = (event) => { if (gameOver && event.key === 'r') { // Allow restart on 'r' if game over resetGame(); return; } if (gameOver) return; // Ignore other inputs if game is over let newDirection = { ...direction }; switch (event.key.toLowerCase()) { case 'arrowup': case 'w': if (direction.y === 0) newDirection = { x: 0, y: -1 }; // Cannot reverse direction break; case 'arrowdown': case 's': if (direction.y === 0) newDirection = { x: 0, y: 1 }; break; case 'arrowleft': case 'a': if (direction.x === 0) newDirection = { x: -1, y: 0 }; break; case 'arrowright': case 'd': if (direction.x === 0) newDirection = { x: 1, y: 0 }; break; case 'r': // Reset game at any time resetGame(); break; } // Only update direction if it's actually different to avoid unnecessary re-renders if (newDirection.x !== direction.x || newDirection.y !== direction.y) { setDirection(newDirection); } }; window.addEventListener('keydown', handleKeyPress); return () => { window.removeEventListener('keydown', handleKeyPress); }; }, [direction, gameOver]); // Dependent on direction and gameOver // Initial setup and cleanup for game start/reset React.useEffect(() => { resetGame(); // Initialize game state on mount }, []); // Render the game board const renderBoard = () => { const cells = []; for (let y = 0; y < BOARD_SIZE; y++) { for (let x = 0; x < BOARD_SIZE; x++) { let isSnake = false; let isFood = false; let isHead = false; if (snake.length > 0 && x === snake[0].x && y === snake[0].y) { isHead = true; isSnake = true; } else { isSnake = snake.some(segment => segment.x === x && segment.y === y); } isFood = x === food.x && y === food.y; let cellClassName = "w-full h-full flex items-center justify-center transition-colors duration-75 ease-linear"; const cellStyle = { backgroundColor: BOARD_COLOR }; if (isSnake) { cellStyle.backgroundColor = SNAKE_COLOR; } if (isFood) { cellStyle.backgroundColor = FOOD_COLOR; } if (isHead) { cellClassName += " border-2 border-white"; // Highlight head } cells.push(

{/* Optional: Render snake segments or food visually */}

); } } return cells; }; return (

Snake Game

{renderBoard()}

{gameOver && (

Game Over!

Score: {score}

Press 'R' to restart.

)}

Score: {score}

Speed: {Math.round((INITIAL_SPEED - speed) / SPEED_INCREMENT_PER_FOOD)}

Use Arrow Keys or W/A/S/D to move. Press 'R' to reset the game.

); } const rootElement = document.getElementById('root'); if (rootElement) { ReactDOMClient.createRoot(rootElement).render(); } else { console.error("Root element with id 'root' not found."); }