/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef, useCallback } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const GRID_SIZE = 20; const SNAKE_SPEED = 100; function App() { const canvasRef = useRef(null); const [score, setScore] = useState(0); const [gameState, setGameState] = useState("start"); // "start", "playing", "gameOver" const gameLoopRef = useRef(null); const snakeRef = useRef([{ x: 10, y: 10 }]); const foodRef = useRef({ x: 15, y: 15 }); const directionRef = useRef({ x: 1, y: 0 }); // Set initial direction to right const [canvasSize, setCanvasSize] = useState(400); const getRandomFood = useCallback(() => { let newFood; do { newFood = { x: Math.floor(Math.random() * GRID_SIZE), y: Math.floor(Math.random() * GRID_SIZE), }; } while (snakeRef.current.some(segment => segment.x === newFood.x && segment.y === newFood.y)); return newFood; }, []); const resetGame = useCallback(() => { snakeRef.current = [{ x: 10, y: 10 }]; foodRef.current = getRandomFood(); directionRef.current = { x: 1, y: 0 }; // Set initial direction to right setScore(0); }, [getRandomFood]); const draw = useCallback(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); ctx.fillStyle = "#000"; ctx.fillRect(0, 0, canvasSize, canvasSize); ctx.fillStyle = "#0f0"; snakeRef.current.forEach(segment => { ctx.fillRect( segment.x * (canvasSize / GRID_SIZE), segment.y * (canvasSize / GRID_SIZE), canvasSize / GRID_SIZE, canvasSize / GRID_SIZE ); }); ctx.fillStyle = "#f00"; ctx.fillRect( foodRef.current.x * (canvasSize / GRID_SIZE), foodRef.current.y * (canvasSize / GRID_SIZE), canvasSize / GRID_SIZE, canvasSize / GRID_SIZE ); }, [canvasSize]); const move = useCallback(() => { const head = { ...snakeRef.current[0] }; head.x += directionRef.current.x; head.y += directionRef.current.y; if ( head.x < 0 || head.x >= GRID_SIZE || head.y < 0 || head.y >= GRID_SIZE || snakeRef.current.some(segment => segment.x === head.x && segment.y === head.y) ) { setGameState("gameOver"); return; } snakeRef.current.unshift(head); if (head.x === foodRef.current.x && head.y === foodRef.current.y) { foodRef.current = getRandomFood(); setScore(prevScore => prevScore + 1); } else { snakeRef.current.pop(); } draw(); }, [draw, getRandomFood]); const startGame = useCallback(() => { resetGame(); setGameState("playing"); draw(); // Draw initial state // Add a small delay before starting the game loop setTimeout(() => { gameLoopRef.current = setInterval(move, SNAKE_SPEED); }, 500); }, [move, resetGame, draw]); const handleDirectionChange = useCallback((newDirection) => { if (gameState !== "playing") return; switch (newDirection) { case "up": if (directionRef.current.y === 0) directionRef.current = { x: 0, y: -1 }; break; case "down": if (directionRef.current.y === 0) directionRef.current = { x: 0, y: 1 }; break; case "left": if (directionRef.current.x === 0) directionRef.current = { x: -1, y: 0 }; break; case "right": if (directionRef.current.x === 0) directionRef.current = { x: 1, y: 0 }; break; } }, [gameState]); const handleKeyPress = useCallback((e) => { if (gameState !== "playing") return; switch (e.key) { case "ArrowUp": handleDirectionChange("up"); break; case "ArrowDown": handleDirectionChange("down"); break; case "ArrowLeft": handleDirectionChange("left"); break; case "ArrowRight": handleDirectionChange("right"); break; } }, [gameState, handleDirectionChange]); useEffect(() => { document.addEventListener("keydown", handleKeyPress); return () => { document.removeEventListener("keydown", handleKeyPress); }; }, [handleKeyPress]); useEffect(() => { if (gameState === "gameOver") { clearInterval(gameLoopRef.current); } }, [gameState]); useEffect(() => { const handleResize = () => { const size = Math.min(400, Math.min(window.innerWidth, window.innerHeight) - 150); setCanvasSize(size); }; handleResize(); window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); clearInterval(gameLoopRef.current); }; }, []); return (

Snake Game

); } 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", }, }); } const css = ` body { margin: 0; font-family: system-ui, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; } .game-container { text-align: center; display: flex; flex-direction: column; align-items: center; max-width: 100%; padding: 10px; } canvas { border: 2px solid #000; max-width: 100%; } button { margin-top: 10px; padding: 10px 20px; font-size: 16px; cursor: pointer; } .control-buttons { display: flex; flex-direction: column; align-items: center; margin-top: 20px; } .control-buttons button { width: 60px; height: 60px; font-size: 24px; margin: 5px; border: none; background-color: #4CAF50; color: white; border-radius: 50%; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .control-buttons button:active { background-color: #45a049; } .control-buttons > div { display: flex; justify-content: center; } @media (max-width: 480px) { h1 { font-size: 24px; } p { font-size: 14px; } .control-buttons button { width: 50px; height: 50px; font-size: 20px; } } `;

maphido