function MainComponent() { const [fruits, setFruits] = React.useState([]); const [score, setScore] = React.useState(0); const [gameOver, setGameOver] = React.useState(false); const fruitTypes = [ "🍎", "🍊", "🍋", "🍒", "🍇", "🍉", "🍓", "🍈", "🍍", "🥝" ]; const nextFruitSize = (type)=>{ switch(type){ case '🍒': return '🍓'; case '🍈': return '🍉'; case '🍉': return '🍇'; default: return type; } }; const startGame = ()=>{ setFruits([]); setScore(0); setGameOver(false); }; const addFruit = (e)=>{ if (gameOver) return; const newFruit = { type: fruitTypes[Math.floor(Math.random() * fruitTypes.length)], id: Date.now(), left: e.clientX - e.target.getBoundingClientRect().left - 20, top: 0, falling: true }; setFruits((prevFruits)=>[ ...prevFruits, newFruit ]); setTimeout(()=>{ handleFruitFall(newFruit.id); }, 10); }; const handleFruitFall = (fruitId)=>{ let collision = false; setFruits((prevFruits)=>{ return prevFruits.map((fruit)=>{ if (fruit.id === fruitId) { let newTop = fruit.top + 50; if (newTop >= 550 || detectCollision({ ...fruit, top: newTop })) { newTop = 550; collision = true; } return { ...fruit, top: newTop, falling: !collision }; } return fruit; }); }); }; React.useEffect(()=>{ const interval = setInterval(()=>{ setFruits((prevFruits)=>{ return prevFruits.map((fruit)=>{ if (fruit.falling) { let newTop = fruit.top + 5; if (newTop >= 550 || detectCollision({ ...fruit, top: newTop })) { newTop = Math.min(newTop, 550); return { ...fruit, top: newTop, falling: false }; } return { ...fruit, top: newTop }; } return fruit; }); }); }, 50); return ()=>clearInterval(interval); }, [ fruits ]); const detectCollision = (currentFruit)=>{ return fruits.some((fruit)=>{ if (fruit.id !== currentFruit.id) { const distance = Math.hypot(fruit.left - currentFruit.left, fruit.top - currentFruit.top); if (distance < 50 && fruit.type === currentFruit.type) { setScore((prevScore)=>prevScore + 10); setTimeout(()=>{ setFruits((prevFruits)=>prevFruits.map((f)=>f.id === fruit.id ? { ...f, type: nextFruitSize(f.type), falling: true } : f)); }, 10); } return distance < 50; } return false; }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", onClick: addFruit, __source: { fileName: "", lineNumber: 98, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "mb-4", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, "スイカゲーム")), /*#__PURE__*/ React.createElement("div", { className: "relative w-[400px] h-[600px] bg-white border-4 border-black", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 left-2", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-crimson-text", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "点数: ", score)), /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 right-2 flex space-x-2", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white font-semibold rounded", name: "start-button", onClick: startGame, __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, "スタート"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-red-500 text-white font-semibold rounded", name: "reset-button", onClick: startGame, __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "リセット")), /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col justify-end items-center", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full bg-basket bg-cover bg-center relative", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, fruits.map((fruit)=>/*#__PURE__*/ React.createElement("div", { key: fruit.id, className: `absolute text-4xl transition-all ease-linear ${fruit.falling ? 'fall-animation' : ''}`, style: { left: fruit.left, top: fruit.top }, __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, fruit.type)))))); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 128, columnNumber: 1 }, __self: this }, ` @keyframes fall { to { top: 550px; } } .fall-animation { animation: fall 1s linear forwards; } `);