Car Race Game

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function CarRaceGame() { const [carPosition, setCarPosition] = useState(50); const [obstacles, setObstacles] = useState([]); const [score, setScore] = useState(0); const [gameOver, setGameOver] = useState(false); useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (gameOver) return; switch(e.key) { case 'ArrowLeft': setCarPosition(Math.max(0, carPosition - 10)); break; case 'ArrowRight': setCarPosition(Math.min(100, carPosition + 10)); break; } }; window.addEventListener('keydown', handleKeyDown); const gameLoop = setInterval(() => { if (gameOver) return; // Generate new obstacles if (Math.random() < 0.2) { setObstacles(prev => [...prev, { x: Math.random() * 100, y: 0 }]); } // Move obstacles setObstacles(prev => prev.map(obs => ({ ...obs, y: obs.y + 2 })) .filter(obs => obs.y < 110) ); // Check for collisions const collision = obstacles.some(obs => Math.abs(obs.x - carPosition) < 10 && obs.y > 80 && obs.y < 100 ); if (collision) { setGameOver(true); } else { setScore(prev => prev + 1); } }, 50); return () => { window.removeEventListener('keydown', handleKeyDown); clearInterval(gameLoop); }; }, [carPosition, gameOver]); const restartGame = () => { setCarPosition(50); setObstacles([]); setScore(0); setGameOver(false); }; return (

Score: {score}

{gameOver && (

Game Over!

)}

{obstacles.map((obs, index) => (

))}

🚗

); } const styles = { gameContainer: { position: 'relative', width: '100%', height: '100vh', overflow: 'hidden', backgroundColor: '#f0f0f0' }, road: { position: 'absolute', width: '100%', height: '100%', backgroundColor: 'gray', overflow: 'hidden' }, car: { position: 'absolute', bottom: '10%', fontSize: '3rem', transition: 'left 0.1s' }, obstacle: { position: 'absolute', width: '20px', height: '20px', backgroundColor: 'red', borderRadius: '50%' }, scoreBoard: { position: 'absolute', top: '10px', left: '10px', zIndex: 10, fontSize: '1.5rem', fontWeight: 'bold' }, gameOverScreen: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', backgroundColor: 'rgba(255,255,255,0.8)', padding: '20px', borderRadius: '10px', textAlign: 'center', zIndex: 20 } }; function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Car Race Game

`, { headers: { "content-type": "text/html", }, }); }

carRaceGame1

Versions

v0