function MainComponent() { const [gameStarted, setGameStarted] = React.useState(false); const [racketPosition, setRacketPosition] = React.useState({ top: 200, left: 200 }); const [ballPosition, setBallPosition] = React.useState({ top: 100, left: 100 }); const [ballDirection, setBallDirection] = React.useState({ x: 2, y: 2 }); const gameAreaRef = React.useRef(null); React.useEffect(()=>{ if (gameStarted) { const handleKeyPress = (e)=>{ let newTop = racketPosition.top; let newLeft = racketPosition.left; if (e.key === 'ArrowUp') newTop = Math.max(0, newTop - 10); if (e.key === 'ArrowDown') newTop = Math.min(390, newTop + 10); if (e.key === 'ArrowLeft') newLeft = Math.max(0, newLeft - 10); if (e.key === 'ArrowRight') newLeft = Math.min(860, newLeft + 10); setRacketPosition({ top: newTop, left: newLeft }); }; const moveBall = ()=>{ setBallPosition((prev)=>{ let newTop = prev.top + ballDirection.y; let newLeft = prev.left + ballDirection.x; if (newTop <= 0 || newTop >= 480) setBallDirection((d)=>({ ...d, y: -d.y })); if (newLeft <= 0 || newLeft >= 940) setBallDirection((d)=>({ ...d, x: -d.x })); const ballHitsRacket = newTop >= racketPosition.top && newTop <= racketPosition.top + 100 && newLeft >= racketPosition.left && newLeft <= racketPosition.left + 100; if (ballHitsRacket) setBallDirection((d)=>({ x: -d.x, y: -d.y })); return { top: newTop, left: newLeft }; }); }; document.addEventListener("keydown", handleKeyPress); const ballInterval = setInterval(moveBall, 20); return ()=>{ document.removeEventListener("keydown", handleKeyPress); clearInterval(ballInterval); }; } }, [ gameStarted, racketPosition, ballDirection ]); const startGame = ()=>{ setGameStarted(true); setBallPosition({ top: 100, left: 100 }); setBallDirection({ x: 2, y: 2 }); }; const endGame = ()=>{ setGameStarted(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center min-h-screen bg-[#f0f0f0] font-sans", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, !gameStarted ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("img", { src: "/かわいいねこ.jpg", alt: "A cute cat illustration.", className: "w-[400px] h-[400px] object-cover rounded-full", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#ffcc00] text-[#000] font-bold py-2 px-4 rounded hover:bg-[#ffb700]", onClick: startGame, __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "スタート")) : /*#__PURE__*/ React.createElement("div", { ref: gameAreaRef, className: "relative bg-white border w-[960px] h-[500px] mt-4 border-gray-300", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute bg-blue-500 w-[100px] h-[100px]", style: { top: `${racketPosition.top}px`, left: `${racketPosition.left}px` }, __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bg-red-500 w-[20px] h-[20px] rounded-full", style: { top: `${ballPosition.top}px`, left: `${ballPosition.left}px` }, __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-red-500 text-white font-bold py-2 px-4 rounded hover:bg-red-700", onClick: endGame, __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "終わり"))); }