[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","692589fce33881919b03275f9be3488b","versionInt","title","React Tetris Game","type","code/react","content","import React, { useState, useEffect, useCallback } from \"react\";\n\n// Board size\nconst ROWS = 20;\nconst COLS = 10;\n\n// Tetromino shapes\nconst TETROMINOS = {\n I: {\n shape: [\n [0, 0, 0, 0],\n [1, 1, 1, 1],\n [0, 0, 0, 0],\n [0, 0, 0, 0],\n ],\n color: \"bg-cyan-400\",\n },\n J: {\n shape: [\n [1, 0, 0],\n [1, 1, 1],\n [0, 0, 0],\n ],\n color: \"bg-blue-500\",\n },\n L: {\n shape: [\n [0, 0, 1],\n [1, 1, 1],\n [0, 0, 0],\n ],\n color: \"bg-orange-400\",\n },\n O: {\n shape: [\n [1, 1],\n [1, 1],\n ],\n color: \"bg-yellow-300\",\n },\n S: {\n shape: [\n [0, 1, 1],\n [1, 1, 0],\n [0, 0, 0],\n ],\n color: \"bg-lime-400\",\n },\n T: {\n shape: [\n [0, 1, 0],\n [1, 1, 1],\n [0, 0, 0],\n ],\n color: \"bg-purple-500\",\n },\n Z: {\n shape: [\n [1, 1, 0],\n [0, 1, 1],\n [0, 0, 0],\n ],\n color: \"bg-red-500\",\n },\n};\n\nconst TETROMINO_KEYS = Object.keys(TETROMINOS);\n\nconst randomTetromino = () => {\n const key = TETROMINO_KEYS[Math.floor(Math.random() * TETROMINO_KEYS.length)];\n return { type: key, ...TETROMINOS[key] };\n};\n\nconst rotateMatrix = (matrix) => {\n const rows = matrix.length;\n const cols = matrix[0].length;\n const rotated = Array.from({ length: cols }, () => Array(rows).fill(0));\n for (let r = 0; r < rows; r++) {\n for (let c = 0; c < cols; c++) {\n rotated[c][rows - 1 - r] = matrix[r][c];\n }\n }\n return rotated;\n};\n\nconst createEmptyBoard = () =>\n Array.from({ length: ROWS }, () => Array(COLS).fill({ filled: false, color: \"\" }));\n\nconst cloneBoard = (board) => board.map((row) => row.map((cell) => ({ ...cell })));\n\nconst checkCollision = (board, shape, pos) => {\n for (let r = 0; r < shape.length; r++) {\n for (let c = 0; c < shape[r].length; c++) {\n if (!shape[r][c]) continue;\n const newRow = pos.row + r;\n const newCol = pos.col + c;\n if (\n newRow < 0 ||\n newRow >= ROWS ||\n newCol < 0 ||\n newCol >= COLS ||\n board[newRow][newCol].filled\n ) {\n return true;\n }\n }\n }\n return false;\n};\n\nconst mergePieceToBoard = (board, shape, pos, color) => {\n const newBoard = cloneBoard(board);\n for (let r = 0; r < shape.length; r++) {\n for (let c = 0; c < shape[r].length; c++) {\n if (!shape[r][c]) continue;\n const row = pos.row + r;\n const col = pos.col + c;\n if (row >= 0 && row < ROWS && col >= 0 && col < COLS) {\n newBoard[row][col] = { filled: true, color };\n }\n }\n }\n return newBoard;\n};\n\nconst clearFullLines = (board) => {\n const newBoard = [];\n let cleared = 0;\n for (let r = 0; r < ROWS; r++) {\n if (board[r].every((cell) => cell.filled)) {\n cleared++;\n } else {\n newBoard.push(board[r]);\n }\n }\n while (newBoard.length < ROWS) {\n newBoard.unshift(Array(COLS).fill({ filled: false, color: \"\" }));\n }\n return { board: newBoard, cleared };\n};\n\nconst getDropPosition = (board, shape, pos) => {\n let dropPos = { ...pos };\n while (!checkCollision(board, shape, { row: dropPos.row + 1, col: dropPos.col })) {\n dropPos.row += 1;\n }\n return dropPos;\n};\n\nconst Tetris = () => {\n const [board, setBoard] = useState(createEmptyBoard);\n const [current, setCurrent] = useState(() => {\n const tet = randomTetromino();\n return {\n shape: tet.shape,\n color: tet.color,\n pos: { row: 0, col: 3 },\n };\n });\n const [score, setScore] = useState(0);\n const [lines, setLines] = useState(0);\n const [gameOver, setGameOver] = useState(false);\n const [paused, setPaused] = useState(false);\n const [tickMs, setTickMs] = useState(700);\n\n // Reset game\n const resetGame = () => {\n setBoard(createEmptyBoard());\n const tet = randomTetromino();\n setCurrent({ shape: tet.shape, color: tet.color, pos: { row: 0, col: 3 } });\n setScore(0);\n setLines(0);\n setGameOver(false);\n setPaused(false);\n setTickMs(700);\n };\n\n const spawnNewPiece = useCallback(\n (boardState) => {\n const tet = randomTetromino();\n const newPiece = {\n shape: tet.shape,\n color: tet.color,\n pos: { row: 0, col: 3 },\n };\n if (checkCollision(boardState, newPiece.shape, newPiece.pos)) {\n setGameOver(true);\n return null;\n }\n return newPiece;\n },\n []\n );\n\n const step = useCallback(() => {\n if (gameOver || paused) return;\n setBoard((prevBoard) => {\n let boardState = prevBoard;\n let didMerge = false;\n setCurrent((prevCurrent) => {\n if (!prevCurrent) return prevCurrent;\n const newPos = { row: prevCurrent.pos.row + 1, col: prevCurrent.pos.col };\n if (!checkCollision(boardState, prevCurrent.shape, newPos)) {\n return { ...prevCurrent, pos: newPos };\n }\n // Merge piece\n const merged = mergePieceToBoard(\n boardState,\n prevCurrent.shape,\n prevCurrent.pos,\n prevCurrent.color\n );\n const { board: clearedBoard, cleared } = clearFullLines(merged);\n if (cleared > 0) {\n setLines((l) => l + cleared);\n setScore((s) => s + cleared * 100);\n setTickMs((t) => Math.max(150, t - cleared * 20));\n }\n boardState = clearedBoard;\n didMerge = true;\n const newPiece = spawnNewPiece(clearedBoard);\n if (!newPiece) {\n return prevCurrent;\n }\n // Small trick to force board update\n setBoard(clearedBoard);\n return newPiece;\n });\n return didMerge ? boardState : prevBoard;\n });\n }, [gameOver, paused, spawnNewPiece]);\n\n // Game loop\n useEffect(() => {\n if (gameOver || paused) return;\n const id = setInterval(step, tickMs);\n return () => clearInterval(id);\n }, [step, tickMs, gameOver, paused]);\n\n // Keyboard controls\n useEffect(() => {\n const handleKey = (e) => {\n if (gameOver) return;\n if (e.key === \"p\" || e.key === \"P\") {\n setPaused((p) => !p);\n return;\n }\n if (paused) return;\n setCurrent((prevCurrent) => {\n if (!prevCurrent) return prevCurrent;\n let newPos = { ...prevCurrent.pos };\n let newShape = prevCurrent.shape;\n\n if (e.key === \"ArrowLeft\") {\n newPos = { row: prevCurrent.pos.row, col: prevCurrent.pos.col - 1 };\n } else if (e.key === \"ArrowRight\") {\n newPos = { row: prevCurrent.pos.row, col: prevCurrent.pos.col + 1 };\n } else if (e.key === \"ArrowDown\") {\n newPos = { row: prevCurrent.pos.row + 1, col: prevCurrent.pos.col };\n } else if (e.key === \"ArrowUp\" || e.key === \"x\" || e.key === \"X\") {\n const rotated = rotateMatrix(prevCurrent.shape);\n if (!checkCollision(board, rotated, prevCurrent.pos)) {\n newShape = rotated;\n }\n } else if (e.key === \" \") {\n // hard drop\n const dropPos = getDropPosition(board, prevCurrent.shape, prevCurrent.pos);\n const merged = mergePieceToBoard(\n board,\n prevCurrent.shape,\n dropPos,\n prevCurrent.color\n );\n const { board: clearedBoard, cleared } = clearFullLines(merged);\n if (cleared > 0) {\n setLines((l) => l + cleared);\n setScore((s) => s + cleared * 100);\n setTickMs((t) => Math.max(150, t - cleared * 20));\n }\n const newPiece = spawnNewPiece(clearedBoard);\n setBoard(clearedBoard);\n return newPiece || prevCurrent;\n }\n\n if (!checkCollision(board, newShape, newPos)) {\n return { ...prevCurrent, pos: newPos, shape: newShape };\n }\n return prevCurrent;\n });\n };\n\n window.addEventListener(\"keydown\", handleKey);\n return () => window.removeEventListener(\"keydown\", handleKey);\n }, [board, gameOver, paused, spawnNewPiece]);\n\n // Render board with current piece\n const displayBoard = cloneBoard(board);\n if (current) {\n for (let r = 0; r < current.shape.length; r++) {\n for (let c = 0; c < current.shape[r].length; c++) {\n if (!current.shape[r][c]) continue;\n const row = current.pos.row + r;\n const col = current.pos.col + c;\n if (row >= 0 && row < ROWS && col >= 0 && col < COLS) {\n displayBoard[row][col] = { filled: true, color: current.color };\n }\n }\n }\n }\n\n return (\n

\n {/* Board */}\n

\n \n {displayBoard.map((row, rIdx) =>\n row.map((cell, cIdx) => (\n \n ))\n )}\n

\n\n {/* Sidebar */}\n

Tetris

\n 矢印キーで移動 / 回転、スペースでハードドロップ、Pで一時停止。\n

\n スコア\n {score}\n

\n ライン\n {lines}\n

\n スピード\n {(1000 / tickMs).toFixed(2)}x\n

\n\n

\n {gameOver ? (\n <>\n

ゲームオーバー

\n \n もう一度\n \n \n ) : (\n <>\n

\n 状態\n \n {paused ? \"一時停止中\" : \"プレイ中\"}\n \n

\n setPaused((p) => !p)}\n className=\"w-full py-2 rounded-xl bg-slate-700 hover:bg-slate-600 transition text-sm\"\n >\n {paused ? \"再開 (P)\" : \"一時停止 (P)\"}\n \n \n リセット\n \n \n )}\n

\n \n );\n};\n\nexport default Tetris;\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","14149948844977501018","traceTime",1776423209765]