const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const ROWS = 20; const COLS = 10; const BLOCK_SIZE = 30; const board = []; let currentPiece, currentX, currentY; function drawSquare(x, y, color) { ctx.fillStyle = color; ctx.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE); ctx.strokeStyle = 'black'; ctx.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE); } function createBoard() { for (let r = 0; r < ROWS; r++) { board[r] = []; for (let c = 0; c < COLS; c++) { board[r][c] = 'white'; } } } function drawBoard() { for (let r = 0; r < ROWS; r++) { for (let c = 0; c < COLS; c++) { drawSquare(c, r, board[r][c]); } } } function movePiece(dx, dy) { if (!collision(currentPiece, currentX + dx, currentY + dy)) { currentX += dx; currentY += dy; drawPiece(); } } function drawPiece() { for (let r = 0; r < currentPiece.length; r++) { for (let c = 0; c < currentPiece[r].length; c++) { if (currentPiece[r][c]) { drawSquare(currentX + c, currentY + r, 'purple'); } } } } function collision(piece, x, y) { for (let r = 0; r < piece.length; r++) { for (let c = 0; c < piece[r].length; c++) { if (!piece[r][c]) { continue; } let newX = x + c; let newY = y + r; if (newX < 0 || newX >= COLS || newY >= ROWS) { return true; } if (newY < 0) { continue; } if (board[newY][newX] !== 'white') { return true; } } } return false; } function rotatePiece() { const newPiece = []; for (let r = 0; r < currentPiece[0].length; r++) { newPiece[r] = []; for (let c = 0; c < currentPiece.length; c++) { newPiece[r][c] = currentPiece[currentPiece.length - 1 - c][r]; } } if (!collision(newPiece, currentX, currentY)) { currentPiece = newPiece; drawPiece(); } } function dropPiece() { if (!collision(currentPiece, currentX, currentY + 1)) { currentY++; drawPiece(); } else { freezePiece(); clearLines(); spawnPiece(); } } function freezePiece() { for (let r = 0; r < currentPiece.length; r++) { for (let c = 0; c < currentPiece[r].length; c++) { if (!currentPiece[r][c]) { continue; } if (currentY + r < 0) { // Game over alert('Game Over'); board.forEach(row => row.fill('white')); } board[currentY + r][currentX + c] = 'purple'; } } drawBoard(); } function clearLines() { for (let r = ROWS - 1; r >= 0; r--) { if (board[r].every(cell => cell !== 'white')) { board.splice(r, 1); board.unshift(Array(COLS).fill('white')); r++; } } drawBoard(); } function spawnPiece() { const pieces = [ [[1, 1, 1], [0, 1, 0]], [[1, 1, 0], [0, 1, 1]], [[0, 1, 1], [1, 1, 0]], [[1, 1], [1, 1]], ]; currentPiece = pieces[Math.floor(Math.random() * pieces.length)]; currentX = Math.floor(COLS / 2) - Math.floor(currentPiece[0].length / 2); currentY = -1; drawPiece(); } document.addEventListener('keydown', event => { if (event.key === 'ArrowLeft') { movePiece(-1, 0); } else if (event.key === 'ArrowRight') { movePiece(1, 0); } else if (event.key === 'ArrowDown') { dropPiece(); } else if (event.key === 'ArrowUp') { rotatePiece(); } }); createBoard(); spawnPiece();

GPTgame

Sign up for free tokens!

Tetris game with potato-shaped bricks

GPTgame