function MainComponent() { const [playerPosition, setPlayerPosition] = useState({ x: 50, y: 50 }); const [isHiding, setIsHiding] = useState(false); const [enemies, setEnemies] = useState([ { x: 200, y: 200 }, { x: 400, y: 400 }, { x: 600, y: 300 }, { x: 300, y: 600 } ]); const [gameOver, setGameOver] = useState(false); const [gameCleared, setGameCleared] = useState(false); const [goal, setGoal] = useState({ x: 750, y: 750 }); const [hideTimeLeft, setHideTimeLeft] = useState(3); const [hideRechargeTime, setHideRechargeTime] = useState(0); const maxHideTime = 3; const rechargeDuration = 5; const [isSpotted, setIsSpotted] = useState(false); const [movementKeys, setMovementKeys] = useState({ ArrowUp: false, ArrowDown: false, ArrowLeft: false, ArrowRight: false }); const [gameStarted, setGameStarted] = useState(false); const [canHide, setCanHide] = useState(false); useEffect(()=>{ const handleStartGame = (e)=>{ if (!gameStarted && e.key === " ") { setGameStarted(true); } }; window.addEventListener("keydown", handleStartGame); return ()=>window.removeEventListener("keydown", handleStartGame); }, [ gameStarted ]); useEffect(()=>{ const handleKeyDown = (e)=>{ if (gameOver) return; if (movementKeys.hasOwnProperty(e.key)) { setMovementKeys((prev)=>({ ...prev, [e.key]: true })); } if (e.key === " " && !isHiding && hideTimeLeft > 0 && hideRechargeTime === 0 && canHide) { setIsHiding(true); setHideTimeLeft(maxHideTime); } }; const handleKeyUp = (e)=>{ if (movementKeys.hasOwnProperty(e.key)) { setMovementKeys((prev)=>({ ...prev, [e.key]: false })); } }; window.addEventListener("keydown", handleKeyDown); window.addEventListener("keyup", handleKeyUp); return ()=>{ window.removeEventListener("keydown", handleKeyDown); window.removeEventListener("keyup", handleKeyUp); }; }, [ gameOver, isHiding, hideTimeLeft, hideRechargeTime ]); useEffect(()=>{ if (gameOver) return; const movePlayer = setInterval(()=>{ const speed = 3; const newPosition = { ...playerPosition }; if (movementKeys.ArrowUp) newPosition.y = Math.max(0, newPosition.y - speed); if (movementKeys.ArrowDown) newPosition.y = Math.min(780, newPosition.y + speed); if (movementKeys.ArrowLeft) newPosition.x = Math.max(0, newPosition.x - speed); if (movementKeys.ArrowRight) newPosition.x = Math.min(780, newPosition.x + speed); if (newPosition.x !== playerPosition.x || newPosition.y !== playerPosition.y) { setPlayerPosition(newPosition); for (const enemy of enemies){ const distance = Math.sqrt(Math.pow(newPosition.x - enemy.x, 2) + Math.pow(newPosition.y - enemy.y, 2)); if (distance < 40 && !isHiding) { setGameOver(true); break; } } const goalDistance = Math.sqrt(Math.pow(newPosition.x - goal.x, 2) + Math.pow(newPosition.y - goal.y, 2)); if (goalDistance < 20) { setGameCleared(true); setGameOver(true); } } }, 8); return ()=>clearInterval(movePlayer); }, [ playerPosition, movementKeys, gameOver, enemies, isHiding ]); useEffect(()=>{ if (isHiding) { const timer = setInterval(()=>{ setHideTimeLeft((prev)=>{ if (prev <= 0) { setIsHiding(false); return 0; } return prev - 1; }); }, 1000); return ()=>clearInterval(timer); } }, [ isHiding ]); useEffect(()=>{ if (hideRechargeTime > 0) { const rechargeTimer = setInterval(()=>{ setHideRechargeTime((prev)=>{ const newTime = Math.max(0, prev - 1); if (newTime === 0) { setHideTimeLeft(maxHideTime); } return newTime; }); }, 1000); return ()=>clearInterval(rechargeTimer); } }, [ hideRechargeTime ]); useEffect(()=>{ if (hideTimeLeft === 0 && isHiding) { setIsHiding(false); setHideRechargeTime(rechargeDuration); } }, [ hideTimeLeft, isHiding ]); useEffect(()=>{ if (gameOver) return; const moveEnemies = setInterval(()=>{ setEnemies((prev)=>prev.map((enemy)=>{ const speed = 3; let moveX = enemy.x; let moveY = enemy.y; if (movementKeys.ArrowUp) moveY = enemy.y - speed; if (movementKeys.ArrowDown) moveY = enemy.y + speed; if (movementKeys.ArrowLeft) moveX = enemy.x - speed; if (movementKeys.ArrowRight) moveX = enemy.x + speed; return { x: Math.min(Math.max(0, moveX), 780), y: Math.min(Math.max(0, moveY), 780) }; })); }, 16); return ()=>clearInterval(moveEnemies); }, [ gameOver, playerPosition, isHiding ]); useEffect(()=>{ const checkIfSpotted = ()=>{ for (const enemy of enemies){ const distance = Math.sqrt(Math.pow(playerPosition.x - enemy.x, 2) + Math.pow(playerPosition.y - enemy.y, 2)); if (distance < 200 && !isHiding) { setIsSpotted(true); return; } } setIsSpotted(false); }; checkIfSpotted(); }, [ playerPosition, enemies, isHiding ]); useEffect(()=>{ if (gameStarted) { const timer = setTimeout(()=>{ setCanHide(true); }, 2000); return ()=>clearTimeout(timer); } }, [ gameStarted ]); return /*#__PURE__*/ React.createElement("div", { className: "relative w-[800px] h-[800px] bg-[#333] mx-auto mt-8 border-2 border-[#666]", __source: { fileName: "", lineNumber: 207, columnNumber: 5 }, __self: this }, !gameStarted && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-black/70", __source: { fileName: "", lineNumber: 209, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-white font-press-start", __source: { fileName: "", lineNumber: 210, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-4", __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }, "Game Start!!"), /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this }, "スペースキーを押してスタート"))), isSpotted && !gameOver && gameStarted && /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 w-16 h-16 bg-red-500 rounded flex items-center justify-center", __source: { fileName: "", lineNumber: 218, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white font-press-start text-2xl", __source: { fileName: "", lineNumber: 219, columnNumber: 11 }, __self: this }, "!")), gameOver ? /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50 text-white font-press-start", __source: { fileName: "", lineNumber: 224, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 225, columnNumber: 11 }, __self: this }, gameCleared ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "text-yellow-500 text-2xl", __source: { fileName: "", lineNumber: 228, columnNumber: 17 }, __self: this }, "★"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl text-yellow-500", __source: { fileName: "", lineNumber: 229, columnNumber: 17 }, __self: this }, "Game Clear!!")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-2xl", __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this }, "！"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 234, columnNumber: 17 }, __self: this }, "ゲームオーバー")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setGameOver(false); setGameCleared(false); setPlayerPosition({ x: 50, y: 50 }); setEnemies([ { x: 200, y: 200 }, { x: 400, y: 400 }, { x: 600, y: 300 }, { x: 300, y: 600 } ]); setIsHiding(false); }, className: "mt-4 px-4 py-2 bg-[#444] hover:bg-[#555] rounded", __source: { fileName: "", lineNumber: 237, columnNumber: 13 }, __self: this }, "リトライ"))) : null, gameStarted && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: `absolute w-8 h-8 rounded-full transition-all duration-[50ms] ease-linear ${isHiding ? "bg-[#555] opacity-50" : "bg-blue-500"}`, style: { transform: `translate(${playerPosition.x}px, ${playerPosition.y}px)` }, __source: { fileName: "", lineNumber: 260, columnNumber: 11 }, __self: this }), enemies.map((enemy, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "absolute w-8 h-8 bg-red-500 rounded-full transition-all duration-[50ms] ease-linear", style: { transform: `translate(${enemy.x}px, ${enemy.y}px)` }, __source: { fileName: "", lineNumber: 269, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full animate-pulse bg-red-600 rounded-full opacity-50", __source: { fileName: "", lineNumber: 276, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute w-6 h-6 bg-green-500 rounded", style: { transform: `translate(${goal.x}px, ${goal.y}px)` }, __source: { fileName: "", lineNumber: 279, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 left-2 text-white font-press-start text-sm", __source: { fileName: "", lineNumber: 285, columnNumber: 11 }, __self: this }, "操作方法：矢印キーで移動、スペースで隠れる"), /*#__PURE__*/ React.createElement("div", { className: "absolute top-12 left-2 text-white font-press-start text-sm space-y-2", __source: { fileName: "", lineNumber: 288, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 289, columnNumber: 13 }, __self: this }, "隠れ残り時間: ", isHiding ? hideTimeLeft : "-", "秒"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 290, columnNumber: 13 }, __self: this }, "再充電時間: ", hideRechargeTime > 0 ? hideRechargeTime : "完了", "秒")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 294, columnNumber: 11 }, __self: this }, ` @keyframes smoothMove { from { transform: translate(var(--fromX), var(--fromY)); } to { transform: translate(var(--toX), var(--toY)); } } `))); }