"use client"; function MainComponent() { const [playerPos, setPlayerPos] = React.useState({ x: 50, y: 50 }); const [playerCaught, setPlayerCaught] = React.useState(false); const [gameOver, setGameOver] = React.useState(false); const [gameClear, setGameClear] = React.useState(false); const [enemies, setEnemies] = React.useState([]); const [obstacles, setObstacles] = React.useState([]); const [goal, setGoal] = React.useState({ x: 400, y: 50 }); const [powerUps, setPowerUps] = React.useState([]); const [score, setScore] = React.useState(0); const [timeLeft, setTimeLeft] = React.useState(60); const [invincible, setInvincible] = React.useState(false); const [speed, setSpeed] = React.useState(10); const [playerIcon, setPlayerIcon] = React.useState("(｀･ω･´)"); const startGame = ()=>{ const newEnemies = Array.from({ length: 4 }, ()=>({ x: Math.random() * 470, y: Math.random() * 470, direction: { x: Math.random() * 2 - 1, y: Math.random() * 2 - 1 }, speed: 20 })); const superFastEnemy = { x: Math.random() * 470, y: Math.random() * 470, direction: { x: Math.random() * 2 - 1, y: Math.random() * 2 - 1 }, speed: 40 }; const newObstacles = Array.from({ length: 10 }, ()=>({ x: Math.random() * 470, y: Math.random() * 470 })); const newPowerUps = Array.from({ length: 2 }, ()=>({ x: Math.random() * 470, y: Math.random() * 470, type: Math.random() > 0.5 ? "invincibility" : "speed" })); setEnemies([ ...newEnemies, superFastEnemy ]); setObstacles(newObstacles); setPowerUps(newPowerUps); setPlayerPos({ x: 50, y: 50 }); setPlayerCaught(false); setGameOver(false); setGameClear(false); setGoal({ x: Math.random() * 470, y: Math.random() * 470 }); setScore(0); setTimeLeft(60); setInvincible(false); setSpeed(10); setPlayerIcon("(｀･ω･´)"); }; const handleKeyDown = (e)=>{ if (gameOver || gameClear) return; let movement = speed; let newPos = { ...playerPos }; if (e.key === "ArrowUp") newPos.y = Math.max(0, newPos.y - movement); if (e.key === "ArrowDown") newPos.y = Math.min(470, newPos.y + movement); if (e.key === "ArrowLeft") newPos.x = Math.max(0, newPos.x - movement); if (e.key === "ArrowRight") newPos.x = Math.min(470, newPos.x + movement); obstacles.forEach((obstacle)=>{ if (checkCollision(newPos, obstacle)) { newPos = playerPos; } }); enemies.forEach((enemy)=>{ if (checkCollision(newPos, enemy) && !invincible) { setPlayerCaught(true); setGameOver(true); } }); powerUps.forEach((powerUp, index)=>{ if (checkCollision(newPos, powerUp)) { applyPowerUp(powerUp.type); setPowerUps((prev)=>prev.filter((_, i)=>i !== index)); } }); if (checkCollision(newPos, goal)) { setGameClear(true); } setPlayerPos(newPos); }; const applyPowerUp = (type)=>{ if (type === "invincibility") { setInvincible(true); setPlayerIcon("(`・ω・´)ｷﾘｯ✧"); setTimeout(()=>{ setInvincible(false); setPlayerIcon("(｀･ω･´)"); }, 5000); } else if (type === "speed") { setSpeed(20); setPlayerIcon("(`・ω・´)ｷﾘｯ✧"); setTimeout(()=>{ setSpeed(10); setPlayerIcon("(｀･ω･´)"); }, 5000); } }; const checkCollision = (obj1, obj2)=>{ return Math.abs(obj1.x - obj2.x) < 30 && Math.abs(obj1.y - obj2.y) < 30; }; React.useEffect(()=>{ const moveEnemies = ()=>{ setEnemies((prevEnemies)=>prevEnemies.map((enemy)=>{ let newX = enemy.x + enemy.direction.x * enemy.speed; let newY = enemy.y + enemy.direction.y * enemy.speed; if (newX < 0 || newX > 470) enemy.direction.x *= -1; if (newY < 0 || newY > 470) enemy.direction.y *= -1; return { ...enemy, x: Math.max(0, Math.min(470, newX)), y: Math.max(0, Math.min(470, newY)) }; })); }; if (!gameOver && !gameClear) { const interval = setInterval(moveEnemies, 500); return ()=>clearInterval(interval); } }, [ enemies, gameOver, gameClear ]); React.useEffect(()=>{ window.addEventListener("keydown", handleKeyDown); return ()=>window.removeEventListener("keydown", handleKeyDown); }, [ playerPos, gameOver, gameClear ]); React.useEffect(()=>{ const timer = setInterval(()=>{ setTimeLeft((prev)=>prev - 1); }, 1000); if (timeLeft <= 0) { setGameOver(true); clearInterval(timer); } return ()=>clearInterval(timer); }, [ timeLeft ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-full w-full bg-[#ffffff]", __source: { fileName: "", lineNumber: 164, columnNumber: 5 }, __self: this }, !gameOver && !gameClear && /*#__PURE__*/ React.createElement("div", { className: "relative w-[500px] h-[500px] bg-[#ffffff] border border-black", __source: { fileName: "", lineNumber: 166, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { left: `${playerPos.x}px`, top: `${playerPos.y}px`, color: playerCaught ? "#FF0000" : "#000000" }, className: "absolute", __source: { fileName: "", lineNumber: 167, columnNumber: 11 }, __self: this }, playerCaught ? "(´・ω・`)" : playerIcon), enemies.map((enemy, index)=>{ const enemyColor = enemy.speed === 40 ? "#FF4500" : "#0000FF"; const enemyIcon = enemy.speed === 40 ? "(゜∀゜)" : "＼(^o^)／"; return /*#__PURE__*/ React.createElement("div", { key: index, style: { left: `${enemy.x}px`, top: `${enemy.y}px`, color: enemyColor }, className: "absolute", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, enemyIcon); }), obstacles.map((obstacle, index)=>/*#__PURE__*/ React.createElement("div", { key: index, style: { left: `${obstacle.x}px`, top: `${obstacle.y}px`, color: "#0000FF" }, className: "absolute", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, "◆")), powerUps.map((powerUp, index)=>{ const powerUpColor = powerUp.type === "invincibility" ? "#FFD700" : "#FF00FF"; const powerUpIcon = powerUp.type === "invincibility" ? "★" : "⚡"; return /*#__PURE__*/ React.createElement("div", { key: index, style: { left: `${powerUp.x}px`, top: `${powerUp.y}px`, color: powerUpColor }, className: "absolute", __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, powerUpIcon); }), /*#__PURE__*/ React.createElement("div", { style: { left: `${goal.x}px`, top: `${goal.y}px`, color: "#00FF00" }, className: "absolute", __source: { fileName: "", lineNumber: 224, columnNumber: 11 }, __self: this }, "Goal")), gameOver && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 237, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold text-[#FF0000] font-crimson-text", __source: { fileName: "", lineNumber: 238, columnNumber: 11 }, __self: this }, "GAME OVER"), /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "mt-4 px-4 py-2 bg-[#000000] text-[#FFFFFF] font-crimson-text", __source: { fileName: "", lineNumber: 239, columnNumber: 11 }, __self: this }, "リトライ")), gameClear && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 248, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold text-[#00FF00] font-crimson-text", __source: { fileName: "", lineNumber: 249, columnNumber: 11 }, __self: this }, "GAME Clear！"), /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "mt-4 px-4 py-2 bg-[#000000] text-[#FFFFFF] font-crimson-text", __source: { fileName: "", lineNumber: 250, columnNumber: 11 }, __self: this }, "リトライ")), !gameOver && !gameClear && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 259, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "mt-4 px-4 py-2 bg-[#000000] text-[#FFFFFF] font-crimson-text", __source: { fileName: "", lineNumber: 260, columnNumber: 11 }, __self: this }, "スタート"), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-2xl font-crimson-text", __source: { fileName: "", lineNumber: 266, columnNumber: 11 }, __self: this }, "Score: ", score), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-2xl font-crimson-text", __source: { fileName: "", lineNumber: 267, columnNumber: 11 }, __self: this }, "Time Left: ", timeLeft, "s"))); }