function MainComponent() { const [grid, setGrid] = React.useState(Array.from({ length: 20 }).fill().map(()=>Array.from({ length: 10 }).fill(null))); const [currentPiece, setCurrentPiece] = React.useState(null); const [currentPosition, setCurrentPosition] = React.useState({ x: 3, y: 0 }); const [nextPiece, setNextPiece] = React.useState(null); const [score, setScore] = React.useState(0); const [isPlaying, setIsPlaying] = React.useState(false); const [gameInterval, setGameInterval] = React.useState(null); const [level, setLevel] = React.useState(1); const [linesCleared, setLinesCleared] = React.useState(0); 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 ] ] ]; const colors = [ 'bg-cyan-500', 'bg-yellow-500', 'bg-purple-500', 'bg-blue-500', 'bg-orange-500', 'bg-green-500', 'bg-red-500' ]; const generatePiece = ()=>{ const pieceIndex = Math.floor(Math.random() * pieces.length); return { shape: pieces[pieceIndex], color: colors[pieceIndex] }; }; const initGame = ()=>{ setGrid(Array.from({ length: 20 }).fill().map(()=>Array.from({ length: 10 }).fill(null))); setCurrentPiece(generatePiece()); setCurrentPosition({ x: 3, y: 0 }); setNextPiece(generatePiece()); setScore(0); setIsPlaying(true); setLevel(1); setLinesCleared(0); }; const movePiece = (direction)=>{ const newPosition = { ...currentPosition }; if (direction === 'left') newPosition.x -= 1; if (direction === 'right') newPosition.x += 1; if (direction === 'down') newPosition.y += 1; if (!checkCollision(currentPiece.shape, newPosition)) { setCurrentPosition(newPosition); } else if (direction === 'down') { placePiece(); if (checkGameOver()) { setIsPlaying(false); clearInterval(gameInterval); } else { setCurrentPiece(nextPiece); setCurrentPosition({ x: 3, y: 0 }); setNextPiece(generatePiece()); } } }; const rotatePiece = ()=>{ const rotated = currentPiece.shape[0].map((_, index)=>currentPiece.shape.map((row)=>row[index]).reverse()); if (!checkCollision(rotated, currentPosition)) { setCurrentPiece({ ...currentPiece, shape: rotated }); } }; const checkCollision = (piece, position)=>{ for(let y = 0; y < piece.length; y++){ for(let x = 0; x < piece[y].length; x++){ if (piece[y][x]) { const newY = position.y + y; const newX = position.x + x; if (newY >= 20 || newX < 0 || newX >= 10 || grid[newY] && grid[newY][newX]) { return true; } } } } return false; }; const placePiece = ()=>{ const newGrid = grid.map((row)=>[ ...row ]); currentPiece.shape.forEach((row, y)=>{ row.forEach((value, x)=>{ if (value) { newGrid[y + currentPosition.y][x + currentPosition.x] = currentPiece.color; } }); }); setGrid(newGrid); clearLines(); }; const clearLines = ()=>{ let newGrid = grid.filter((row)=>!row.every((cell)=>cell)); const clearedLines = 20 - newGrid.length; const newRows = Array(clearedLines).fill().map(()=>Array.from({ length: 10 }).fill(null)); newGrid = [ ...newRows, ...newGrid ]; setGrid(newGrid); updateScore(clearedLines); setLinesCleared((prev)=>prev + clearedLines); }; const updateScore = (clearedLines)=>{ const linePoints = [ 0, 100, 300, 500, 800 ]; const points = linePoints[clearedLines] * level; setScore((prevScore)=>prevScore + points); checkLevelUp(); }; const checkLevelUp = ()=>{ const newLevel = Math.floor(linesCleared / 10) + 1; if (newLevel > level) { setLevel(newLevel); updateGameSpeed(); } }; const updateGameSpeed = ()=>{ clearInterval(gameInterval); const newInterval = setInterval(gameLoop, Math.max(100, 1000 - (level - 1) * 100)); setGameInterval(newInterval); }; const checkGameOver = ()=>{ return currentPiece.shape.some((row, y)=>row.some((value, x)=>value && grid[y + currentPosition.y][x + currentPosition.x])); }; const gameLoop = ()=>{ movePiece('down'); }; const startGame = ()=>{ initGame(); const interval = setInterval(gameLoop, 1000); setGameInterval(interval); }; const resetGame = ()=>{ setIsPlaying(false); clearInterval(gameInterval); initGame(); }; React.useEffect(()=>{ const handleKeyPress = (e)=>{ if (isPlaying) { switch(e.key){ case 'ArrowLeft': movePiece('left'); break; case 'ArrowRight': movePiece('right'); break; case 'ArrowDown': movePiece('down'); break; case 'ArrowUp': rotatePiece(); break; } } }; window.addEventListener('keydown', handleKeyPress); return ()=>{ window.removeEventListener('keydown', handleKeyPress); }; }, [ isPlaying, currentPiece, currentPosition, grid ]); React.useEffect(()=>{ if (isPlaying) { updateGameSpeed(); return ()=>clearInterval(gameInterval); } }, [ isPlaying, level ]); const renderGrid = ()=>{ const displayGrid = grid.map((row)=>[ ...row ]); if (currentPiece) { currentPiece.shape.forEach((row, y)=>{ row.forEach((value, x)=>{ if (value) { displayGrid[y + currentPosition.y][x + currentPosition.x] = currentPiece.color; } }); }); } return displayGrid; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white font-sans", __source: { fileName: "", lineNumber: 199, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8", __source: { fileName: "", lineNumber: 200, columnNumber: 7 }, __self: this }, "テトリス"), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 201, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-4 border-gray-700 p-1", __source: { fileName: "", lineNumber: 202, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-10 gap-px", __source: { fileName: "", lineNumber: 203, columnNumber: 11 }, __self: this }, renderGrid().flat().map((cell, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `w-6 h-6 ${cell || 'bg-gray-800'}`, __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "ml-8 flex flex-col space-y-4", __source: { fileName: "", lineNumber: 209, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 210, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }, "次のピース"), /*#__PURE__*/ React.createElement("div", { className: "border-2 border-gray-700 p-1", __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-px", __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }, nextPiece ? nextPiece.shape.flat().map((cell, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `w-4 h-4 ${cell ? nextPiece.color : 'bg-gray-800'}`, __source: { fileName: "", lineNumber: 215, columnNumber: 19 }, __self: this })) : [ ...Array.from({ length: 16 }) ].map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-4 h-4 bg-gray-800", __source: { fileName: "", lineNumber: 217, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 222, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 223, columnNumber: 13 }, __self: this }, "スコア"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 px-4 py-2 rounded", __source: { fileName: "", lineNumber: 224, columnNumber: 13 }, __self: this }, score)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 226, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 227, columnNumber: 13 }, __self: this }, "レベル"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 px-4 py-2 rounded", __source: { fileName: "", lineNumber: 228, columnNumber: 13 }, __self: this }, level)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 230, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 231, columnNumber: 13 }, __self: this }, "消去ライン"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 px-4 py-2 rounded", __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, linesCleared)))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 236, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded mr-2", onClick: startGame, disabled: isPlaying, __source: { fileName: "", lineNumber: 237, columnNumber: 9 }, __self: this }, "スタート"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded", onClick: resetGame, __source: { fileName: "", lineNumber: 244, columnNumber: 9 }, __self: this }, "リセット"))); }