function MainComponent({ initialGrid, onGameComplete }) { const [grid, setGrid] = React.useState(initialGrid || generateInitialGrid()); const [score, setScore] = React.useState(0); const [turns, setTurns] = React.useState(0); const [combo, setCombo] = React.useState(0); const [maxCombo, setMaxCombo] = React.useState(0); const colors = [ 'red', 'blue', 'green', 'yellow', 'purple' ]; function generateInitialGrid() { return Array.from({ length: 15 }).fill().map(()=>Array.from({ length: 15 }).fill().map(()=>colors[Math.floor(Math.random() * colors.length)])); } function handleSwap(row1, col1, row2, col2) { if (!isAdjacent(row1, col1, row2, col2)) return; const newGrid = grid.map((row)=>[ ...row ]); [newGrid[row1][col1], newGrid[row2][col2]] = [ newGrid[row2][col2], newGrid[row1][col1] ]; setGrid(newGrid); setTurns(turns + 1); checkMatches(newGrid); } function isAdjacent(row1, col1, row2, col2) { return Math.abs(row1 - row2) + Math.abs(col1 - col2) === 1; } function checkMatches(currentGrid) { let matchFound = false; const newGrid = currentGrid.map((row)=>[ ...row ]); let currentCombo = 0; for(let i = 0; i < 15; i++){ for(let j = 0; j < 15; j++){ const matches = findMatches(newGrid, i, j); if (matches.length >= 6) { matchFound = true; currentCombo++; setScore((prevScore)=>prevScore + matches.length * 10 * currentCombo); if (matches.length >= 7) { newGrid[i][j] = 'special'; matches.slice(1).forEach(([r, c])=>{ newGrid[r][c] = 'silver'; }); clearCross(newGrid, i, j); } else { matches.forEach(([r, c])=>{ newGrid[r][c] = 'silver'; }); } } } } if (matchFound) { setCombo(currentCombo); setMaxCombo((prevMax)=>Math.max(prevMax, currentCombo)); applyGravity(newGrid); setGrid(newGrid); setTimeout(()=>checkMatches(newGrid), 500); } else { setCombo(0); checkSpecialElements(newGrid); } } function findMatches(grid, row, col) { const color = grid[row][col]; if (color === 'silver' || color === 'gold' || color === 'special') return []; const matches = [ [ row, col ] ]; const visited = new Set(); function dfs(r, c) { const key = `${r},${c}`; if (r < 0 || r >= 15 || c < 0 || c >= 15 || visited.has(key) || grid[r][c] !== color) return; visited.add(key); matches.push([ r, c ]); dfs(r - 1, c); dfs(r + 1, c); dfs(r, c - 1); dfs(r, c + 1); } dfs(row, col); return matches; } function clearCross(grid, row, col) { for(let i = 0; i < 15; i++){ if (i !== col) grid[row][i] = 'silver'; if (i !== row) grid[i][col] = 'silver'; } } function applyGravity(grid) { for(let col = 0; col < 15; col++){ let emptyRow = 14; for(let row = 14; row >= 0; row--){ if (grid[row][col] !== 'silver') { if (row !== emptyRow) { grid[emptyRow][col] = grid[row][col]; grid[row][col] = 'silver'; } emptyRow--; } } for(let row = emptyRow; row >= 0; row--){ grid[row][col] = colors[Math.floor(Math.random() * colors.length)]; } } } function checkSpecialElements(grid) { let goldCreated = false; let heartCreated = false; for(let i = 0; i < 14; i++){ for(let j = 0; j < 14; j++){ if (grid[i][j] === 'silver' && grid[i + 1][j] === 'silver') { grid[i][j] = 'gold'; grid[i + 1][j] = 'silver'; goldCreated = true; } if (grid[i][j] === 'silver' && grid[i][j + 1] === 'silver') { grid[i][j] = 'gold'; grid[i][j + 1] = 'silver'; goldCreated = true; } if (grid[i][j] === 'gold' && grid[i + 1][j] === 'gold') { grid[i][j] = 'heart'; grid[i + 1][j] = 'silver'; heartCreated = true; } if (grid[i][j] === 'gold' && grid[i][j + 1] === 'gold') { grid[i][j] = 'heart'; grid[i][j + 1] = 'silver'; heartCreated = true; } } } if (goldCreated || heartCreated) { setGrid([ ...grid ]); } if (heartCreated) { onGameComplete(score); } } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 157, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-2xl font-bold", __source: { fileName: "", lineNumber: 158, columnNumber: 7 }, __self: this }, "パズルゲーム"), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 159, columnNumber: 7 }, __self: this }, "スコア: ", score), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 160, columnNumber: 7 }, __self: this }, "ターン数: ", turns), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 161, columnNumber: 7 }, __self: this }, "コンボ: ", combo), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 162, columnNumber: 7 }, __self: this }, "最大コンボ: ", maxCombo), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-15 gap-1 p-2 bg-white rounded shadow-lg", __source: { fileName: "", lineNumber: 163, columnNumber: 7 }, __self: this }, grid.map((row, rowIndex)=>row.map((cell, colIndex)=>/*#__PURE__*/ React.createElement("div", { key: `${rowIndex}-${colIndex}`, className: `w-8 h-8 rounded cursor-pointer ${getColorClass(cell)}`, onClick: ()=>{ if (cell !== 'silver' && cell !== 'gold' && cell !== 'special' && cell !== 'heart') { const [selectedRow, selectedCol] = [ rowIndex, colIndex ]; const adjacentCells = [ [ selectedRow - 1, selectedCol ], [ selectedRow + 1, selectedCol ], [ selectedRow, selectedCol - 1 ], [ selectedRow, selectedCol + 1 ] ]; for (const [adjRow, adjCol] of adjacentCells){ if (adjRow >= 0 && adjRow < 15 && adjCol >= 0 && adjCol < 15) { if (grid[adjRow][adjCol] !== 'silver' && grid[adjRow][adjCol] !== 'gold' && grid[adjRow][adjCol] !== 'special' && grid[adjRow][adjCol] !== 'heart') { handleSwap(selectedRow, selectedCol, adjRow, adjCol); break; } } } } }, __source: { fileName: "", lineNumber: 166, columnNumber: 13 }, __self: this }))))); } function getColorClass(color) { switch(color){ case 'red': return 'bg-red-500'; case 'blue': return 'bg-blue-500'; case 'green': return 'bg-green-500'; case 'yellow': return 'bg-yellow-500'; case 'purple': return 'bg-purple-500'; case 'silver': return 'bg-gray-300'; case 'gold': return 'bg-yellow-300'; case 'special': return 'bg-pink-500'; case 'heart': return 'bg-red-300'; default: return 'bg-gray-100'; } } function StoryComponent() { const initialGrid = [ [ 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple' ], [ 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red' ], [ 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue' ], [ 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green' ], [ 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow' ], [ 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple' ], [ 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red' ], [ 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue' ], [ 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green' ], [ 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow' ], [ 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple' ], [ 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red' ], [ 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue' ], [ 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green' ], [ 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow', 'purple', 'red', 'blue', 'green', 'yellow' ] ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 232, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { initialGrid: initialGrid, onGameComplete: (finalScore)=>alert(`ゲームクリア！最終スコア: ${finalScore}`), __source: { fileName: "", lineNumber: 233, columnNumber: 7 }, __self: this })); }