/** @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); const [highScore, setHighScore] = useState(0); useEffect(() => { async function fetchHighScore() { const { blob } = await import("https://esm.town/v/std/blob"); const storedHighScore = await blob.getJSON('snake_high_score') || 0; setHighScore(storedHighScore); } fetchHighScore(); }, []); useEffect(() => { if (score > highScore) { async function updateHighScore() { const { blob } = await import("https://esm.town/v/std/blob"); await blob.setJSON('snake_high_score', score); setHighScore(score); } updateHighScore(); } }, [score, highScore]); 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 -= 1; break; case 'DOWN': head.y += 1; break; case 'LEFT': head.x -= 1; break; case 'RIGHT': head.x += 1; break; } // Check wall collision if (head.x < 0 || head.x >= GRID_SIZE || head.y < 0 || head.y >= GRID_SIZE) { setGameOver(true); return; } // Check self collision if (newSnake.some(segment => segment.x === head.x && segment.y === head.y)) { setGameOver(true); return; } // Check food collision if (head.x === food.x && head.y === food.y) { setScore(score + 1); setFood(generateFood()); newSnake.unshift(head); } else { newSnake.unshift(head); newSnake.pop(); } setSnake(newSnake); }, [snake, direction, food, gameOver, score]); useEffect(() => { const interval = setInterval(moveSnake, 200); return () => clearInterval(interval); }, [moveSnake]); 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]); const restartGame = () => { setSnake(INITIAL_SNAKE); setFood(generateFood()); setDirection('RIGHT'); setScore(0); setGameOver(false); }; return (

Snake Game 🐍

Score: {score}

High Score: {highScore}

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

))}

{gameOver && (

Game Over! 💀

)}

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" } }); }

snake_game