Tetris

Tetris

Score

0

Level

1

Next

body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; font-family: Arial, sans-serif; margin: 0; } #game-container { background-color: #d3d3d3; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); text-align: center; } h1 { margin-top: 0; color: #333; } #game-area { display: flex; gap: 20px; align-items: flex-start; /* Align items to the top */ } #tetris-board { border: 2px solid #333; background-color: #000; /* Black background for the board */ display: block; /* Prevent extra space below canvas */ } #game-info { display: flex; flex-direction: column; align-items: center; gap: 15px; width: 120px; /* Give info area some width */ } #game-info div { background-color: #e0e0e0; padding: 5px 10px; border-radius: 5px; width: 100%; box-sizing: border-box; /* Include padding in width */ } #game-info h2 { margin: 0 0 5px 0; font-size: 1em; color: #555; } #game-info p { margin: 0; font-size: 1.2em; font-weight: bold; color: #333; } #next-piece { border: 1px solid #999; background-color: #fff; } #start-button { padding: 10px 15px; font-size: 1em; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 5px; transition: background-color 0.3s ease; } #start-button:hover { background-color: #45a049; } #game-over { color: red; font-weight: bold; font-size: 1.2em; margin-top: 10px; } .hidden { display: none; } /* Block colors */ .block-I { background-color: cyan; } .block-O { background-color: yellow; } .block-T { background-color: purple; } .block-S { background-color: lime; } .block-Z { background-color: red; } .block-J { background-color: blue; } .block-L { background-color: orange; } document.addEventListener('DOMContentLoaded', () => { const canvas = document.getElementById('tetris-board'); const context = canvas.getContext('2d'); const nextCanvas = document.getElementById('next-piece'); const nextContext = nextCanvas.getContext('2d'); const scoreElement = document.getElementById('score'); const levelElement = document.getElementById('level'); const startButton = document.getElementById('start-button'); const gameOverElement = document.getElementById('game-over'); const COLS = 10; const ROWS = 20; const BLOCK_SIZE = 24; // Size of each block in pixels const NEXT_BLOCK_SIZE = 20; // Size for the next piece preview context.canvas.width = COLS * BLOCK_SIZE; context.canvas.height = ROWS * BLOCK_SIZE; nextContext.canvas.width = 4 * NEXT_BLOCK_SIZE; nextContext.canvas.height = 4 * NEXT_BLOCK_SIZE; const COLORS = [ null, // 0: Empty 'cyan', // 1: I 'yellow', // 2: O 'purple', // 3: T 'lime', // 4: S 'red', // 5: Z 'blue', // 6: J 'orange' // 7: L ]; const SHAPES = [ [], // Empty shape placeholder [[1, 1, 1, 1]], // I [[2, 2], [2, 2]], // O [[0, 3, 0], [3, 3, 3]], // T [[0, 4, 4], [4, 4, 0]], // S [[5, 5, 0], [0, 5, 5]], // Z [[6, 0, 0], [6, 6, 6]], // J [[0, 0, 7], [7, 7, 7]] // L ]; let board = createBoard(ROWS, COLS); let currentPiece; let nextPiece; let score = 0; let level = 1; let linesCleared = 0; let dropStart = Date.now(); let gameOver = false; let gameLoopTimeout; let dropInterval = 1000; // Milliseconds per drop // --- Game Board --- function createBoard(rows, cols) { return Array.from({ length: rows }, () => Array(cols).fill(0)); } function drawBoard() { // Clear board context.fillStyle = '#000'; context.fillRect(0, 0, canvas.width, canvas.height); // Draw landed pieces board.forEach((row, y) => { row.forEach((value, x) => { if (value > 0) { drawBlock(context, x, y, COLORS[value], BLOCK_SIZE); } }); }); // Draw grid lines (optional) context.strokeStyle = '#222'; // Dark grey lines context.lineWidth = 0.5; for (let x = 0; x <= COLS; x++) { context.beginPath(); context.moveTo(x * BLOCK_SIZE, 0); context.lineTo(x * BLOCK_SIZE, ROWS * BLOCK_SIZE); context.stroke(); } for (let y = 0; y <= ROWS; y++) { context.beginPath(); context.moveTo(0, y * BLOCK_SIZE); context.lineTo(COLS * BLOCK_SIZE, y * BLOCK_SIZE); context.stroke(); } } function drawBlock(ctx, x, y, color, blockSize) { ctx.fillStyle = color; ctx.fillRect(x * blockSize, y * blockSize, blockSize, blockSize); ctx.strokeStyle = 'black'; ctx.lineWidth = 1; ctx.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize); } // --- Tetromino --- function getRandomPiece() { const typeId = Math.floor(Math.random() * (SHAPES.length - 1)) + 1; const matrix = SHAPES[typeId]; return { matrix: matrix, typeId: typeId, x: Math.floor(COLS / 2) - Math.floor(matrix[0].length / 2), y: 0 }; } function drawPiece(piece, ctx = context, blockSize = BLOCK_SIZE) { piece.matrix.forEach((row, y) => { row.forEach((value, x) => { if (value > 0) { drawBlock(ctx, piece.x + x, piece.y + y, COLORS[piece.typeId], blockSize); } }); }); } function drawNextPiece() { nextContext.fillStyle = '#fff'; // Clear next piece canvas nextContext.fillRect(0, 0, nextCanvas.width, nextCanvas.height); if (nextPiece) { // Center the piece in the preview box const matrix = nextPiece.matrix; const scale = NEXT_BLOCK_SIZE; const offsetX = (nextCanvas.width - matrix[0].length * scale) / 2; const offsetY = (nextCanvas.height - matrix.length * scale) / 2; matrix.forEach((row, y) => { row.forEach((value, x) => { if (value > 0) { nextContext.fillStyle = COLORS[nextPiece.typeId]; nextContext.fillRect(offsetX + x * scale, offsetY + y * scale, scale, scale); nextContext.strokeStyle = 'black'; nextContext.lineWidth = 1; nextContext.strokeRect(offsetX + x * scale, offsetY + y * scale, scale, scale); } }); }); } } // --- Movement & Collision --- function movePiece(dx, dy) { if (!isValidMove(currentPiece, dx, dy)) { return false; } currentPiece.x += dx; currentPiece.y += dy; return true; } function rotatePiece() { const originalMatrix = currentPiece.matrix; const N = originalMatrix.length; const M = originalMatrix[0].length; const rotatedMatrix = Array.from({ length: M }, () => Array(N).fill(0)); for (let y = 0; y < N; y++) { for (let x = 0; x < M; x++) { rotatedMatrix[x][N - 1 - y] = originalMatrix[y][x]; } } // Wall kick logic (basic) const originalX = currentPiece.x; const originalY = currentPiece.y; const testPiece = { ...currentPiece, matrix: rotatedMatrix }; if (isValidMove(testPiece, 0, 0)) { currentPiece.matrix = rotatedMatrix; return; } // Try shifting left/right if (isValidMove(testPiece, 1, 0)) { currentPiece.matrix = rotatedMatrix; currentPiece.x += 1; return; } if (isValidMove(testPiece, -1, 0)) { currentPiece.matrix = rotatedMatrix; currentPiece.x -= 1; return; } if (isValidMove(testPiece, 2, 0)) { // Try further shift for I piece etc. currentPiece.matrix = rotatedMatrix; currentPiece.x += 2; return; } if (isValidMove(testPiece, -2, 0)) { currentPiece.matrix = rotatedMatrix; currentPiece.x -= 2; return; } // Rotation failed } function isValidMove(piece, dx, dy) { for (let y = 0; y < piece.matrix.length; y++) { for (let x = 0; x < piece.matrix[y].length; x++) { if (piece.matrix[y][x] > 0) { const newX = piece.x + x + dx; const newY = piece.y + y + dy; // Check boundaries if (newX < 0 || newX >= COLS || newY >= ROWS) { return false; } // Check collision with landed pieces (only check below bottom boundary) if (newY >= 0 && board[newY] && board[newY][newX] > 0) { return false; } } } } return true; } function lockPiece() { currentPiece.matrix.forEach((row, y) => { row.forEach((value, x) => { if (value > 0) { // Check for game over condition if (currentPiece.y + y < 0) { // Should ideally check this before placing, but this is a fallback gameOver = true; return; } board[currentPiece.y + y][currentPiece.x + x] = currentPiece.typeId; } }); }); if (gameOver) return; // Don't proceed if game over triggered clearLines(); spawnNewPiece(); } function spawnNewPiece() { currentPiece = nextPiece || getRandomPiece(); // Use next piece or generate first one nextPiece = getRandomPiece(); drawNextPiece(); if (!isValidMove(currentPiece, 0, 0)) { gameOver = true; // Cannot place new piece } } // --- Line Clearing & Scoring --- function clearLines() { let linesToClear = 0; for (let y = ROWS - 1; y >= 0; y--) { if (board[y].every(cell => cell > 0)) { // Line is full linesToClear++; // Remove the line and add a new empty line at the top board.splice(y, 1); board.unshift(Array(COLS).fill(0)); // Since we removed a line, we need to check the same y index again y++; } } if (linesToClear > 0) { updateScore(linesToClear); } } function updateScore(clearedCount) { let points = 0; switch (clearedCount) { case 1: points = 40 * level; break; case 2: points = 100 * level; break; case 3: points = 300 * level; break; case 4: points = 1200 * level; break; // Tetris! } score += points; linesCleared += clearedCount; scoreElement.textContent = score; // Update level const newLevel = Math.floor(linesCleared / 10) + 1; if (newLevel > level) { level = newLevel; levelElement.textContent = level; // Increase speed - decrease interval (ensure minimum speed) dropInterval = Math.max(100, 1000 - (level - 1) * 75); } } // --- Game Loop --- function dropPiece() { if (!movePiece(0, 1)) { // Piece couldn't move down, lock it lockPiece(); if (gameOver) { endGame(); return; } } dropStart = Date.now(); // Reset drop timer } function gameLoop() { if (gameOver) return; const now = Date.now(); const delta = now - dropStart; if (delta > dropInterval) { dropPiece(); } drawBoard(); if (currentPiece) { drawPiece(currentPiece); } // Use requestAnimationFrame for smoother rendering if preferred, // but setTimeout is simpler for basic interval control. clearTimeout(gameLoopTimeout); // Clear previous timeout gameLoopTimeout = setTimeout(gameLoop, 50); // ~20 FPS rendering loop } // --- Game State --- function startGame() { if (gameLoopTimeout) { clearTimeout(gameLoopTimeout); // Stop existing loop if any } board = createBoard(ROWS, COLS); score = 0; level = 1; linesCleared = 0; gameOver = false; dropInterval = 1000; scoreElement.textContent = score; levelElement.textContent = level; gameOverElement.classList.add('hidden'); startButton.textContent = "Restart Game"; nextPiece = getRandomPiece(); // Generate the first 'next' piece spawnNewPiece(); // Generate the first 'current' piece and the next one dropStart = Date.now(); gameLoop(); } function endGame() { gameOver = true; clearTimeout(gameLoopTimeout); gameOverElement.classList.remove('hidden'); startButton.textContent = "Start Game"; console.log("Game Over! Final Score:", score); } // --- Input Handling --- document.addEventListener('keydown', (event) => { if (gameOver || !currentPiece) return; switch (event.key) { case 'ArrowLeft': case 'a': // Add WASD support movePiece(-1, 0); break; case 'ArrowRight': case 'd': movePiece(1, 0); break; case 'ArrowDown': case 's': dropPiece(); // Move down faster break; case 'ArrowUp': case 'w': // Rotate rotatePiece(); break; case ' ': // Space for hard drop (optional) while (movePiece(0, 1)) { /* Keep moving down */ } lockPiece(); if (gameOver) endGame(); dropStart = Date.now(); // Reset timer after hard drop break; } // Redraw immediately after input for responsiveness drawBoard(); drawPiece(currentPiece); }); startButton.addEventListener('click', startGame); // Initial draw (empty board) drawBoard(); drawNextPiece(); // Draw empty next piece area initially });