function MainComponent() { const [gameStarted, setGameStarted] = React.useState(false); const [score, setScore] = React.useState(0); const [playerPosition, setPlayerPosition] = React.useState(400); const [enemies, setEnemies] = React.useState([ { id: 1, x: 200, y: 32 }, { id: 2, x: 533, y: 64 }, { id: 3, x: 266, y: 128 } ]); React.useEffect(()=>{ if (gameStarted) { const gameLoop = setInterval(()=>{ moveEnemies(); checkCollisions(); }, 50); return ()=>clearInterval(gameLoop); } }, [ gameStarted, enemies, playerPosition ]); const moveEnemies = ()=>{ setEnemies((prevEnemies)=>prevEnemies.map((enemy)=>({ ...enemy, y: enemy.y + 2 }))); }; const checkCollisions = ()=>{ enemies.forEach((enemy)=>{ if (enemy.y > 568 && Math.abs(enemy.x - playerPosition) < 48) { endGame(); } }); }; const movePlayer = (e)=>{ if (gameStarted) { const gameArea = e.currentTarget.getBoundingClientRect(); const newPosition = e.clientX - gameArea.left - 32; setPlayerPosition(Math.max(0, Math.min(newPosition, 768))); } }; const startGame = ()=>{ setGameStarted(true); setScore(0); }; const endGame = ()=>{ setGameStarted(false); alert(`Game Over! Your score: ${score}`); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#000000] min-h-screen flex flex-col items-center justify-center font-sans text-white", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, "Space Game"), /*#__PURE__*/ React.createElement("div", { className: "w-[800px] h-[600px] bg-[#111] relative border-4 border-[#333] rounded-lg overflow-hidden", onMouseMove: movePlayer, __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-0", style: { transform: `translateX(${playerPosition}px)` }, __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 bg-[#00ff00] rounded-full", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this })), enemies.map((enemy)=>/*#__PURE__*/ React.createElement("div", { key: enemy.id, className: "absolute w-8 h-8 bg-[#ff0000] rounded-full", style: { top: `${enemy.y}px`, left: `${enemy.x}px` }, __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex space-x-4", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#4a4a4a] hover:bg-[#5a5a5a] text-white font-bold py-2 px-4 rounded", onClick: startGame, disabled: gameStarted, __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, gameStarted ? "Game in Progress" : "Start Game"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#4a4a4a] hover:bg-[#5a5a5a] text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "Instructions")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-xl", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, "Score: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 87, columnNumber: 16 }, __self: this }, score))); }