/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const BOARD_SIZE = 20; const CELL_SIZE = 20; const INITIAL_SNAKE = [{ x: 10, y: 10 }]; const INITIAL_DIRECTION = { x: 1, y: 0 }; function SnakeGame() { const [snake, setSnake] = useState(INITIAL_SNAKE); const [food, setFood] = useState(generateFood()); const [direction, setDirection] = useState(INITIAL_DIRECTION); const [score, setScore] = useState(0); const [gameOver, setGameOver] = useState(false); const gameLoopRef = useRef(null); function generateFood() { return { x: Math.floor(Math.random() * BOARD_SIZE), y: Math.floor(Math.random() * BOARD_SIZE) }; } function moveSnake() { const newSnake = [...snake]; const head = { x: (newSnake[0].x + direction.x + BOARD_SIZE) % BOARD_SIZE, y: (newSnake[0].y + direction.y + BOARD_SIZE) % BOARD_SIZE }; newSnake.unshift(head); // Check food collision if (head.x === food.x && head.y === food.y) { setScore(score + 1); setFood(generateFood()); } else { newSnake.pop(); } // Check self collision const selfCollision = newSnake.slice(1).some( segment => segment.x === head.x && segment.y === head.y ); if (selfCollision) { setGameOver(true); } else { setSnake(newSnake); } } function handleKeyDown(e) { switch(e.key) { case 'ArrowUp': if (direction.y !== 1) setDirection({ x: 0, y: -1 }); break; case 'ArrowDown': if (direction.y !== -1) setDirection({ x: 0, y: 1 }); break; case 'ArrowLeft': if (direction.x !== 1) setDirection({ x: -1, y: 0 }); break; case 'ArrowRight': if (direction.x !== -1) setDirection({ x: 1, y: 0 }); break; } } function resetGame() { setSnake(INITIAL_SNAKE); setFood(generateFood()); setDirection(INITIAL_DIRECTION); setScore(0); setGameOver(false); } useEffect(() => { if (!gameOver) { gameLoopRef.current = setInterval(moveSnake, 200); window.addEventListener('keydown', handleKeyDown); } return () => { clearInterval(gameLoopRef.current); window.removeEventListener('keydown', handleKeyDown); }; }, [snake, direction, gameOver]); return (

Snake Game 🐍

{[...Array(BOARD_SIZE * BOARD_SIZE)].map((_, index) => { const x = index % BOARD_SIZE; const y = Math.floor(index / BOARD_SIZE); const isSnake = snake.some(segment => segment.x === x && segment.y === y); const isFood = food.x === x && food.y === y; return (

); })}

Score: {score}

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

snakeGameReact