function MainComponent() { const [gameState, setGameState] = React.useState({ grid: Array.from({ length: 14 * 20 }).fill('bg-[#374151]'), activeTetromino: { shape: [], currentPosition: 0, rotation: 0 }, gameStarted: false, gameEnded: false, score: 0, clearedLines: 0 }); const tetrominos = { lTetromino: [ [ 1, 14 + 1, 28 + 1, 2 ], [ 14, 15, 16, 28 ], [ 1, 14 + 1, 28 + 1, 28 + 2 ], [ 14, 28, 29, 30 ] ], zTetromino: [ [ 0, 14, 15, 29 ], [ 14, 15, 29, 30 ], [ 0, 14, 15, 29 ], [ 14, 15, 29, 30 ] ], tTetromino: [ [ 1, 14, 15, 16 ], [ 1, 15, 16, 29 ], [ 14, 15, 16, 29 ], [ 1, 14, 15, 29 ] ], oTetromino: [ [ 0, 1, 14, 15 ], [ 0, 1, 14, 15 ], [ 0, 1, 14, 15 ], [ 0, 1, 14, 15 ] ], iTetromino: [ [ 1, 15, 29, 43 ], [ 14, 15, 16, 17 ], [ 1, 15, 29, 43 ], [ 14, 15, 16, 17 ] ] }; const spawnTetromino = ()=>{ const tetrominosKeys = Object.keys(tetrominos); const randomTetromino = tetrominosKeys[Math.floor(Math.random() * tetrominosKeys.length)]; setGameState((prevState)=>({ ...prevState, activeTetromino: { ...prevState.activeTetromino, shape: tetrominos[randomTetromino][0], currentPosition: 4 * 14, rotation: 0 }, gameStarted: true })); }; const checkCollision = (x, y, newRotation)=>{ const shape = gameState.activeTetromino.shape; const position = gameState.activeTetromino.currentPosition; const width = 14; const newShape = tetrominos[Object.keys(tetrominos).find((key)=>tetrominos[key].includes(shape))][newRotation % 4]; const testPosition = position + x + y * width; for(let index = 0; index < newShape.length; index++){ const newPosition = newShape[index] + testPosition; if (newPosition < 0 || newPosition >= 14 * 20 || gameState.grid[newPosition] !== 'bg-[#374151]') { return true; } if ((newPosition + 1) % width === 0 && newShape.includes(newPosition - (width - 1))) { return true; } if (newPosition % width === 0 && newShape.includes(newPosition + (width - 1))) { return true; } } return false; }; const moveTetromino = (x, y = 0, rotationChange = 0)=>{ if (!gameState.gameStarted || gameState.gameEnded) return; let newRotation = (gameState.activeTetromino.rotation + rotationChange) % 4; if (!checkCollision(x, y, newRotation)) { setGameState((prevState)=>({ ...prevState, activeTetromino: { ...prevState.activeTetromino, currentPosition: prevState.activeTetromino.currentPosition + x + y * 14, rotation: newRotation, shape: tetrominos[Object.keys(tetrominos).find((key)=>tetrominos[key].includes(prevState.activeTetromino.shape))][newRotation] } })); } }; const freezeTetromino = ()=>{ setGameState((prevState)=>{ const newGrid = [ ...prevState.grid ]; prevState.activeTetromino.shape.forEach((index)=>{ const absoluteIndex = index + prevState.activeTetromino.currentPosition; newGrid[absoluteIndex] = 'bg-[#EF4444]'; }); if (checkForCompleteLines().length === 0 && checkCollision(0, 1, prevState.activeTetromino.rotation)) { return { ...prevState, gameEnded: true, grid: newGrid }; } return { ...prevState, grid: newGrid, activeTetromino: { shape: [], currentPosition: 0, rotation: 0 } }; }); }; const checkForCompleteLines = ()=>{ const completeLines = []; for(let i = 0; i < 20; i++){ let lineComplete = true; for(let j = 0; j < 14; j++){ if (gameState.grid[i * 14 + j] === 'bg-[#374151]') { lineComplete = false; break; } } if (lineComplete) completeLines.push(i * 14); } if (completeLines.length > 0) { setGameState((prevState)=>{ const newGrid = [ ...prevState.grid ]; completeLines.forEach((lineStart)=>{ newGrid.splice(lineStart, 14); newGrid.unshift(...Array.from({ length: 14 }).fill('bg-[#374151]')); }); return { ...prevState, grid: newGrid, score: prevState.score + completeLines.length * 100, clearedLines: prevState.clearedLines + completeLines.length }; }); } }; const handleKeyPress = (e)=>{ if (!gameState.gameStarted || gameState.gameEnded) return; switch(e.key){ case "ArrowUp": moveTetromino(0, 0, 1); break; case "ArrowLeft": moveTetromino(-1); break; case "ArrowRight": moveTetromino(1); break; case "ArrowDown": moveTetromino(0, 1); break; default: break; } }; React.useEffect(()=>{ window.addEventListener('keydown', handleKeyPress); return ()=>window.removeEventListener('keydown', handleKeyPress); }, [ gameState ]); React.useEffect(()=>{ if (!gameState.gameStarted) return; const intervalId = setInterval(()=>{ if (!checkCollision(0, 1, gameState.activeTetromino.rotation)) { moveTetromino(0, 1); } else { freezeTetromino(); spawnTetromino(); checkForCompleteLines(); } }, 1000); return ()=>clearInterval(intervalId); }, [ gameState.gameStarted, gameState.activeTetromino ]); const startGame = ()=>{ setGameState({ grid: Array.from({ length: 14 * 20 }).fill('bg-[#374151]'), activeTetromino: { shape: [], currentPosition: 0, rotation: 0 }, gameStarted: true, gameEnded: false, score: 0, clearedLines: 0 }); spawnTetromino(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#010101]", __source: { fileName: "", lineNumber: 193, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-full px-10", __source: { fileName: "", lineNumber: 194, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#F3F4F6] font-roboto text-4xl", __source: { fileName: "", lineNumber: 195, columnNumber: 9 }, __self: this }, "テトリス"), /*#__PURE__*/ React.createElement("h2", { className: "text-[#F3F4F6] font-roboto text-2xl", __source: { fileName: "", lineNumber: 196, columnNumber: 9 }, __self: this }, "Score: ", gameState.score)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-14 gap-1 mt-5", __source: { fileName: "", lineNumber: 198, columnNumber: 7 }, __self: this }, gameState.grid.map((color, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: `w-[30px] h-[30px] ${color}`, __source: { fileName: "", lineNumber: 200, columnNumber: 11 }, __self: this }))), !gameState.gameStarted && /*#__PURE__*/ React.createElement("div", { className: "flex mt-5", __source: { fileName: "", lineNumber: 204, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "startButton", onClick: startGame, className: "px-4 py-2 font-roboto text-lg text-[#F9FAFB] bg-[#2563EB] rounded hover:bg-[#1D4ED8] transition-colors duration-300", __source: { fileName: "", lineNumber: 205, columnNumber: 11 }, __self: this }, "スタート")), gameState.gameEnded && /*#__PURE__*/ React.createElement("div", { className: "flex mt-5", __source: { fileName: "", lineNumber: 215, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "resetButton", onClick: startGame, className: "ml-4 px-4 py-2 font-roboto text-lg text-[#F9FAFB] bg-[#DC2626] rounded hover:bg-[#B91C1C] transition-colors duration-300", __source: { fileName: "", lineNumber: 216, columnNumber: 11 }, __self: this }, "リセット"))); }

テトリス

Score: 0