TETRIS

\n Score:\n 0\n

\n Level:\n 1\n

\n Lines:\n 0\n

\n \n \n

\n\n\n\n \n `, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n }",[],[197],{"_102":206,"_95":178,"_150":207,"_152":-5,"_153":136,"_154":208,"_156":157,"_104":209,"_99":32,"_159":172,"_161":210,"_162":22,"_163":-5,"_164":211,"_98":212},"004cf32a-4d33-11f0-8d89-76b3cceeab13","004cf3ca-4d33-11f0-8d89-76b3cceeab13",35,["D",1750354189211],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\"*.ts\", \"*.tsx\", \"*.js\", \"*.jsx\"]\n }\n }\n}\n",[],[178],{"_102":214,"_95":215,"_150":216,"_152":-5,"_153":136,"_154":217,"_156":157,"_104":218,"_99":219,"_159":220,"_161":221,"_162":22,"_163":-5,"_164":222,"_98":223},"324c434a-4cdd-11f0-a28e-76b3cceeab13","script.js","e85b459e-4cda-11f0-8ecd-76b3cceeab13",28,["D",1750317336369],2,"script","// Game constants\nconst BOARD_WIDTH = 10;\nconst BOARD_HEIGHT = 20;\nconst BLOCK_SIZE = 30;\n\n// Game variables\nlet board = [];\nlet currentPiece = null;\nlet gameRunning = false;\nlet score = 0;\nlet level = 1;\nlet lines = 0;\n\n// Get canvas elements\nconst gameCanvas = document.getElementById('game-canvas');\nconst gameCtx = gameCanvas.getContext('2d');\nconst nextCanvas = document.getElementById('next-canvas');\nconst nextCtx = nextCanvas.getContext('2d');\n\n// Initialize empty board\nfunction createBoard() {\n board = [];\n for (let row = 0; row < BOARD_HEIGHT; row++) {\n board[row] = [];\n for (let col = 0; col < BOARD_WIDTH; col++) {\n board[row][col] = 0;\n }\n }\n}\n\n// Draw the game board\nfunction drawBoard() {\n gameCtx.fillStyle = '#000';\n gameCtx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);\n \n // Draw grid lines\n gameCtx.strokeStyle = '#333';\n gameCtx.lineWidth = 1;\n \n for (let row = 0; row <= BOARD_HEIGHT; row++) {\n gameCtx.beginPath();\n gameCtx.moveTo(0, row * BLOCK_SIZE);\n gameCtx.lineTo(BOARD_WIDTH * BLOCK_SIZE, row * BLOCK_SIZE);\n gameCtx.stroke();\n }\n \n for (let col = 0; col <= BOARD_WIDTH; col++) {\n gameCtx.beginPath();\n gameCtx.moveTo(col * BLOCK_SIZE, 0);\n gameCtx.lineTo(col * BLOCK_SIZE, BOARD_HEIGHT * BLOCK_SIZE);\n gameCtx.stroke();\n }\n}\n\n// Initialize game\nfunction initGame() {\n createBoard();\n drawBoard();\n console.log('Game initialized!');\n}\n\n// Start the game when page loads\nwindow.addEventListener('load', initGame);\n\n// Current piece position\nlet pieceX = 0;\nlet pieceY = 0;\nlet pieceRotation = 0;\n\n// Get random piece\nfunction getRandomPiece() {\n const pieceTypes = Object.keys(PIECES);\n const randomType = pieceTypes[Math.floor(Math.random() * pieceTypes.length)];\n return {\n type: randomType,\n shape: PIECES[randomType].shape,\n color: PIECES[randomType].color\n };\n}\n\n// Spawn new piece\nfunction spawnPiece() {\n currentPiece = getRandomPiece();\n pieceX = Math.floor(BOARD_WIDTH / 2) - 1;\n pieceY = 0;\n pieceRotation = 0;\n console.log('New piece spawned:', currentPiece.type);\n}\n\n// Draw a piece\nfunction drawPiece(piece, x, y, ctx, blockSize = BLOCK_SIZE) {\n if (!piece) return;\n \n ctx.fillStyle = piece.color;\n const shape = piece.shape;\n \n for (let row = 0; row < shape.length; row++) {\n for (let col = 0; col < shape[row].length; col++) {\n if (shape[row][col] === 1) {\n ctx.fillRect(\n (x + col) * blockSize,\n (y + row) * blockSize,\n blockSize,\n blockSize\n );\n \n // Add border\n ctx.strokeStyle = '#fff';\n ctx.lineWidth = 2;\n ctx.strokeRect(\n (x + col) * blockSize,\n (y + row) * blockSize,\n blockSize,\n blockSize\n );\n }\n }\n }\n}\n\n// Game loop\nfunction gameLoop() {\n // Clear and redraw board\n drawBoard();\n \n // Draw current piece\n if (currentPiece) {\n drawPiece(currentPiece, pieceX, pieceY, gameCtx);\n }\n \n if (gameRunning) {\n requestAnimationFrame(gameLoop);\n }\n}\n\n// Start game\nfunction startGame() {\n if (!gameRunning) {\n gameRunning = true;\n spawnPiece();\n gameLoop();\n console.log('Game started!');\n }\n}\n\n// Update the initGame function\nfunction initGame() {\n createBoard();\n drawBoard();\n \n // Add button event listeners\n document.getElementById('start-btn').addEventListener('click', function() {\n document.getElementById('start-btn').style.display = 'none';\n document.getElementById('pause-btn').style.display = 'inline-block';\n startGame();\n });\n \n console.log('Game ready - click Start to begin!');\n}",[],[215],{"_102":225,"_95":226,"_150":227,"_152":-5,"_153":136,"_154":228,"_156":157,"_104":229,"_99":219,"_159":172,"_161":230,"_162":22,"_163":-5,"_164":231,"_98":232},"2d1ab60a-4cd7-11f0-9f20-76b3cceeab13","style.css","e1e8ecda-4ccf-11f0-b808-76b3cceeab13",12,["D",1750314750680],"* {\n\tmargin: 0;\n\tpadding: 0;\n\tbox-sizing: border-box;\n}\n\nbody {\n\tfont-family: Arial, sans-serif;\n\tbackground: linear-gradient(135deg,#1e3c72, #2a5298);\n\tcolor: white;\n\tmin-height: 100vh;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n}\n\n.game-container {\n\tdisplay: flex;\n\tgap: 20px;\n\tpadding: 20px;\n\tbackground-color: rgba(0, 0, 0, 0.3);\n\tborder-radius: 15px;\n\tbox-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);\n}\n\n.game-info {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 20px;\n\tmin-width: 200px;\n}\n\n.game-info h1 {\n\ttext-align: center;\n\tfont-size: 2.5em;\n\tcolor: #00ff88;\n\ttext-shadow: 0 0 10px #00ff88;\n\tmargin-bottom: 10px;\n}\n\n.score-board {\n\tbackground: rgba(0, 0, 0, 0.5);\n\tpadding: 15px;\n\tborder-radius: 10px;\n\tborder: 2px solid #00ff88;\n}\n\n.score-board div {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tmargin: 8px 0;\n\tfont-size: 1.1em;\n}\t\n\n.next-piece {\n\tbackground: rgba(0, 0, 0, 0.5);\n\tpadding: 15px;\n\tborder-radius: 10px;\n\tborder: 2px solid #00ff88;\n\ttext-align: center;\n}\n\n#next-canvas {\n\tbackground: #000;\n\tborder: 1px solid #333;\n\tborder-radius: 5px;\n}\n\n#game-canvas {\n\tbackground: #000;\n\tborder: 3px solid #00ff88;\n\tborder-radius: 10px;\n\tbox-shadow: 0 0 20px rgba(0, 255, 136, 0.3);\t\n}\n\n",[],[226],{"_102":234,"_95":235,"_150":236,"_152":-5,"_153":136,"_154":237,"_156":157,"_104":238,"_99":32,"_159":220,"_161":239,"_162":22,"_163":-5,"_164":240,"_98":241},"1d14ef16-4cda-11f0-97e6-76b3cceeab13","tetreis-pieces.js","1d14efca-4cda-11f0-97e6-76b3cceeab13",21,["D",1750316012292],"// Tetris piece definitions\nconst PIECES = {\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: '#00ffff'\n },\n O: {\n shape: [\n [1,1],\n [1,1]\n ],\n color: '#ffff00'\n },\n T: {\n shape: [\n [0,1,0],\n [1,1,1],\n [0,0,0]\n ],\n color: '#800080'\n },\n S: {\n shape: [\n [0,1,1],\n [1,1,0],\n [0,0,0]\n ],\n color: '#00ff00'\n },\n Z: {\n shape: [\n [1,1,0],\n [0,1,1],\n [0,0,0]\n ],\n color: '#ff0000'\n },\n J: {\n shape: [\n [1,0,0],\n [1,1,1],\n [0,0,0]\n ],\n color: '#0000ff'\n },\n L: {\n shape: [\n [0,0,1],\n [1,1,1],\n [0,0,0]\n ],\n color: '#ffa500'\n }\n};",[],[235],"files",[148,166,176,186,195,205,213,224,233],"counts",{"_246":32,"_247":155,"_248":32,"_249":32},"pulls","branches","forks","envVars","contents",[252,255,258,261,264,267,270],{"_102":149,"_95":96,"_150":151,"_152":-5,"_153":136,"_154":155,"_156":157,"_104":253,"_99":32,"_159":160,"_161":-5,"_162":22,"_163":-5,"_98":254},["D",1750311617961],[96],{"_102":187,"_95":188,"_150":189,"_152":-5,"_153":136,"_154":190,"_156":157,"_104":256,"_99":32,"_159":172,"_161":192,"_162":22,"_163":-5,"_98":257},["D",1750311618038],[188],{"_102":196,"_95":197,"_150":198,"_152":-5,"_153":136,"_154":135,"_156":157,"_104":259,"_99":200,"_159":201,"_161":202,"_162":22,"_163":-5,"_98":260},["D",1750361154352],[197],{"_102":206,"_95":178,"_150":207,"_152":-5,"_153":136,"_154":208,"_156":157,"_104":262,"_99":32,"_159":172,"_161":210,"_162":22,"_163":-5,"_98":263},["D",1750354189211],[178],{"_102":214,"_95":215,"_150":216,"_152":-5,"_153":136,"_154":217,"_156":157,"_104":265,"_99":219,"_159":220,"_161":221,"_162":22,"_163":-5,"_98":266},["D",1750317336369],[215],{"_102":225,"_95":226,"_150":227,"_152":-5,"_153":136,"_154":228,"_156":157,"_104":268,"_99":219,"_159":172,"_161":230,"_162":22,"_163":-5,"_98":269},["D",1750314750680],[226],{"_102":234,"_95":235,"_150":236,"_152":-5,"_153":136,"_154":237,"_156":157,"_104":271,"_99":32,"_159":220,"_161":239,"_162":22,"_163":-5,"_98":272},["D",1750316012292],[235],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_99":-7,"_98":72,"_100":281,"_146":286,"_242":314,"_172":-7,"_250":315,"_330":-5,"_331":22,"_332":-5,"_333":-5,"_334":-5,"_335":336},{"_102":103,"_95":96,"_104":282,"_106":-5,"_107":22,"_108":109,"_110":72,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":283,"_130":284,"_133":285,"_145":22},["D",1750306176537],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},[287,296,299,302,305,308,311],{"_102":149,"_95":96,"_150":151,"_152":-5,"_153":136,"_154":155,"_156":157,"_104":158,"_99":32,"_159":160,"_161":-5,"_162":22,"_163":-5,"_164":288,"_98":295},[289,292],{"_102":167,"_95":168,"_150":169,"_152":151,"_153":136,"_154":170,"_156":157,"_104":171,"_99":32,"_159":172,"_161":173,"_162":22,"_163":-5,"_164":290,"_98":291},[],[96,168],{"_102":177,"_95":178,"_150":179,"_152":151,"_153":136,"_154":180,"_156":157,"_104":181,"_99":32,"_159":172,"_161":182,"_162":22,"_163":-5,"_164":293,"_98":294},[],[96,178],[96],{"_102":187,"_95":188,"_150":189,"_152":-5,"_153":136,"_154":190,"_156":157,"_104":191,"_99":32,"_159":172,"_161":192,"_162":22,"_163":-5,"_164":297,"_98":298},[],[188],{"_102":196,"_95":197,"_150":198,"_152":-5,"_153":136,"_154":135,"_156":157,"_104":199,"_99":200,"_159":201,"_161":202,"_162":22,"_163":-5,"_164":300,"_98":301},[],[197],{"_102":206,"_95":178,"_150":207,"_152":-5,"_153":136,"_154":208,"_156":157,"_104":209,"_99":32,"_159":172,"_161":210,"_162":22,"_163":-5,"_164":303,"_98":304},[],[178],{"_102":214,"_95":215,"_150":216,"_152":-5,"_153":136,"_154":217,"_156":157,"_104":218,"_99":219,"_159":220,"_161":221,"_162":22,"_163":-5,"_164":306,"_98":307},[],[215],{"_102":225,"_95":226,"_150":227,"_152":-5,"_153":136,"_154":228,"_156":157,"_104":229,"_99":219,"_159":172,"_161":230,"_162":22,"_163":-5,"_164":309,"_98":310},[],[226],{"_102":234,"_95":235,"_150":236,"_152":-5,"_153":136,"_154":237,"_156":157,"_104":238,"_99":32,"_159":220,"_161":239,"_162":22,"_163":-5,"_164":312,"_98":313},[],[235],[287,289,292,296,299,302,305,308,311],[316,318,320,322,324,326,328],{"_102":149,"_95":96,"_150":151,"_152":-5,"_153":136,"_154":155,"_156":157,"_104":253,"_99":32,"_159":160,"_161":-5,"_162":22,"_163":-5,"_98":317},[96],{"_102":187,"_95":188,"_150":189,"_152":-5,"_153":136,"_154":190,"_156":157,"_104":256,"_99":32,"_159":172,"_161":192,"_162":22,"_163":-5,"_98":319},[188],{"_102":196,"_95":197,"_150":198,"_152":-5,"_153":136,"_154":135,"_156":157,"_104":259,"_99":200,"_159":201,"_161":202,"_162":22,"_163":-5,"_98":321},[197],{"_102":206,"_95":178,"_150":207,"_152":-5,"_153":136,"_154":208,"_156":157,"_104":262,"_99":32,"_159":172,"_161":210,"_162":22,"_163":-5,"_98":323},[178],{"_102":214,"_95":215,"_150":216,"_152":-5,"_153":136,"_154":217,"_156":157,"_104":265,"_99":219,"_159":220,"_161":221,"_162":22,"_163":-5,"_98":325},[215],{"_102":225,"_95":226,"_150":227,"_152":-5,"_153":136,"_154":228,"_156":157,"_104":268,"_99":219,"_159":172,"_161":230,"_162":22,"_163":-5,"_98":327},[226],{"_102":234,"_95":235,"_150":236,"_152":-5,"_153":136,"_154":237,"_156":157,"_104":271,"_99":32,"_159":220,"_161":239,"_162":22,"_163":-5,"_98":329},[235],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

TETRIS

Next: