const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const gridSize = 4; const cellSize = canvas.width / gridSize; let grid = []; let score = 0; function init() { grid = []; score = 0; for (let i = 0; i < gridSize; i++) { grid[i] = []; for (let j = 0; j < gridSize; j++) { grid[i][j] = 0; } } addRandomTile(); addRandomTile(); drawGrid(); } function addRandomTile() { const availableCells = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j] === 0) { availableCells.push({ row: i, col: j }); } } } if (availableCells.length > 0) { const randomCell = availableCells[Math.floor(Math.random() * availableCells.length)]; grid[randomCell.row][randomCell.col] = Math.random() < 0.9 ? 2 : 4; } } function drawGrid() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { const value = grid[i][j]; const x = j * cellSize; const y = i * cellSize; ctx.fillStyle = getTileColor(value); ctx.fillRect(x, y, cellSize, cellSize); if (value !== 0) { ctx.fillStyle = getTextColor(value); ctx.font = 'bold 24px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(value, x + cellSize / 2, y + cellSize / 2); } } } } function getTileColor(value) { switch (value) { case 2: return '#eee4da'; case 4: return '#ede0c8'; case 8: return '#f2b179'; case 16: return '#f59563'; case 32: return '#f67c5f'; case 64: return '#f65e3b'; case 128: return '#edcf72'; case 256: return '#edcc61'; case 512: return '#edc850'; case 1024: return '#edc53f'; case 2048: return '#edc22e'; default: return '#cdc1b4'; } } function getTextColor(value) { return value <= 4 ? '#776e65' : '#f9f6f2'; } function swipeLeft() { let moved = false; for (let i = 0; i < gridSize; i++) { for (let j = 1; j < gridSize; j++) { if (grid[i][j] !== 0) { let k = j; while (k > 0 && grid[i][k - 1] === 0) { grid[i][k - 1] = grid[i][k]; grid[i][k] = 0; k--; moved = true; } if (k > 0 && grid[i][k - 1] === grid[i][k]) { grid[i][k - 1] *= 2; score += grid[i][k - 1]; grid[i][k] = 0; moved = true; } } } } if (moved) { addRandomTile(); drawGrid(); } } function swipeRight() { let moved = false; for (let i = 0; i < gridSize; i++) { for (let j = gridSize - 2; j >= 0; j--) { if (grid[i][j] !== 0) { let k = j; while (k < gridSize - 1 && grid[i][k + 1] === 0) { grid[i][k + 1] = grid[i][k]; grid[i][k] = 0; k++; moved = true; } if (k < gridSize - 1 && grid[i][k + 1] === grid[i][k]) { grid[i][k + 1] *= 2; score += grid[i][k + 1]; grid[i][k] = 0; moved = true; } } } } if (moved) { addRandomTile(); drawGrid(); } } function swipeUp() { let moved = false; for (let i = 1; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j] !== 0) { let k = i; while (k > 0 && grid[k - 1][j] === 0) { grid[k - 1][j] = grid[k][j]; grid[k][j] = 0; k--; moved = true; } if (k > 0 && grid[k - 1][j] === grid[k][j]) { grid[k - 1][j] *= 2; score += grid[k - 1][j]; grid[k][j] = 0; moved = true; } } } } if (moved) { addRandomTile(); drawGrid(); } } function swipeDown() { let moved = false; for (let i = gridSize - 2; i >= 0; i--) { for (let j = 0; j < gridSize; j++) { if (grid[i][j] !== 0) { let k = i; while (k < gridSize - 1 && grid[k + 1][j] === 0) { grid[k + 1][j] = grid[k][j]; grid[k][j] = 0; k++; moved = true; } if (k < gridSize - 1 && grid[k + 1][j] === grid[k][j]) { grid[k + 1][j] *= 2; score += grid[k + 1][j]; grid[k][j] = 0; moved = true; } } } } if (moved) { addRandomTile(); drawGrid(); } } function handleSwipe(event) { const { deltaX, deltaY } = event; if (Math.abs(deltaX) > Math.abs(deltaY)) { if (deltaX > 0) { swipeRight(); } else { swipeLeft(); } } else { if (deltaY > 0) { swipeDown(); } else { swipeUp(); } } } document.addEventListener('keydown', (event) => { switch (event.key) { case 'ArrowLeft': swipeLeft(); break; case 'ArrowRight': swipeRight(); break; case 'ArrowUp': swipeUp(); break; case 'ArrowDown': swipeDown(); break; } }); canvas.addEventListener('touchstart', (event) => { startX = event.touches[0].clientX; startY = event.touches[0].clientY; }); canvas.addEventListener('touchend', (event) => { const endX = event.changedTouches[0].clientX; const endY = event.changedTouches[0].clientY; const deltaX = endX - startX; const deltaY = endY - startY; handleSwipe({ deltaX, deltaY }); }); init();

GPTgame

Sign up for free tokens!

Сделай 2048, где можно управлять свайпами

GPTgame