const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const blockSize = 20; const boardWidth = 10; const boardHeight = 20; const board = []; for (let i = 0; i < boardHeight; i++) { board[i] = []; for (let j = 0; j < boardWidth; j++) { board[i][j] = 0; } } let currentPiece = generatePiece(); let nextPiece = generatePiece(); let score = 0; let gameOver = false; document.addEventListener('keydown', handleKeyDown); function handleKeyDown(event) { if (event.keyCode === 37) { movePiece(-1, 0); } else if (event.keyCode === 39) { movePiece(1, 0); } else if (event.keyCode === 40) { movePiece(0, 1); } else if (event.keyCode === 38) { rotatePiece(); } } function generatePiece() { const pieces = [ [[1, 1], [1, 1]], [[0, 1, 1], [1, 1, 0]], [[1, 1, 0], [0, 1, 1]], [[0, 1, 0], [1, 1, 1]], [[1, 0, 0], [1, 1, 1]], [[0, 0, 1], [1, 1, 1]], [[1, 1, 1, 1]], ]; const piece = pieces[Math.floor(Math.random() * pieces.length)]; return { piece, x: Math.floor((boardWidth - piece[0].length) / 2), y: 0, }; } function drawBlock(x, y, color) { ctx.fillStyle = color; ctx.beginPath(); ctx.arc((x + 0.5) * blockSize, (y + 0.5) * blockSize, blockSize / 2, 0, Math.PI * 2); ctx.fill(); } function drawBoard() { for (let i = 0; i < boardHeight; i++) { for (let j = 0; j < boardWidth; j++) { if (board[i][j]) { drawBlock(j, i, 'blue'); } } } } function drawPiece() { const { piece, x, y } = currentPiece; for (let i = 0; i < piece.length; i++) { for (let j = 0; j < piece[i].length; j++) { if (piece[i][j]) { drawBlock(x + j, y + i, 'red'); } } } } function movePiece(dx, dy) { const { piece, x, y } = currentPiece; if (canMove(piece, x + dx, y + dy)) { currentPiece.x += dx; currentPiece.y += dy; } else if (dy > 0) { placePiece(); } } function rotatePiece() { const { piece, x, y } = currentPiece; const rotatedPiece = []; for (let i = 0; i < piece[0].length; i++) { rotatedPiece[i] = []; for (let j = 0; j < piece.length; j++) { rotatedPiece[i][j] = piece[piece.length - 1 - j][i]; } } if (canMove(rotatedPiece, x, y)) { currentPiece.piece = rotatedPiece; } } function canMove(piece, x, y) { for (let i = 0; i < piece.length; i++) { for (let j = 0; j < piece[i].length; j++) { if (piece[i][j]) { const newX = x + j; const newY = y + i; if (newX < 0 || newX >= boardWidth || newY >= boardHeight || board[newY][newX]) { return false; } } } } return true; } function placePiece() { const { piece, x, y } = currentPiece; for (let i = 0; i < piece.length; i++) { for (let j = 0; j < piece[i].length; j++) { if (piece[i][j]) { board[y + i][x + j] = 1; } } } checkLines(); currentPiece = nextPiece; nextPiece = generatePiece(); if (!canMove(currentPiece.piece, currentPiece.x, currentPiece.y)) { gameOver = true; } } function checkLines() { let linesCleared = 0; for (let i = boardHeight - 1; i >= 0; i--) { if (board[i].every(block => block)) { board.splice(i, 1); board.unshift(new Array(boardWidth).fill(0)); linesCleared++; i++; } } score += linesCleared ** 2; } function drawNextPiece() { const { piece } = nextPiece; const startX = boardWidth + 2; const startY = 2; for (let i = 0; i < piece.length; i++) { for (let j = 0; j < piece[i].length; j++) { if (piece[i][j]) { drawBlock(startX + j, startY + i, 'red'); } } } } function drawScore() { ctx.font = '20px Arial'; ctx.fillStyle = 'black'; ctx.fillText(`Score: ${score}`, 10, 30); } function drawGameOver() { ctx.font = '50px Arial'; ctx.fillStyle = 'red'; ctx.fillText('Game Over', 50, canvas.height / 2); } function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBoard(); drawPiece(); drawNextPiece(); drawScore(); if (gameOver) { drawGameOver(); return; } movePiece(0, 1); setTimeout(gameLoop, 500); } gameLoop();

GPTgame

Sign up for free tokens!

A game like Tetris, just with rounded blocks

GPTgame