function MainComponent() { const [health, setHealth] = React.useState(100); const [ammo, setAmmo] = React.useState(30); const [bullets, setBullets] = React.useState([]); const [playerPosition, setPlayerPosition] = React.useState({ top: 450, left: 225 }); const [enemies, setEnemies] = React.useState([ { id: 1, position: { top: 50, left: 50 } }, { id: 2, position: { top: 100, left: 200 } }, { id: 3, position: { top: 150, left: 350 } }, { id: 4, position: { top: 200, left: 100 } }, { id: 5, position: { top: 250, left: 300 } } ]); const [enemyBullets, setEnemyBullets] = React.useState([]); const [foods, setFoods] = React.useState([ { id: 1, position: { top: 300, left: 150 } }, { id: 2, position: { top: 50, left: 300 } } ]); const [gameOver, setGameOver] = React.useState(false); const [gameClear, setGameClear] = React.useState(false); const [level, setLevel] = React.useState(1); const movePlayer = (e)=>{ if (e.key === 'ArrowLeft' && playerPosition.left > 0) { setPlayerPosition({ ...playerPosition, left: playerPosition.left - 20 }); } if (e.key === 'ArrowRight' && playerPosition.left < 450) { setPlayerPosition({ ...playerPosition, left: playerPosition.left + 20 }); } }; const shoot = ()=>{ if (ammo > 0) { setAmmo(ammo - 1); setBullets([ ...bullets, { id: Date.now(), position: { top: playerPosition.top, left: playerPosition.left + 20 } } ]); } }; React.useEffect(()=>{ const decreaseHealthInterval = setInterval(()=>{ setHealth((prev)=>prev - 1); }, 1000); return ()=>clearInterval(decreaseHealthInterval); }, []); React.useEffect(()=>{ const bulletInterval = setInterval(()=>{ setBullets((prevBullets)=>prevBullets.map((bullet)=>({ ...bullet, position: { top: bullet.position.top - 10, left: bullet.position.left } }))); setEnemyBullets((prevEnemyBullets)=>prevEnemyBullets.map((bullet)=>({ ...bullet, position: { top: bullet.position.top + 10, left: bullet.position.left } }))); }, 100); return ()=>clearInterval(bulletInterval); }, []); React.useEffect(()=>{ const enemyInterval = setInterval(()=>{ setEnemies((prevEnemies)=>prevEnemies.map((enemy)=>({ ...enemy, position: { top: enemy.position.top + 10, left: enemy.position.left } })).filter((enemy)=>enemy.position.top < 500)); }, 1000 - 100 * level); return ()=>clearInterval(enemyInterval); }, [ level ]); React.useEffect(()=>{ const shootingInterval = setInterval(()=>{ setEnemyBullets((prevEnemyBullets)=>[ ...prevEnemyBullets, ...enemies.map((enemy)=>({ id: Date.now() + Math.random(), position: { top: enemy.position.top + 50, left: enemy.position.left + 20 } })) ]); }, 2000); return ()=>clearInterval(shootingInterval); }, [ enemies ]); React.useEffect(()=>{ setEnemies((prevEnemies)=>prevEnemies.filter((enemy)=>{ const hit = bullets.some((bullet)=>bullet.position.top <= enemy.position.top + 50 && bullet.position.left >= enemy.position.left && bullet.position.left <= enemy.position.left + 50); return !hit; })); }, [ bullets ]); React.useEffect(()=>{ const hit = enemyBullets.some((bullet)=>bullet.position.top >= playerPosition.top && bullet.position.left >= playerPosition.left && bullet.position.left <= playerPosition.left + 50); if (hit) { setGameOver(true); } }, [ enemyBullets, playerPosition ]); React.useEffect(()=>{ foods.forEach((food)=>{ if (playerPosition.top <= food.position.top + 50 && playerPosition.left >= food.position.left && playerPosition.left <= food.position.left + 50) { setFoods((prevFoods)=>prevFoods.filter((f)=>f.id !== food.id)); setHealth((prevHealth)=>Math.min(prevHealth + 20, 100)); } }); }, [ playerPosition, foods ]); React.useEffect(()=>{ if (enemies.length === 0) { setGameClear(true); } }, [ enemies ]); const nextLevel = ()=>{ setLevel(level + 1); setGameClear(false); setEnemies([ { id: 1, position: { top: 50, left: 50 } }, { id: 2, position: { top: 100, left: 200 } }, { id: 3, position: { top: 150, left: 350 } }, { id: 4, position: { top: 200, left: 100 } }, { id: 5, position: { top: 250, left: 300 } } ]); setAmmo(30); setBullets([]); setEnemyBullets([]); setGameOver(false); setFoods([ { id: 1, position: { top: 300, left: 150 } }, { id: 2, position: { top: 50, left: 300 } } ]); setHealth(100); }; React.useEffect(()=>{ const handleKeyDown = (e)=>{ movePlayer(e); if (e.code === 'Space') { shoot(); } }; window.addEventListener('keydown', handleKeyDown); return ()=>{ window.removeEventListener('keydown', handleKeyDown); }; }, [ playerPosition, ammo ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0f0f0f] text-white font-crimson-text flex flex-col items-center", __source: { fileName: "", lineNumber: 168, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-[#1a1a1a] p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 169, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl", __source: { fileName: "", lineNumber: 170, columnNumber: 9 }, __self: this }, "縦スクロールアクションゲーム"), /*#__PURE__*/ React.createElement("nav", { className: "space-x-4", __source: { fileName: "", lineNumber: 171, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#00ffff]", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, "ホーム"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#00ffff]", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, "特徴"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#00ffff]", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, "連絡先"))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow flex flex-col items-center justify-center px-4 text-center", __source: { fileName: "", lineNumber: 177, columnNumber: 7 }, __self: this }, gameOver ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl mb-8", __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }, "ゲームオーバー"), /*#__PURE__*/ React.createElement("button", { className: "mt-8 px-4 py-2 bg-red-600 rounded", onClick: nextLevel, __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, "やり直す")) : gameClear ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 186, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl mb-8", __source: { fileName: "", lineNumber: 187, columnNumber: 13 }, __self: this }, "ゲームクリア!"), /*#__PURE__*/ React.createElement("button", { className: "mt-8 px-4 py-2 bg-green-600 rounded", onClick: nextLevel, __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }, "次のレベル")) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 193, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl mb-8", __source: { fileName: "", lineNumber: 194, columnNumber: 13 }, __self: this }, "2Dアクションを楽しもう！"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4 mb-8", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 196, columnNumber: 15 }, __self: this }, "健康: ", health), /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 197, columnNumber: 15 }, __self: this }, "弾薬: ", ammo), /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, "敵: ", enemies.length)), /*#__PURE__*/ React.createElement("div", { className: "relative w-[500px] h-[500px] bg-[#212121] mt-8 overflow-hidden", __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute w-[50px] h-[50px] bg-blue-500", style: { top: `${playerPosition.top}px`, left: `${playerPosition.left}px` }, __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }), bullets.map((bullet)=>{ const bulletStyle = { top: `${bullet.position.top}px`, left: `${bullet.position.left}px` }; return /*#__PURE__*/ React.createElement("div", { key: bullet.id, className: "absolute w-[10px] h-[10px] bg-yellow-300", style: bulletStyle, __source: { fileName: "", lineNumber: 208, columnNumber: 19 }, __self: this }); }), enemies.map((enemy)=>{ const enemyStyle = { top: `${enemy.position.top}px`, left: `${enemy.position.left}px` }; return /*#__PURE__*/ React.createElement("div", { key: enemy.id, className: "absolute w-[50px] h-[50px] bg-red-600", style: enemyStyle, __source: { fileName: "", lineNumber: 218, columnNumber: 19 }, __self: this }); }), enemyBullets.map((bullet)=>{ const enemyBulletStyle = { top: `${bullet.position.top}px`, left: `${bullet.position.left}px` }; return /*#__PURE__*/ React.createElement("div", { key: bullet.id, className: "absolute w-[10px] h-[10px] bg-red-300", style: enemyBulletStyle, __source: { fileName: "", lineNumber: 228, columnNumber: 19 }, __self: this }); }), foods.map((food)=>{ const foodStyle = { top: `${food.position.top}px`, left: `${food.position.left}px` }; return /*#__PURE__*/ React.createElement("div", { key: food.id, className: "absolute w-[30px] h-[30px] bg-green-500", style: foodStyle, __source: { fileName: "", lineNumber: 238, columnNumber: 19 }, __self: this }); })))), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-[#1a1a1a] p-4 text-center", __source: { fileName: "", lineNumber: 249, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 250, columnNumber: 9 }, __self: this }, "© 2023 縦スクロールアクションゲーム. All rights reserved."))); }