/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect, useCallback } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; const GRID_SIZE = 20; const CELL_SIZE = 20; const INITIAL_SNAKE = [{ x: 10, y: 10 }]; function SnakeGame() { const [snake, setSnake] = useState(INITIAL_SNAKE); const [food, setFood] = useState(generateFood()); const [direction, setDirection] = useState('RIGHT'); const [score, setScore] = useState(0); const [gameOver, setGameOver] = useState(false); function generateFood() { return { x: Math.floor(Math.random() * GRID_SIZE), y: Math.floor(Math.random() * GRID_SIZE) }; } const moveSnake = useCallback(() => { if (gameOver) return; const newSnake = [...snake]; const head = { ...newSnake[0] }; switch (direction) { case 'UP': head.y = (head.y - 1 + GRID_SIZE) % GRID_SIZE; break; case 'DOWN': head.y = (head.y + 1) % GRID_SIZE; break; case 'LEFT': head.x = (head.x - 1 + GRID_SIZE) % GRID_SIZE; break; case 'RIGHT': head.x = (head.x + 1) % GRID_SIZE; break; } // Remove game over condition for wall collision // Keep self collision check if (newSnake.some(segment => segment.x === head.x && segment.y === head.y)) { setGameOver(true); return; } newSnake.unshift(head); // Check food collision if (head.x === food.x && head.y === food.y) { setScore(score + 1); setFood(generateFood()); } else { newSnake.pop(); } setSnake(newSnake); }, [snake, direction, food, score, gameOver]); useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { 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; } }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [direction]); useEffect(() => { const interval = setInterval(moveSnake, 200); return () => clearInterval(interval); }, [moveSnake]); const restartGame = () => { setSnake(INITIAL_SNAKE); setFood(generateFood()); setDirection('RIGHT'); setScore(0); setGameOver(false); }; return (

Snake Game 🐍

{gameOver ? (

Game Over! 💥

Score: {score}

) : (

Score: {score}

{snake.map((segment, index) => (

))}

Use arrow keys to control the snake

)} View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Snake Game

`, { headers: { "content-type": "text/html" } }); }

diplomaticOrangeGuineafowl