const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const blockSize = 20; const rows = canvas.height / blockSize; const columns = canvas.width / blockSize; let score = 0; const colors = [ '#000000', // black '#FF0000', // red '#00FF00', // green '#0000FF', // blue '#FFFF00', // yellow '#FF00FF', // magenta '#00FFFF', // cyan ]; const shapes = [ [ [1, 1, 1, 1] ], [ [1, 1], [1, 1] ], [ [1, 1, 0], [0, 1, 1] ], [ [0, 1, 1], [1, 1, 0] ], [ [1, 1, 1], [0, 1, 0] ], [ [1, 1, 1], [1, 0, 0] ], [ [1, 1, 1], [0, 0, 1] ], ]; let currentShape = getRandomShape(); let currentX = Math.floor(columns / 2) - Math.floor(currentShape[0].length / 2); let currentY = 0; let gameGrid = createGrid(); function getRandomShape() { const randomIndex = Math.floor(Math.random() * shapes.length); return shapes[randomIndex]; } function createGrid() { const grid = []; for (let row = 0; row < rows; row++) { grid[row] = []; for (let col = 0; col < columns; col++) { grid[row][col] = 0; } } return grid; } 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 drawGrid() { for (let row = 0; row < rows; row++) { for (let col = 0; col < columns; col++) { const blockColor = colors[gameGrid[row][col]]; drawBlock(col, row, blockColor); } } } function drawShape() { for (let row = 0; row < currentShape.length; row++) { for (let col = 0; col < currentShape[row].length; col++) { if (currentShape[row][col]) { const blockColor = colors[currentShape[row][col]]; drawBlock(currentX + col, currentY + row, blockColor); } } } } function collision(x, y, shape) { for (let row = 0; row < shape.length; row++) { for (let col = 0; col < shape[row].length; col++) { if (shape[row][col] && (gameGrid[y + row] && gameGrid[y + row][x + col]) !== 0) { return true; } } } return false; } function mergeShape() { for (let row = 0; row < currentShape.length; row++) { for (let col = 0; col < currentShape[row].length; col++) { if (currentShape[row][col]) { gameGrid[currentY + row][currentX + col] = currentShape[row][col]; } } } } function clearRows() { for (let row = rows - 1; row >= 0; row--) { if (gameGrid[row].every(block => block !== 0)) { gameGrid.splice(row, 1); gameGrid.unshift(Array(columns).fill(0)); score += 10; } } } function rotateShape() { const rotatedShape = []; for (let col = 0; col < currentShape[0].length; col++) { const newRow = []; for (let row = currentShape.length - 1; row >= 0; row--) { newRow.push(currentShape[row][col]); } rotatedShape.push(newRow); } if (!collision(currentX, currentY, rotatedShape)) { currentShape = rotatedShape; } } function moveShape(dirX, dirY) { if (!collision(currentX + dirX, currentY + dirY, currentShape)) { currentX += dirX; currentY += dirY; } } function updateGame() { if (!collision(currentX, currentY + 1, currentShape)) { currentY++; } else { mergeShape(); clearRows(); currentShape = getRandomShape(); currentX = Math.floor(columns / 2) - Math.floor(currentShape[0].length / 2); currentY = 0; if (collision(currentX, currentY, currentShape)) { // Game over clearInterval(gameLoop); } } } function drawScore() { ctx.fillStyle = '#FFFFFF'; ctx.font = '20px Arial'; ctx.fillText(`Score: ${score}`, 10, 30); } function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); updateGame(); drawGrid(); drawShape(); drawScore(); } document.addEventListener('keydown', (event) => { if (event.keyCode === 37) { moveShape(-1, 0); // Left arrow key } else if (event.keyCode === 39) { moveShape(1, 0); // Right arrow key } else if (event.keyCode === 40) { moveShape(0, 1); // Down arrow key } else if (event.keyCode === 38) { rotateShape(); // Up arrow key } }); const gameLoop = setInterval(gameLoop, 500);

GPTgame

Sign up for free tokens!

Tetris like game, far themed

GPTgame