/** @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"; // Difficulty configurations const DIFFICULTY_CONFIGS = { easy: { boardSize: 15, cellSize: 25, baseSpeed: 300, speedMultiplier: 0.9, growthRate: 1 }, normal: { boardSize: 20, cellSize: 20, baseSpeed: 200, speedMultiplier: 0.85, growthRate: 2 }, hard: { boardSize: 25, cellSize: 15, baseSpeed: 100, speedMultiplier: 0.8, growthRate: 3 } }; function SnakeGame() { const [difficulty, setDifficulty] = useState('normal'); const [level, setLevel] = useState(1); const [boardSize, setBoardSize] = useState(DIFFICULTY_CONFIGS.normal.boardSize); const [cellSize, setCellSize] = useState(DIFFICULTY_CONFIGS.normal.cellSize); const [gameSpeed, setGameSpeed] = useState(DIFFICULTY_CONFIGS.normal.baseSpeed); const [snake, setSnake] = useState([{ x: Math.floor(boardSize / 2), y: Math.floor(boardSize / 2) }]); const [food, setFood] = useState(generateFoodPosition); const [direction, setDirection] = useState({ x: 1, y: 0 }); const [score, setScore] = useState(0); const [gameOver, setGameOver] = useState(false); // Generate random food position function generateFoodPosition() { return { x: Math.floor(Math.random() * boardSize), y: Math.floor(Math.random() * boardSize) }; } // Change difficulty const changeDifficulty = (newDifficulty) => { const config = DIFFICULTY_CONFIGS[newDifficulty]; setDifficulty(newDifficulty); setBoardSize(config.boardSize); setCellSize(config.cellSize); setGameSpeed(config.baseSpeed); restartGame(newDifficulty); }; // Handle keyboard and touch controls const changeDirection = (newDirection) => { // Prevent 180-degree turns const isOppositeDirection = ( (newDirection.x === -direction.x && newDirection.y === -direction.y) ); if (!isOppositeDirection) { setDirection(newDirection); } }; // Handle keyboard controls useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { switch (e.key) { case 'ArrowUp': changeDirection({ x: 0, y: -1 }); break; case 'ArrowDown': changeDirection({ x: 0, y: 1 }); break; case 'ArrowLeft': changeDirection({ x: -1, y: 0 }); break; case 'ArrowRight': changeDirection({ x: 1, y: 0 }); break; } }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [direction]); // Game loop and movement logic useEffect(() => { if (gameOver) return; const moveSnake = () => { const newHead = { x: (snake[0].x + direction.x + boardSize) % boardSize, y: (snake[0].y + direction.y + boardSize) % boardSize }; // Check for self-collision if (snake.some(segment => segment.x === newHead.x && segment.y === newHead.y )) { setGameOver(true); return; } // Check for food consumption const eatenFood = newHead.x === food.x && newHead.y === food.y; const newSnake = [newHead, ...snake]; if (eatenFood) { const config = DIFFICULTY_CONFIGS[difficulty]; // Increase score and level setScore(prev => prev + config.growthRate); // Level progression (up to 999) if (score + config.growthRate >= level * 10) { const newLevel = Math.min(level + 1, 999); setLevel(newLevel); // Adjust game speed as level increases setGameSpeed(Math.max( 50, config.baseSpeed * Math.pow(config.speedMultiplier, newLevel) )); } setFood(generateFoodPosition()); } else { newSnake.pop(); } setSnake(newSnake); }; const gameInterval = setInterval(moveSnake, gameSpeed); return () => clearInterval(gameInterval); }, [snake, direction, food, gameOver, gameSpeed, level, difficulty]); // Restart game const restartGame = (currentDifficulty = difficulty) => { const config = DIFFICULTY_CONFIGS[currentDifficulty]; setSnake([{ x: Math.floor(config.boardSize / 2), y: Math.floor(config.boardSize / 2) }]); setFood(generateFoodPosition); setDirection({ x: 1, y: 0 }); setScore(0); setLevel(1); setGameSpeed(config.baseSpeed); setGameOver(false); }; // Touch control buttons const TouchControls = () => { const controlButtons = [ { direction: { x: 0, y: -1 }, icon: '⬆️', className: 'touch-up' }, { direction: { x: 0, y: 1 }, icon: '⬇️', className: 'touch-down' }, { direction: { x: -1, y: 0 }, icon: '⬅️', className: 'touch-left' }, { direction: { x: 1, y: 0 }, icon: '➡️', className: 'touch-right' } ]; return (

{controlButtons.map((btn, index) => ( ))}

); }; return (

🐍 Snake Game

{Object.keys(DIFFICULTY_CONFIGS).map(diff => ( ))}

Difficulty: {difficulty.toUpperCase()} Level: {level} Score: {score}

{gameOver && (

Game Over! 💀

)}

{/* Snake segments */} {snake.map((segment, index) => (

))} {/* Food */}

{/* Touch Controls */}

Use Arrow Keys or Touch Buttons 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" } }); } const css = ` body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #000; /* Black background */ font-family: Arial, sans-serif; touch-action: none; /* Disable browser touch interactions */ color: white; /* White text for contrast */ } .snake-game { text-align: center; user-select: none; -webkit-user-select: none; } .difficulty-selector { margin-bottom: 15px; } .difficulty-selector button { margin: 0 5px; padding: 5px 10px; background-color: #1E90FF; /* Dodger Blue */ color: white; border: none; cursor: pointer; transition: background-color 0.3s; } .difficulty-selector button.active { background-color: #4169E1; /* Royal Blue */ } .game-board { position: relative; background-color: #111; /* Dark Gray */ border: 2px solid #333; /* Lighter Gray Border */ margin: 0 auto; } .snake-segment { position: absolute; background-color: #1E90FF; /* Dodger Blue for snake */ border: 1px solid #4169E1; /* Royal Blue border */ } .food { position: absolute; background-color: #1E90FF; /* Dodger Blue for food */ border-radius: 50%; } .game-info { display: flex; justify-content: center; gap: 20px; margin-bottom: 10px; font-size: 1em; } .game-over { color: #FF4500; /* Orange Red */ font-weight: bold; margin-bottom: 15px; } .restart-btn { margin-top: 10px; padding: 10px 20px; font-size: 1em; background-color: #1E90FF; /* Dodger Blue */ color: white; border: none; cursor: pointer; } .game-instructions { margin-top: 10px; color: #888; /* Light Gray */ } .touch-controls { display: flex; justify-content: center; gap: 10px; margin-top: 15px; } .touch-btn { width: 50px; height: 50px; font-size: 24px; background-color: #1E90FF; /* Dodger Blue */ color: white; border: 2px solid #4169E1; /* Royal Blue */ border-radius: 5px; cursor: pointer; touch-action: none; } .touch-btn:active { background-color: #4169E1; /* Royal Blue */ } @media (max-width: 600px) { .game-board { transform: scale(0.8); } .touch-controls { margin-top: 10px; } .touch-btn { width: 40px; height: 40px; font-size: 20px; } } `;

ardentVioletSwordfish