/** @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 CANVAS_SIZE = 400; const GRID_SIZE = 20; const CELL_SIZE = CANVAS_SIZE / GRID_SIZE; function ChatRoom() { const [messages, setMessages] = useState([]); const [inputMessage, setInputMessage] = useState(''); const [username, setUsername] = useState(''); const sendMessage = () => { if (inputMessage && username) { setMessages([...messages, { username, message: inputMessage }]); setInputMessage(''); } }; return (

Chat Room

{messages.map((msg, index) => (

{msg.username}: {msg.message}

))}

setUsername(e.target.value)} style={{ marginRight: '10px' }} /> setInputMessage(e.target.value)} style={{ marginRight: '10px' }} />

); } function SnakeGame() { const [snake, setSnake] = useState([{ x: 10, y: 10 }]); const [food, setFood] = useState({ x: 15, y: 15 }); const [direction, setDirection] = useState({ x: 1, y: 0 }); const [gameOver, setGameOver] = useState(false); const canvasRef = useRef(null); useEffect(() => { const handleKeyPress = (e) => { switch (e.key) { case 'w': setDirection({ x: 0, y: -1 }); break; case 's': setDirection({ x: 0, y: 1 }); break; case 'a': setDirection({ x: -1, y: 0 }); break; case 'd': setDirection({ x: 1, y: 0 }); break; } }; window.addEventListener('keydown', handleKeyPress); return () => window.removeEventListener('keydown', handleKeyPress); }, []); useEffect(() => { if (gameOver) return; const moveSnake = () => { setSnake(prevSnake => { const newSnake = [...prevSnake]; const head = { ...newSnake[0] }; head.x += direction.x; head.y += direction.y; if (head.x < 0 || head.x >= GRID_SIZE || head.y < 0 || head.y >= GRID_SIZE) { setGameOver(true); return prevSnake; } newSnake.unshift(head); if (head.x === food.x && head.y === food.y) { setFood({ x: Math.floor(Math.random() * GRID_SIZE), y: Math.floor(Math.random() * GRID_SIZE) }); } else { newSnake.pop(); } return newSnake; }); }; const gameLoop = setInterval(moveSnake, 100); return () => clearInterval(gameLoop); }, [direction, food, gameOver]); useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE); // Draw snake ctx.fillStyle = 'green'; snake.forEach(segment => { ctx.fillRect(segment.x * CELL_SIZE, segment.y * CELL_SIZE, CELL_SIZE, CELL_SIZE); }); // Draw food ctx.fillStyle = 'red'; ctx.fillRect(food.x * CELL_SIZE, food.y * CELL_SIZE, CELL_SIZE, CELL_SIZE); }, [snake, food]); return (

Snake Game

); } function App() { const [currentView, setCurrentView] = useState('menu'); const renderView = () => { switch (currentView) { case 'chat': return ; case 'game': return ; default: return (

Welcome to Snake Game and Chat

); } }; return (

{currentView !== 'menu' && ( )} {renderView()}

); } function mountApp() { const root = document.getElementById("root"); if (root) { createRoot(root).render(); } else { console.error("Root element not found"); } } async function server(request: Request): Promise { return new Response(` Snake Game and Chat

`, { headers: { "content-type": "text/html" }, }); } export default server; export { mountApp };

snakeclone

Versions

v0