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 bionicleFigures = [ [ [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], ], [ [0, 1, 0], [1, 1, 1], ], [ [1, 0, 0], [1, 1, 1], ], ]; function drawBlock(x, y, color) { ctx.fillStyle = color; ctx.fillRect(x * blockSize, y * blockSize, blockSize, blockSize); ctx.strokeStyle = 'black'; ctx.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize); } function drawBoard() { for (let row = 0; row < rows; row++) { for (let col = 0; col < columns; col++) { if (board[row][col]) { drawBlock(col, row, board[row][col]); } } } } function collide() { for (let row = 0; row < currentFigure.length; row++) { for (let col = 0; col < currentFigure[row].length; col++) { if ( currentFigure[row][col] && (board[row + currentFigureY] && board[row + currentFigureY][col + currentFigureX]) !== 0 ) { return true; } } } return false; } function rotateFigure() { const tempFigure = currentFigure; currentFigure = currentFigure[0].map((_, index) => currentFigure.map(row => row[index])).reverse(); if (collide()) { currentFigure = tempFigure; } } function moveFigure(direction) { currentFigureX += direction; if (collide()) { currentFigureX -= direction; } } function dropFigure() { currentFigureY++; if (collide()) { currentFigureY--; mergeFigure(); removeFullRows(); generateFigure(); if (collide()) { // Game over clearInterval(gameLoop); } } } function mergeFigure() { for (let row = 0; row < currentFigure.length; row++) { for (let col = 0; col < currentFigure[row].length; col++) { if (currentFigure[row][col]) { board[row + currentFigureY][col + currentFigureX] = currentFigureColor; } } } } function removeFullRows() { outer: for (let row = rows - 1; row >= 0; row--) { for (let col = 0; col < columns; col++) { if (!board[row][col]) { continue outer; } } board.splice(row, 1); board.unshift(new Array(columns).fill(0)); score += 10; } } function generateFigure() { const randomIndex = Math.floor(Math.random() * bionicleFigures.length); currentFigure = bionicleFigures[randomIndex]; currentFigureColor = `hsl(${Math.random() * 360}, 100%, 50%)`; currentFigureX = Math.floor(columns / 2) - Math.floor(currentFigure[0].length / 2); currentFigureY = 0; } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBoard(); drawFigure(); drawScore(); } function drawFigure() { for (let row = 0; row < currentFigure.length; row++) { for (let col = 0; col < currentFigure[row].length; col++) { if (currentFigure[row][col]) { drawBlock(col + currentFigureX, row + currentFigureY, currentFigureColor); } } } } function drawScore() { ctx.fillStyle = 'black'; ctx.font = '20px Arial'; ctx.fillText(`Score: ${score}`, 20, 40); } function handleKeyPress(event) { if (event.keyCode === 37) { moveFigure(-1); // Left arrow key } else if (event.keyCode === 39) { moveFigure(1); // Right arrow key } else if (event.keyCode === 40) { dropFigure(); // Down arrow key } else if (event.keyCode === 38) { rotateFigure(); // Up arrow key } } document.addEventListener('keydown', handleKeyPress); const board = []; for (let row = 0; row < rows; row++) { board[row] = new Array(columns).fill(0); } let currentFigure; let currentFigureColor; let currentFigureX; let currentFigureY; generateFigure(); const gameLoop = setInterval(() => { dropFigure(); draw(); }, 500);

GPTgame

Sign up for free tokens!

tetris where figures are bionicles

GPTgame