function MainComponent() { const [ballPosition, setBallPosition] = React.useState({ x: 200, y: 300 }); const [paddlePosition, setPaddlePosition] = React.useState(160); const [gameOver, setGameOver] = React.useState(false); const [gameStarted, setGameStarted] = React.useState(false); const [ballDirection, setBallDirection] = React.useState({ x: 2, y: -2 }); const [blocks, setBlocks] = React.useState(Array.from({ length: 20 }).fill(true)); const [score, setScore] = React.useState(0); const [paddleImage, setPaddleImage] = React.useState(''); const [ballImage, setBallImage] = React.useState(''); const [blockImage, setBlockImage] = React.useState(''); const gameAreaRef = React.useRef(null); React.useEffect(()=>{ fetch('/integrations/dall-e-3/?prompt=futuristic+paddle+for+2D+block+breaker+game,+Japanese+style').then((response)=>response.json()).then((data)=>{ if (data.data && data.data.length > 0) { setPaddleImage(data.data[0]); } }); fetch('/integrations/dall-e-3/?prompt=cool+ball+for+2D+block+breaker+game,+Japanese+style').then((response)=>response.json()).then((data)=>{ if (data.data && data.data.length > 0) { setBallImage(data.data[0]); } }); fetch('/integrations/dall-e-3/?prompt=futuristic+block+for+2D+block+breaker+game,+Japanese+style').then((response)=>response.json()).then((data)=>{ if (data.data && data.data.length > 0) { setBlockImage(data.data[0]); } }); }, []); React.useEffect(()=>{ const handleMouseMove = (e)=>{ if (gameAreaRef.current) { const rect = gameAreaRef.current.getBoundingClientRect(); const x = e.clientX - rect.left; setPaddlePosition(Math.max(0, Math.min(x - 40, 320))); } }; if (gameStarted) { document.addEventListener('mousemove', handleMouseMove); } return ()=>{ document.removeEventListener('mousemove', handleMouseMove); }; }, [ gameStarted ]); React.useEffect(()=>{ if (gameStarted && !gameOver) { const gameLoop = setInterval(()=>{ setBallPosition((prev)=>{ const newX = prev.x + ballDirection.x; const newY = prev.y + ballDirection.y; if (newX <= 0 || newX >= 380) { setBallDirection((prev)=>({ ...prev, x: -prev.x })); } if (newY <= 0) { setBallDirection((prev)=>({ ...prev, y: -prev.y })); } if (newY >= 560 && newY <= 580 && newX >= paddlePosition && newX <= paddlePosition + 80) { setBallDirection((prev)=>({ ...prev, y: -prev.y })); } if (newY > 600) { setGameOver(true); return prev; } const blockWidth = 60; const blockHeight = 20; const blockX = Math.floor(newX / (blockWidth + 2)); const blockY = Math.floor(newY / (blockHeight + 2)); const blockIndex = blockY * 5 + blockX; if (blockIndex >= 0 && blockIndex < 20 && blocks[blockIndex] && newY <= 160) { setBlocks((prev)=>{ const newBlocks = [ ...prev ]; newBlocks[blockIndex] = false; return newBlocks; }); setBallDirection((prev)=>({ ...prev, y: -prev.y })); setScore((prev)=>prev + 1); } return { x: newX, y: newY }; }); }, 1000 / 60); return ()=>clearInterval(gameLoop); } }, [ gameStarted, gameOver, ballDirection, paddlePosition, blocks ]); const startGame = ()=>{ setGameStarted(true); setGameOver(false); setBallPosition({ x: 200, y: 300 }); setBallDirection({ x: 2, y: -2 }); setBlocks(Array.from({ length: 20 }).fill(true)); setScore(0); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col items-center justify-center font-crimson-text", style: { backgroundImage: "url('https://media.discordapp.net/attachments/1202214240279330816/1270625927079919686/momo_web_1224_background__nature_element_0_2491041b-4d2d-4f5d-82b8-34ee6e8f50b3.png?ex=66b4621c&is=66b3109c&hm=925208c8cadadf0d409b9e31795059c59469e98d0fb4626f1afe62e836e71790&=&format=webp&quality=lossless&width=1214&height=1214')", backgroundSize: 'cover', backgroundPosition: 'center' }, __source: { fileName: "", lineNumber: 117, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#00FFFF] mb-8", __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, "ブロック崩しゲーム"), /*#__PURE__*/ React.createElement("div", { className: "relative w-[400px] h-[600px] border-4 border-[#00FFFF] overflow-hidden bg-black bg-opacity-50", ref: gameAreaRef, __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute w-[80px] h-[20px]", style: { left: `${paddlePosition}px`, bottom: '16px', backgroundImage: `url(${paddleImage})`, backgroundSize: 'cover' }, __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute w-[20px] h-[20px] rounded-full", style: { top: `${ballPosition.y}px`, left: `${ballPosition.x}px`, backgroundImage: `url(${ballImage})`, backgroundSize: 'cover' }, __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center pt-8", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, blocks.map((block, index)=>block ? /*#__PURE__*/ React.createElement("div", { key: index, className: "w-[60px] h-[20px] m-1", style: { backgroundImage: `url(${blockImage})`, backgroundSize: 'cover' }, __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }) : null)), gameOver && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-black bg-opacity-75", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-4xl font-bold text-[#00FFFF]", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "ゲームオーバー"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-[#00FFFF] text-2xl", __source: { fileName: "", lineNumber: 143, columnNumber: 7 }, __self: this }, "スコア: ", score), /*#__PURE__*/ React.createElement("button", { className: "mt-4 px-6 py-2 bg-[#00FFFF] text-[#000033] font-bold rounded hover:bg-[#00CCCC] transition duration-300", onClick: startGame, __source: { fileName: "", lineNumber: 144, columnNumber: 7 }, __self: this }, gameStarted ? "リスタート" : "スタート")); }