const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const blockSize = 20; const rows = canvas.height / blockSize; const columns = canvas.width / blockSize; const colors = [ '#000000', // black '#FF0000', // red '#00FF00', // green '#0000FF', // blue '#FFFF00', // yellow '#FF00FF', // magenta '#00FFFF', // cyan '#FFFFFF' // white ]; const figures = [ [[1, 1, 1, 1]], // I [[1, 1], [1, 1]], // O [[1, 1, 1], [0, 1, 0]], // T [[1, 1, 0], [0, 1, 1]], // S [[0, 1, 1], [1, 1, 0]], // Z [[1, 1, 1], [0, 0, 1]], // J [[1, 1, 1], [1, 0, 0]] // L ]; let board = []; for (let row = 0; row < rows; row++) { board[row] = []; for (let col = 0; col < columns; col++) { board[row][col] = 0; } } let currentFigure = getRandomFigure(); let currentRow = 0; let currentCol = Math.floor(columns / 2) - Math.floor(currentFigure[0].length / 2); let score = 0; document.addEventListener('keydown', handleKeyDown); function handleKeyDown(event) { if (event.keyCode === 37) { // left arrow key moveLeft(); } else if (event.keyCode === 39) { // right arrow key moveRight(); } else if (event.keyCode === 40) { // down arrow key moveDown(); } else if (event.keyCode === 38) { // up arrow key rotate(); } } function getRandomFigure() { const randomIndex = Math.floor(Math.random() * figures.length); return figures[randomIndex]; } function drawBlock(x, y, color) { ctx.fillStyle = color; ctx.fillRect(x * blockSize, y * blockSize, blockSize, blockSize); ctx.strokeStyle = '#000000'; ctx.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize); } function drawBoard() { for (let row = 0; row < rows; row++) { for (let col = 0; col < columns; col++) { drawBlock(col, row, colors[board[row][col]]); } } } function drawFigure() { for (let row = 0; row < currentFigure.length; row++) { for (let col = 0; col < currentFigure[row].length; col++) { if (currentFigure[row][col]) { drawBlock(currentCol + col, currentRow + row, colors[currentFigure[row][col]]); } } } } function isCollision() { for (let row = 0; row < currentFigure.length; row++) { for (let col = 0; col < currentFigure[row].length; col++) { if ( currentFigure[row][col] && (currentRow + row >= rows || currentCol + col < 0 || currentCol + col >= columns || board[currentRow + row][currentCol + col]) ) { return true; } } } return false; } function mergeFigure() { for (let row = 0; row < currentFigure.length; row++) { for (let col = 0; col < currentFigure[row].length; col++) { if (currentFigure[row][col]) { board[currentRow + row][currentCol + col] = currentFigure[row][col]; } } } } function checkFullRows() { for (let row = rows - 1; row >= 0; row--) { if (board[row].every(block => block !== 0)) { board.splice(row, 1); board.unshift(new Array(columns).fill(0)); score++; } } } function moveLeft() { currentCol--; if (isCollision()) { currentCol++; } } function moveRight() { currentCol++; if (isCollision()) { currentCol--; } } function moveDown() { currentRow++; if (isCollision()) { currentRow--; mergeFigure(); checkFullRows(); currentFigure = getRandomFigure(); currentRow = 0; currentCol = Math.floor(columns / 2) - Math.floor(currentFigure[0].length / 2); if (isCollision()) { // Game over alert('Game over!'); resetGame(); } } } function rotate() { const rotatedFigure = []; for (let col = 0; col < currentFigure[0].length; col++) { rotatedFigure[col] = []; for (let row = currentFigure.length - 1; row >= 0; row--) { rotatedFigure[col][currentFigure.length - 1 - row] = currentFigure[row][col]; } } currentFigure = rotatedFigure; if (isCollision()) { currentFigure = rotateFigureBack(); } } function rotateFigureBack() { const rotatedFigure = []; for (let col = 0; col < currentFigure[0].length; col++) { rotatedFigure[col] = []; for (let row = 0; row < currentFigure.length; row++) { rotatedFigure[col][row] = currentFigure[currentFigure.length - 1 - row][col]; } } return rotatedFigure; } function resetGame() { board = []; for (let row = 0; row < rows; row++) { board[row] = []; for (let col = 0; col < columns; col++) { board[row][col] = 0; } } score = 0; } function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBoard(); drawFigure(); moveDown(); requestAnimationFrame(gameLoop); } gameLoop();

GPTgame

Sign up for free tokens!

Tetris with full functional and all figures

GPTgame