/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useCallback } 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_FOOD = { x: 15, y: 15 }; // Helper function to check if two directions are opposite const isOppositeDirection = (dir1, dir2) => { const oppositeMap = { 'UP': 'DOWN', 'DOWN': 'UP', 'LEFT': 'RIGHT', 'RIGHT': 'LEFT' }; return oppositeMap[dir1] === dir2; }; function SnakeGame() { const [snake, setSnake] = useState(INITIAL_SNAKE); const [food, setFood] = useState(INITIAL_FOOD); const [direction, setDirection] = useState('RIGHT'); const [nextDirection, setNextDirection] = useState('RIGHT'); const [score, setScore] = useState(0); const [gameOver, setGameOver] = useState(false); const moveSnake = useCallback(() => { if (gameOver) return; const newSnake = [...snake]; const head = { ...newSnake[0] }; // Use nextDirection to allow queuing of direction changes let currentDirection = nextDirection; switch (currentDirection) { case 'UP': head.y--; break; case 'DOWN': head.y++; break; case 'LEFT': head.x--; break; case 'RIGHT': head.x++; break; } // Check wall collision if (head.x < 0 || head.x >= BOARD_SIZE || head.y < 0 || head.y >= BOARD_SIZE) { setGameOver(true); return; } // Restore original self-collision check const selfCollision = newSnake.some( segment => segment.x === head.x && segment.y === head.y ); if (selfCollision) { setGameOver(true); return; } newSnake.unshift(head); // Check food collision if (head.x === food.x && head.y === food.y) { setScore(score + 1); generateFood(newSnake); } else { newSnake.pop(); } // Update both current and next direction setDirection(currentDirection); setSnake(newSnake); }, [snake, nextDirection, food, score, gameOver]); const generateFood = (currentSnake) => { let newFood; do { newFood = { x: Math.floor(Math.random() * BOARD_SIZE), y: Math.floor(Math.random() * BOARD_SIZE) }; } while (currentSnake.some(segment => segment.x === newFood.x && segment.y === newFood.y)); setFood(newFood); }; useEffect(() => { const handleKeyDown = (e) => { // Only allow direction change if snake length is 1 or the proposed direction // does not lead directly into the second snake segment if (snake.length === 1) { switch (e.key) { case 'ArrowUp': setNextDirection('UP'); break; case 'ArrowDown': setNextDirection('DOWN'); break; case 'ArrowLeft': setNextDirection('LEFT'); break; case 'ArrowRight': setNextDirection('RIGHT'); break; } return; } const secondSegment = snake[1]; switch (e.key) { case 'ArrowUp': // Prevent turning into the second segment's position // Also prevent setting opposite direction if (secondSegment.y !== snake[0].y - 1 && !isOppositeDirection(direction, 'UP')) { setNextDirection('UP'); } break; case 'ArrowDown': // Prevent turning into the second segment's position // Also prevent setting opposite direction if (secondSegment.y !== snake[0].y + 1 && !isOppositeDirection(direction, 'DOWN')) { setNextDirection('DOWN'); } break; case 'ArrowLeft': // Prevent turning into the second segment's position // Also prevent setting opposite direction if (secondSegment.x !== snake[0].x - 1 && !isOppositeDirection(direction, 'LEFT')) { setNextDirection('LEFT'); } break; case 'ArrowRight': // Prevent turning into the second segment's position // Also prevent setting opposite direction if (secondSegment.x !== snake[0].x + 1 && !isOppositeDirection(direction, 'RIGHT')) { setNextDirection('RIGHT'); } break; } }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [snake, direction]); useEffect(() => { const gameLoop = setInterval(moveSnake, 200); return () => clearInterval(gameLoop); }, [moveSnake]); const resetGame = () => { setSnake(INITIAL_SNAKE); setFood(INITIAL_FOOD); setDirection('RIGHT'); setNextDirection('RIGHT'); setScore(0); setGameOver(false); }; return (

Snake Game 🐍

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

))}

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

Snake_game