function NewComponent({ color }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full", style: { backgroundColor: color }, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function NewComponentStory() { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { color: "red", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent, { color: "blue", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent, { color: "green", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent, { color: "yellow", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent, { color: "purple", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this })); } function NewComponent2({ onClick }) { return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "ゲームスタート"); } function NewComponent2Story() { const startGame = ()=>{ console.log("Game started"); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent2, { onClick: startGame, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [gameState, setGameState] = React.useState('initial'); const [board, setBoard] = React.useState(Array.from({ length: 20 }).fill().map(()=>Array.from({ length: 10 }).fill(0))); const [currentPiece, setCurrentPiece] = React.useState(null); const [nextPiece, setNextPiece] = React.useState(null); const [score, setScore] = React.useState(0); const [fallSpeed, setFallSpeed] = React.useState(500); const colors = [ 'bg-[#FF6B6B]', 'bg-[#4ECDC4]', 'bg-[#45B7D1]', 'bg-[#FFA07A]', 'bg-[#98D8C8]', 'bg-[#F7DC6F]' ]; const pieces = [ [ [ 1, 1, 1, 1 ] ], [ [ 1, 1 ], [ 1, 1 ] ], [ [ 1, 1, 1 ], [ 0, 1, 0 ] ], [ [ 1, 1, 1 ], [ 1, 0, 0 ] ], [ [ 1, 1, 1 ], [ 0, 0, 1 ] ], [ [ 1, 1, 0 ], [ 0, 1, 1 ] ], [ [ 0, 1, 1 ], [ 1, 1, 0 ] ] ]; React.useEffect(()=>{ if (gameState === 'playing') { const intervalId = setInterval(moveDown, fallSpeed); const speedIncreaseId = setInterval(()=>{ setFallSpeed((prevSpeed)=>Math.max(prevSpeed * 0.99, 100)); }, 10000); return ()=>{ clearInterval(intervalId); clearInterval(speedIncreaseId); }; } }, [ gameState, fallSpeed ]); const startGame = ()=>{ setGameState('playing'); setBoard(Array.from({ length: 20 }).fill().map(()=>Array.from({ length: 10 }).fill(0))); setScore(0); setFallSpeed(500); spawnPiece(); }; const spawnPiece = ()=>{ const newPiece = { shape: nextPiece ? nextPiece.shape : pieces[Math.floor(Math.random() * pieces.length)], color: nextPiece ? nextPiece.color : colors[Math.floor(Math.random() * colors.length)], x: 3, y: 0 }; setCurrentPiece(newPiece); setNextPiece({ shape: pieces[Math.floor(Math.random() * pieces.length)], color: colors[Math.floor(Math.random() * colors.length)] }); }; const moveDown = ()=>{ if (canMove(currentPiece.x, currentPiece.y + 1)) { setCurrentPiece({ ...currentPiece, y: currentPiece.y + 1 }); } else { placePiece(); } }; const moveLeft = ()=>{ if (canMove(currentPiece.x - 1, currentPiece.y)) { setCurrentPiece({ ...currentPiece, x: currentPiece.x - 1 }); } }; const moveRight = ()=>{ if (canMove(currentPiece.x + 1, currentPiece.y)) { setCurrentPiece({ ...currentPiece, x: currentPiece.x + 1 }); } }; const rotate = ()=>{ const rotated = currentPiece.shape[0].map((_, index)=>currentPiece.shape.map((row)=>row[index]).reverse()); if (canMove(currentPiece.x, currentPiece.y, rotated)) { setCurrentPiece({ ...currentPiece, shape: rotated }); } }; const canMove = (x, y, shape = currentPiece.shape)=>{ for(let row = 0; row < shape.length; row++){ for(let col = 0; col < shape[row].length; col++){ if (shape[row][col] && (y + row >= 20 || x + col < 0 || x + col >= 10 || board[y + row][x + col])) { return false; } } } return true; }; const placePiece = ()=>{ const newBoard = [ ...board ]; for(let row = 0; row < currentPiece.shape.length; row++){ for(let col = 0; col < currentPiece.shape[row].length; col++){ if (currentPiece.shape[row][col]) { newBoard[currentPiece.y + row][currentPiece.x + col] = currentPiece.color; } } } setBoard(newBoard); checkLines(); spawnPiece(); }; const checkLines = ()=>{ let linesToClear = []; for(let row = 0; row < 20; row++){ if (board[row].every((cell)=>cell !== 0)) { linesToClear.push(row); } } if (linesToClear.length > 0) { clearLines(linesToClear); } }; const clearLines = (lines)=>{ const newBoard = board.map((row)=>[ ...row ]); lines.forEach((line)=>{ newBoard[line] = newBoard[line].map(()=>'bg-white animate-pulse'); }); setBoard(newBoard); setTimeout(()=>{ const clearedBoard = board.filter((_, index)=>!lines.includes(index)); const newLines = Array(lines.length).fill().map(()=>Array.from({ length: 10 }).fill(0)); setBoard([ ...newLines, ...clearedBoard ]); setScore((prevScore)=>prevScore + lines.length * 100); }, 500); }; const handleKeyDown = (e)=>{ if (gameState !== 'playing') return; switch(e.key){ case 'ArrowLeft': moveLeft(); break; case 'ArrowRight': moveRight(); break; case 'ArrowUp': rotate(); break; case 'ArrowDown': setFallSpeed(100); break; } }; const handleKeyUp = (e)=>{ if (gameState !== 'playing') return; if (e.key === 'ArrowDown') { setFallSpeed((prevSpeed)=>Math.max(prevSpeed, 100)); } }; React.useEffect(()=>{ window.addEventListener('keydown', handleKeyDown); window.addEventListener('keyup', handleKeyUp); return ()=>{ window.removeEventListener('keydown', handleKeyDown); window.removeEventListener('keyup', handleKeyUp); }; }, [ currentPiece, board, gameState ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F0F0] font-sans relative overflow-hidden", __source: { fileName: "", lineNumber: 165, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 z-0", __source: { fileName: "", lineNumber: 166, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { color: "#E0E0E0", __source: { fileName: "", lineNumber: 167, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 z-0 opacity-30", __source: { fileName: "", lineNumber: 169, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full grid grid-cols-10 grid-rows-10", __source: { fileName: "", lineNumber: 170, columnNumber: 9 }, __self: this }, Array.from({ length: 100 }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border border-[#D0D0D0] transform rotate-45", __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 bg-white bg-opacity-80 p-8 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 176, columnNumber: 7 }, __self: this }, gameState === 'initial' ? /*#__PURE__*/ React.createElement(NewComponent2, { onClick: startGame, __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mr-0 md:mr-8 mb-4 md:mb-0", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-10 gap-px bg-[#D0D0D0] p-px rounded", __source: { fileName: "", lineNumber: 182, columnNumber: 15 }, __self: this }, board.map((row, rowIndex)=>row.map((cell, colIndex)=>/*#__PURE__*/ React.createElement("div", { key: `${rowIndex}-${colIndex}`, className: `w-6 h-6 ${cell || 'bg-white'} rounded-sm`, __source: { fileName: "", lineNumber: 185, columnNumber: 21 }, __self: this }, currentPiece && currentPiece.shape[rowIndex - currentPiece.y]?.[colIndex - currentPiece.x] && /*#__PURE__*/ React.createElement("div", { className: `w-full h-full ${currentPiece.color} rounded-sm`, __source: { fileName: "", lineNumber: 190, columnNumber: 25 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 199, columnNumber: 17 }, __self: this }, "次のブロック"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-px bg-[#D0D0D0] p-px rounded", __source: { fileName: "", lineNumber: 200, columnNumber: 17 }, __self: this }, nextPiece && nextPiece.shape.map((row, rowIndex)=>row.map((cell, colIndex)=>/*#__PURE__*/ React.createElement("div", { key: `next-${rowIndex}-${colIndex}`, className: `w-6 h-6 ${cell ? nextPiece.color : 'bg-white'} rounded-sm`, __source: { fileName: "", lineNumber: 203, columnNumber: 23 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }, "スコア"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 213, columnNumber: 17 }, __self: this }, score)))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 218, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 219, columnNumber: 11 }, __self: this }, "操作方法:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 220, columnNumber: 11 }, __self: this }, "← → : 左右移動"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 221, columnNumber: 11 }, __self: this }, "↑ : 回転"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 222, columnNumber: 11 }, __self: this }, "↓ : 加速"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 225, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse { animation: pulse 0.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; } `)); } /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 z-0 opacity-30", __source: { fileName: "", lineNumber: 241, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full grid grid-cols-10 grid-rows-10", __source: { fileName: "", lineNumber: 242, columnNumber: 3 }, __self: this }, Array.from({ length: 100 }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border border-[#D0D0D0] transform rotate-45", __source: { fileName: "", lineNumber: 244, columnNumber: 7 }, __self: this }))));