const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const grid = 30; const tetrominoes = [ { shape: [[1, 1, 1, 1]], symbol: 'H' }, { shape: [[1, 1, 1], [0, 1, 0]], symbol: 'He' }, { shape: [[1, 1, 0], [0, 1, 1]], symbol: 'Li' }, { shape: [[0, 1, 1], [1, 1, 0]], symbol: 'Be' }, { shape: [[1, 1], [1, 1]], symbol: 'B' } ]; let board = Array.from({ length: 10 }, () => Array(10).fill(0)); let current; let x = 3, y = 0; let dropStart = Date.now(); let gameOver = false; function drawSquare(x, y, symbol) { ctx.fillStyle = 'black'; ctx.fillRect(x * grid, y * grid, grid, grid); ctx.fillStyle = 'white'; ctx.fillText(symbol, x * grid + 5, y * grid + 20); } function drawBoard() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let r = 0; r < 10; r++) { for (let c = 0; c < 10; c++) { if (board[r][c]) { drawSquare(c, r, board[r][c]); } } } for (let r = 0; r < current.shape.length; r++) { for (let c = 0; c < current.shape[r].length; c++) { if (current.shape[r][c]) { drawSquare(x + c, y + r, current.symbol); } } } } function collision(x, y, shape) { for (let r = 0; r < shape.length; r++) { for (let c = 0; c < shape[r].length; c++) { if (shape[r][c]) { let newX = x + c; let newY = y + r; if (newX < 0 || newX >= 10 || newY >= 10 || board[newY][newX]) { return true; } } } } return false; } function rotate(shape) { let newShape = []; for (let c = 0; c < shape[0].length; c++) { newShape[c] = []; for (let r = shape.length - 1; r >= 0; r--) { newShape[c][shape.length - 1 - r] = shape[r][c]; } } return newShape; } function drop() { if (!collision(x, y + 1, current.shape)) { y++; } else { for (let r = 0; r < current.shape.length; r++) { for (let c = 0; c < current.shape[r].length; c++) { if (current.shape[r][c]) { board[y + r][x + c] = current.symbol; } } } for (let r = 0; r < 10; r++) { if (board[r].every(cell => cell)) { board.splice(r, 1); board.unshift(Array(10).fill(0)); } } if (y === 0) { gameOver = true; } current = tetrominoes[Math.floor(Math.random() * tetrominoes.length)]; x = 3; y = 0; } } function moveLeft() { if (!collision(x - 1, y, current.shape)) { x--; } } function moveRight() { if (!collision(x + 1, y, current.shape)) { x++; } } function rotateTetromino() { let newShape = rotate(current.shape); if (!collision(x, y, newShape)) { current.shape = newShape; } } document.addEventListener('keydown', (e) => { if (gameOver) return; if (e.key === 'ArrowLeft') moveLeft(); if (e.key === 'ArrowRight') moveRight(); if (e.key === 'ArrowUp') rotateTetromino(); if (e.key === 'ArrowDown') drop(); drawBoard(); }); function gameLoop() { if (gameOver) return; let now = Date.now(); let delta = now - dropStart; if (delta > 1000) { drop(); dropStart = Date.now(); } drawBoard(); requestAnimationFrame(gameLoop); } current = tetrominoes[Math.floor(Math.random() * tetrominoes.length)]; ctx.font = '20px Arial

GPTgame

Sign up for free tokens!

A tetris with chemical symbols written in the pieces

GPTgame