const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const SIZE = 4; const TILE_SIZE = 100; const TILE_MARGIN = 10; const BOARD_SIZE = TILE_SIZE * SIZE + TILE_MARGIN * (SIZE + 1); canvas.width = BOARD_SIZE; canvas.height = BOARD_SIZE; const colors = { 2: '#eee4da', 4: '#ede0c8', 8: '#f2b179', 16: '#f59563', 32: '#f67c5f', 64: '#f65e3b', 128: '#edcf72', 256: '#edcc61', 512: '#edc850', 1024: '#edc53f', 2048: '#edc22e', }; let board = []; function initializeBoard() { for (let i = 0; i < SIZE; i++) { board[i] = []; for (let j = 0; j < SIZE; j++) { board[i][j] = 0; } } } function drawTile(x, y, value) { ctx.fillStyle = colors[value]; ctx.fillRect( TILE_MARGIN + (TILE_MARGIN + TILE_SIZE) * x, TILE_MARGIN + (TILE_MARGIN + TILE_SIZE) * y, TILE_SIZE, TILE_SIZE ); ctx.fillStyle = '#776e65'; ctx.font = 'bold 40px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText( value, TILE_MARGIN + TILE_SIZE / 2 + (TILE_MARGIN + TILE_SIZE) * x, TILE_MARGIN + TILE_SIZE / 2 + (TILE_MARGIN + TILE_SIZE) * y ); } function drawBoard() { ctx.clearRect(0, 0, BOARD_SIZE, BOARD_SIZE); for (let i = 0; i < SIZE; i++) { for (let j = 0; j < SIZE; j++) { const value = board[i][j]; drawTile(i, j, value); } } } function addRandomTile() { const emptyTiles = []; for (let i = 0; i < SIZE; i++) { for (let j = 0; j < SIZE; j++) { if (board[i][j] === 0) { emptyTiles.push({ x: i, y: j }); } } } if (emptyTiles.length > 0) { const randomIndex = Math.floor(Math.random() * emptyTiles.length); const { x, y } = emptyTiles[randomIndex]; board[x][y] = Math.random() < 0.9 ? 2 : 4; } } function moveTiles(direction) { const newBoard = JSON.parse(JSON.stringify(board)); switch (direction) { case 'up': for (let j = 0; j < SIZE; j++) { let current = 0; let merged = false; for (let i = 1; i < SIZE; i++) { if (newBoard[i][j] !== 0) { if (newBoard[i][j] === newBoard[current][j] && !merged) { newBoard[current][j] *= 2; newBoard[i][j] = 0; merged = true; } else { current++; if (i !== current) { newBoard[current][j] = newBoard[i][j]; newBoard[i][j] = 0; } merged = false; } } } } break; case 'down': for (let j = 0; j < SIZE; j++) { let current = SIZE - 1; let merged = false; for (let i = SIZE - 2; i >= 0; i--) { if (newBoard[i][j] !== 0) { if (newBoard[i][j] === newBoard[current][j] && !merged) { newBoard[current][j] *= 2; newBoard[i][j] = 0; merged = true; } else { current--; if (i !== current) { newBoard[current][j] = newBoard[i][j]; newBoard[i][j] = 0; } merged = false; } } } } break; case 'left': for (let i = 0; i < SIZE; i++) { let current = 0; let merged = false; for (let j = 1; j < SIZE; j++) { if (newBoard[i][j] !== 0) { if (newBoard[i][j] === newBoard[i][current] && !merged) { newBoard[i][current] *= 2; newBoard[i][j] = 0; merged = true; } else { current++; if (j !== current) { newBoard[i][current] = newBoard[i][j]; newBoard[i][j] = 0; } merged = false; } } } } break; case 'right': for (let i = 0; i < SIZE; i++) { let current = SIZE - 1; let merged = false; for (let j = SIZE - 2; j >= 0; j--) { if (newBoard[i][j] !== 0) { if (newBoard[i][j] === newBoard[i][current] && !merged) { newBoard[i][current] *= 2; newBoard[i][j] = 0; merged = true; } else { current--; if (j !== current) { newBoard[i][current] = newBoard[i][j]; newBoard[i][j] = 0; } merged = false; } } } } break; } if (JSON.stringify(board) !== JSON.stringify(newBoard)) { board = newBoard; addRandomTile(); drawBoard(); } } function isGameOver() { for (let i = 0; i < SIZE; i++) { for (let j = 0; j < SIZE; j++) { if (board[i][j] === 0) { return false; } if (i > 0 && board[i][j] === board[i - 1][j]) { return false; } if (i < SIZE - 1 && board[i][j] === board[i + 1][j]) { return false; } if (j > 0 && board[i][j] === board[i][j - 1]) { return false; } if (j < SIZE - 1 && board[i][j] === board[i][j + 1]) { return false; } } } return true; } function handleKeyDown(event) { if (isGameOver()) { return; } switch (event.key) { case 'ArrowUp': moveTiles('up'); break; case 'ArrowDown': moveTiles('down'); break; case 'ArrowLeft': moveTiles('left'); break; case 'ArrowRight': moveTiles('right'); break; } } document.addEventListener('keydown', handleKeyDown); initializeBoard(); addRandomTile(); addRandomTile(); drawBoard();

GPTgame

Sign up for free tokens!

Игра "2048" с цветными панелями и анимацией

GPTgame