/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); var storage = LK.import("@upit/storage.v1"); /**** * Classes ****/ var GameBoard = Container.expand(function () { var self = Container.call(this); // Create background grid var gridBackground = LK.getAsset('tile', { width: BOARD_SIZE, height: BOARD_SIZE, anchorX: 0, anchorY: 0, tint: 0xBBADA0 }); self.addChild(gridBackground); // Create cell backgrounds for (var row = 0; row < GRID_SIZE; row++) { for (var col = 0; col < GRID_SIZE; col++) { var cellBackground = LK.getAsset('tile', { width: TILE_SIZE, height: TILE_SIZE, anchorX: 0.5, anchorY: 0.5, tint: 0xCDC1B4, x: GRID_PADDING + col * (TILE_SIZE + TILE_SPACING) + TILE_SIZE / 2, y: GRID_PADDING + row * (TILE_SIZE + TILE_SPACING) + TILE_SIZE / 2 }); self.addChild(cellBackground); } } return self; }); var Tile = Container.expand(function (value, row, col) { var self = Container.call(this); self.value = value || 0; self.row = row || 0; self.col = col || 0; self.merging = false; // Create background tile var background = self.attachAsset('tile', { anchorX: 0.5, anchorY: 0.5, width: TILE_SIZE, height: TILE_SIZE }); // Set background color based on tile value background.tint = getTileColor(self.value); // Create text label self.label = new Text2(self.value.toString(), { size: 60, fill: self.value <= 4 ? "#776E65" : "#F9F6F2", align: 'center' }); self.label.anchor.set(0.5, 0.5); // If the value is 0, make the tile invisible (empty tile) if (self.value === 0) { self.visible = false; } self.addChild(self.label); // Update the tile appearance self.updateTile = function () { if (self.value > 0) { self.visible = true; self.label.setText(self.value.toString()); background.tint = getTileColor(self.value); // Adjust text size based on number of digits var valueStr = self.value.toString(); if (!self.label.style) { self.label.style = {}; } if (valueStr.length > 2) { self.label.style.size = 60 - (valueStr.length - 2) * 10; } else { self.label.style.size = 60; } // Set text color based on value self.label.style.fill = self.value <= 4 ? "#776E65" : "#F9F6F2"; } else { self.visible = false; } }; // Set position based on grid coordinates self.setGridPosition = function (row, col) { self.row = row; self.col = col; var targetX = GRID_PADDING + col * (TILE_SIZE + TILE_SPACING) + TILE_SIZE / 2; var targetY = GRID_PADDING + row * (TILE_SIZE + TILE_SPACING) + TILE_SIZE / 2; tween(self, { x: targetX, y: targetY }, { duration: 150, easing: tween.easeOut }); }; // Set initial position self.setGridPosition(row, col); // Animate tile appearing self.appear = function () { self.scale.x = 0.1; self.scale.y = 0.1; tween(self, { scaleX: 1, scaleY: 1 }, { duration: 200, easing: tween.easeOut }); }; // Animate tile merging self.merge = function () { self.scale.x = 1; self.scale.y = 1; tween(self, { scaleX: 1.2, scaleY: 1.2 }, { duration: 100, easing: tween.easeOut, onFinish: function onFinish() { tween(self, { scaleX: 1, scaleY: 1 }, { duration: 100, easing: tween.easeOut }); } }); }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0xFAF8EF }); /**** * Game Code ****/ // Constants var GRID_SIZE = 6; var TILE_SIZE = 64; var TILE_SPACING = 10; var GRID_PADDING = 15; var BOARD_SIZE = GRID_SIZE * TILE_SIZE + (GRID_SIZE - 1) * TILE_SPACING + GRID_PADDING * 2; // Game state var board = []; var tiles = []; var score = 0; var isAnimating = false; var hasMoved = false; // Create UI elements var scoreText = new Text2("Score: 0", { size: 40, fill: 0x776E65 }); scoreText.anchor.set(1, 0); LK.gui.topRight.addChild(scoreText); var titleText = new Text2("2048", { size: 80, fill: 0x776E65, weight: "bold" }); titleText.anchor.set(0, 0); LK.gui.topLeft.addChild(titleText); titleText.x = 120; // Move away from the top left corner var instructionsText = new Text2("Swipe to move tiles", { size: 30, fill: 0x776E65 }); instructionsText.anchor.set(0.5, 0); LK.gui.top.addChild(instructionsText); instructionsText.y = 100; // Initialize game board var gameBoard = game.addChild(new GameBoard()); gameBoard.x = (2048 - BOARD_SIZE) / 2; gameBoard.y = (2732 - BOARD_SIZE) / 2; // Create game board array function initializeBoard() { board = []; for (var i = 0; i < GRID_SIZE; i++) { board[i] = []; for (var j = 0; j < GRID_SIZE; j++) { board[i][j] = 0; } } } // Add a tile to the board function addTile() { var emptyCells = []; // Find all empty cells for (var row = 0; row < GRID_SIZE; row++) { for (var col = 0; col < GRID_SIZE; col++) { if (board[row][col] === 0) { emptyCells.push({ row: row, col: col }); } } } // If there are empty cells if (emptyCells.length > 0) { // Choose a random empty cell var randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)]; // 90% chance for a 2, 10% chance for a 4 var value = Math.random() < 0.9 ? 2 : 4; // Update the board board[randomCell.row][randomCell.col] = value; // Create and add the tile var tile = new Tile(value, randomCell.row, randomCell.col); tiles.push(tile); gameBoard.addChild(tile); // Animate the tile appearing tile.appear(); } } // Check if game is over function isGameOver() { // Check if there are any empty cells for (var row = 0; row < GRID_SIZE; row++) { for (var col = 0; col < GRID_SIZE; col++) { if (board[row][col] === 0) { return false; } } } // Check if there are any possible merges for (var row = 0; row < GRID_SIZE; row++) { for (var col = 0; col < GRID_SIZE; col++) { var value = board[row][col]; // Check right if (col < GRID_SIZE - 1 && board[row][col + 1] === value) { return false; } // Check down if (row < GRID_SIZE - 1 && board[row + 1][col] === value) { return false; } } } return true; } // Check if player has won (reached 2048 tile) function checkWin() { for (var row = 0; row < GRID_SIZE; row++) { for (var col = 0; col < GRID_SIZE; col++) { if (board[row][col] === 2048) { return true; } } } return false; } // Move tiles in a direction function moveTiles(direction) { if (isAnimating) { return; } isAnimating = true; hasMoved = false; // Clone the current board state to check if anything moved var previousBoard = []; for (var i = 0; i < GRID_SIZE; i++) { previousBoard[i] = board[i].slice(); } var tileMoves = []; // Process rows/columns in the right order based on direction switch (direction) { case "up": // Process columns from left to right, rows from top to bottom for (var col = 0; col < GRID_SIZE; col++) { for (var row = 0; row < GRID_SIZE; row++) { processTileMove(row, col, -1, 0, tileMoves); } } break; case "right": // Process rows from top to bottom, columns from right to left for (var row = 0; row < GRID_SIZE; row++) { for (var col = GRID_SIZE - 1; col >= 0; col--) { processTileMove(row, col, 0, 1, tileMoves); } } break; case "down": // Process columns from left to right, rows from bottom to top for (var col = 0; col < GRID_SIZE; col++) { for (var row = GRID_SIZE - 1; row >= 0; row--) { processTileMove(row, col, 1, 0, tileMoves); } } break; case "left": // Process rows from top to bottom, columns from left to right for (var row = 0; row < GRID_SIZE; row++) { for (var col = 0; col < GRID_SIZE; col++) { processTileMove(row, col, 0, -1, tileMoves); } } break; } // Check if any tile moved for (var i = 0; i < GRID_SIZE; i++) { for (var j = 0; j < GRID_SIZE; j++) { if (board[i][j] !== previousBoard[i][j]) { hasMoved = true; break; } } if (hasMoved) { break; } } // Apply tile movements if (tileMoves.length > 0) { LK.getSound('slide').play(); // Update all tiles' positions for (var i = 0; i < tiles.length; i++) { var tile = tiles[i]; if (!tile.merging) { tile.setGridPosition(tile.row, tile.col); } } } // After all animations, add a new tile if there was movement LK.setTimeout(function () { // Remove merged tiles for (var i = tiles.length - 1; i >= 0; i--) { if (tiles[i].merging) { tiles[i].destroy(); tiles.splice(i, 1); } } if (hasMoved) { addTile(); // Check if game is over if (isGameOver()) { LK.showGameOver(); } // Check if player has won if (checkWin()) { LK.showYouWin(); } } isAnimating = false; }, 200); } // Process a single tile move function processTileMove(row, col, rowDir, colDir, tileMoves) { if (board[row][col] === 0) { return; } var value = board[row][col]; var newRow = row; var newCol = col; var merged = false; // Find the farthest position and possible merge while (true) { var nextRow = newRow + rowDir; var nextCol = newCol + colDir; // Check if the next position is outside the grid if (nextRow < 0 || nextRow >= GRID_SIZE || nextCol < 0 || nextCol >= GRID_SIZE) { break; } // Check if the next position is empty if (board[nextRow][nextCol] === 0) { newRow = nextRow; newCol = nextCol; continue; } // Check if the next position has the same value (can merge) if (board[nextRow][nextCol] === value) { newRow = nextRow; newCol = nextCol; merged = true; } break; } // If the tile moved if (newRow !== row || newCol !== col) { // Update the board if (merged) { board[newRow][newCol] = value * 2; board[row][col] = 0; // Update score score += value * 2; scoreText.setText("Score: " + score); // Find the tile at the original position var movingTile = null; var targetTile = null; for (var i = 0; i < tiles.length; i++) { var tile = tiles[i]; if (tile.row === row && tile.col === col) { movingTile = tile; } if (tile.row === newRow && tile.col === newCol) { targetTile = tile; } } if (movingTile && targetTile) { // Move the tile movingTile.row = newRow; movingTile.col = newCol; movingTile.merging = true; targetTile.merging = true; // Animate the tile merging movingTile.setGridPosition(newRow, newCol); LK.setTimeout(function () { targetTile.value = value * 2; targetTile.updateTile(); targetTile.merging = false; targetTile.merge(); LK.getSound('merge').play(); }, 150); } } else { board[newRow][newCol] = value; board[row][col] = 0; // Find the tile at the original position for (var i = 0; i < tiles.length; i++) { var tile = tiles[i]; if (tile.row === row && tile.col === col) { // Update the tile's position tile.row = newRow; tile.col = newCol; break; } } } tileMoves.push({ fromRow: row, fromCol: col, toRow: newRow, toCol: newCol, merged: merged }); } } // Get tile color based on its value function getTileColor(value) { switch (value) { case 2: return 0xEEE4DA; case 4: return 0xEDE0C8; case 8: return 0xF2B179; case 16: return 0xF59563; case 32: return 0xF67C5F; case 64: return 0xF65E3B; case 128: return 0xEDCF72; case 256: return 0xEDCC61; case 512: return 0xEDC850; case 1024: return 0xEDC53F; case 2048: return 0xEDC22E; default: return 0x3C3A32; // For values > 2048 } } // Touch/mouse handling var startX = 0; var startY = 0; var isDragging = false; game.down = function (x, y) { startX = x; startY = y; isDragging = true; }; game.move = function (x, y) { if (!isDragging) { return; } }; game.up = function (x, y) { if (!isDragging) { return; } var dx = x - startX; var dy = y - startY; var absDx = Math.abs(dx); var absDy = Math.abs(dy); // Only process swipe if it's long enough if (Math.max(absDx, absDy) > 50) { if (absDx > absDy) { // Horizontal swipe if (dx > 0) { moveTiles("right"); } else { moveTiles("left"); } } else { // Vertical swipe if (dy > 0) { moveTiles("down"); } else { moveTiles("up"); } } } isDragging = false; }; // Initialize the game function startGame() { // Clear the board and tiles initializeBoard(); for (var i = 0; i < tiles.length; i++) { tiles[i].destroy(); } tiles = []; // Reset score score = 0; scoreText.setText("Score: " + score); // Add initial tiles addTile(); addTile(); // Play background music LK.playMusic('bgmusic'); } // Start the game startGame();