/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");

/**** 
* Classes
****/ 
// Tile class for each grid cell
var Tile = Container.expand(function () {
	var self = Container.call(this);
	// Properties
	self.value = 2; // Default value
	self.row = 0;
	self.col = 0;
	self.asset = null;
	self.text = null;
	// Set tile value and update appearance
	self.setValue = function (val) {
		self.value = val;
		// Remove old asset if exists
		if (self.asset) {
			self.removeChild(self.asset);
		}
		// Choose asset by value
		var assetId = 'tile' + val;
		var supportedAssets = {
			'tile2': true,
			'tile4': true,
			'tile8': true,
			'tile16': true,
			'tile32': true,
			'tile64': true,
			'tile128': true,
			'tile256': true,
			'tile512': true,
			'tile1024': true,
			'tile2048': true
		};
		if (!supportedAssets[assetId]) assetId = 'tile2048'; // fallback
		self.asset = self.attachAsset(assetId, {
			anchorX: 0.5,
			anchorY: 0.5
		});
		// Remove old text if exists
		if (self.text) {
			self.removeChild(self.text);
		}
		// Add value text
		var label = '';
		if (val === 2) label = 'Cherry';else if (val === 4) label = 'Lemon';else if (val === 8) label = 'Orange';else if (val === 16) label = 'Apple';else if (val === 32) label = 'Grape';else if (val === 64) label = 'Banana';else if (val === 128) label = 'Pineapple';else if (val === 256) label = 'Watermelon';else if (val === 512) label = 'Strawberry';else if (val === 1024) label = 'Mango';else if (val === 2048) label = 'Fruit King!';else label = val + '';
		self.text = new Text2(label, {
			size: 60,
			fill: 0xFFFFFF,
			align: "center"
		});
		self.text.anchor.set(0.5, 0.5);
		self.text.y = 0;
		self.text.x = 0;
		self.addChild(self.text);
	};
	// Animate merge
	self.animateMerge = function () {
		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.easeIn
				});
			}
		});
	};
	// Animate spawn
	self.animateSpawn = function () {
		self.scaleX = 0.2;
		self.scaleY = 0.2;
		tween(self, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 150,
			easing: tween.easeOut
		});
	};
	// Set position on grid
	self.setGridPos = function (row, col, cellSize, gridX, gridY) {
		self.row = row;
		self.col = col;
		self.x = gridX + col * cellSize + cellSize / 2;
		self.y = gridY + row * cellSize + cellSize / 2;
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0xffffff
});

/**** 
* Game Code
****/ 
// --- Grid and Layout ---
// Space tile assets: We'll use colored ellipses for different tile values
// 2: Asteroid (gray), 4: Moon (light blue), 8: Planet (blue), 16: Star (yellow), 32: Red Giant (red), 64: Neutron Star (purple), 128: Black Hole (black), 256: Nebula (pink), 512: Galaxy (cyan), 1024: Quasar (orange), 2048: Universe (white)
// Optionally, a subtle grid background
var gridSize = 4;
var cellSize = 370; // 370*4=1480, bigger board
var gridPadding = 28;
var gridWidth = cellSize * gridSize + gridPadding * (gridSize + 1);
var gridHeight = cellSize * gridSize + gridPadding * (gridSize + 1);
var gridX = Math.floor((2048 - gridWidth) / 2);
var gridY = Math.floor((2732 - gridHeight) / 2);
// --- Game State ---
var grid = []; // 2D array of tiles or null
var tiles = []; // All tile objects for easy management
var score = 0;
var scoreTxt = null;
var isMoving = false; // Prevent input during animation
// --- GUI: Score ---
scoreTxt = new Text2('0', {
	size: 120,
	fill: "#fff"
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
// --- Draw grid background ---
var gridBg = LK.getAsset('gridBg', {
	anchorX: 0,
	anchorY: 0,
	x: gridX,
	y: gridY,
	width: gridWidth,
	height: gridHeight
});
game.addChild(gridBg);
// --- Draw grid cell backgrounds ---
// (Removed transparent fruit tiles on the back)
// --- Initialize grid state ---
function resetGrid() {
	grid = [];
	for (var r = 0; r < gridSize; r++) {
		var row = [];
		for (var c = 0; c < gridSize; c++) {
			row.push(null);
		}
		grid.push(row);
	}
	// Remove all tiles from game
	for (var i = 0; i < tiles.length; i++) {
		tiles[i].destroy();
	}
	tiles = [];
	score = 0;
	scoreTxt.setText(score);
}
// --- Add a new tile (2 or 4) at random empty position ---
function addRandomTile() {
	var empties = [];
	for (var r = 0; r < gridSize; r++) {
		for (var c = 0; c < gridSize; c++) {
			if (!grid[r][c]) empties.push({
				r: r,
				c: c
			});
		}
	}
	if (empties.length === 0) return false;
	var idx = Math.floor(Math.random() * empties.length);
	var pos = empties[idx];
	var val = Math.random() < 0.9 ? 2 : 4;
	var tile = new Tile();
	tile.setValue(val);
	tile.setGridPos(pos.r, pos.c, cellSize, gridX + gridPadding, gridY + gridPadding);
	tile.animateSpawn();
	grid[pos.r][pos.c] = tile;
	tiles.push(tile);
	game.addChild(tile);
	return true;
}
// --- Move/merge logic ---
function canMove() {
	// Check for any empty cell
	for (var r = 0; r < gridSize; r++) {
		for (var c = 0; c < gridSize; c++) {
			if (!grid[r][c]) return true;
		}
	}
	// Check for any mergeable neighbor
	for (var r = 0; r < gridSize; r++) {
		for (var c = 0; c < gridSize; c++) {
			var tile = grid[r][c];
			if (!tile) continue;
			// Right
			if (c + 1 < gridSize && grid[r][c + 1] && grid[r][c + 1].value === tile.value) return true;
			// Down
			if (r + 1 < gridSize && grid[r + 1][c] && grid[r + 1][c].value === tile.value) return true;
		}
	}
	return false;
}
// Returns true if any tile reached 2048
function has2048() {
	for (var r = 0; r < gridSize; r++) {
		for (var c = 0; c < gridSize; c++) {
			if (grid[r][c] && grid[r][c].value === 2048) return true;
		}
	}
	return false;
}
// Move tiles in a direction: 'up', 'down', 'left', 'right'
function moveTiles(dir) {
	if (isMoving) return;
	isMoving = true;
	var moved = false;
	var mergedThisMove = [];
	// Helper to reset merged flags
	function resetMerged() {
		for (var i = 0; i < tiles.length; i++) {
			tiles[i].merged = false;
		}
	}
	resetMerged();
	// For each direction, set up iteration order
	var startR = 0,
		endR = gridSize,
		stepR = 1;
	var startC = 0,
		endC = gridSize,
		stepC = 1;
	if (dir === 'up') {
		startR = 1;
		endR = gridSize;
		stepR = 1;
	}
	if (dir === 'down') {
		startR = gridSize - 2;
		endR = -1;
		stepR = -1;
	}
	if (dir === 'left') {
		startC = 1;
		endC = gridSize;
		stepC = 1;
	}
	if (dir === 'right') {
		startC = gridSize - 2;
		endC = -1;
		stepC = -1;
	}
	// Move/merge logic
	var movedTiles = [];
	if (dir === 'up' || dir === 'down') {
		for (var c = 0; c < gridSize; c++) {
			for (var r = startR; r != endR; r += stepR) {
				var tile = grid[r][c];
				if (!tile) continue;
				var tr = r;
				while (true) {
					var nr = tr + (dir === 'up' ? -1 : 1);
					if (nr < 0 || nr >= gridSize) break;
					if (!grid[nr][c]) {
						// Move
						grid[nr][c] = tile;
						grid[tr][c] = null;
						tr = nr;
						moved = true;
					} else if (grid[nr][c].value === tile.value && !grid[nr][c].merged && !tile.merged) {
						// Merge
						grid[nr][c].setValue(tile.value * 2);
						grid[nr][c].animateMerge();
						grid[nr][c].merged = true;
						score += tile.value * 2;
						scoreTxt.setText(score);
						tile.destroy();
						tiles.splice(tiles.indexOf(tile), 1);
						grid[tr][c] = null;
						moved = true;
						break;
					} else {
						break;
					}
				}
				// Animate move
				if (tile && tr !== r) {
					tile.setGridPos(tr, c, cellSize, gridX + gridPadding, gridY + gridPadding);
					movedTiles.push(tile);
				}
			}
		}
	} else {
		for (var r = 0; r < gridSize; r++) {
			for (var c = startC; c != endC; c += stepC) {
				var tile = grid[r][c];
				if (!tile) continue;
				var tc = c;
				while (true) {
					var nc = tc + (dir === 'left' ? -1 : 1);
					if (nc < 0 || nc >= gridSize) break;
					if (!grid[r][nc]) {
						// Move
						grid[r][nc] = tile;
						grid[r][tc] = null;
						tc = nc;
						moved = true;
					} else if (grid[r][nc].value === tile.value && !grid[r][nc].merged && !tile.merged) {
						// Merge
						grid[r][nc].setValue(tile.value * 2);
						grid[r][nc].animateMerge();
						grid[r][nc].merged = true;
						score += tile.value * 2;
						scoreTxt.setText(score);
						tile.destroy();
						tiles.splice(tiles.indexOf(tile), 1);
						grid[r][tc] = null;
						moved = true;
						break;
					} else {
						break;
					}
				}
				// Animate move
				if (tile && tc !== c) {
					tile.setGridPos(r, tc, cellSize, gridX + gridPadding, gridY + gridPadding);
					movedTiles.push(tile);
				}
			}
		}
	}
	// Animate all moved tiles
	var animCount = movedTiles.length;
	if (animCount === 0) {
		isMoving = false;
		afterMove(moved);
	} else {
		for (var i = 0; i < movedTiles.length; i++) {
			var t = movedTiles[i];
			tween(t, {
				x: t.x,
				y: t.y
			}, {
				duration: 100,
				easing: tween.easeInOut,
				onFinish: function onFinish() {
					animCount--;
					if (animCount === 0) {
						isMoving = false;
						afterMove(moved);
					}
				}
			});
		}
	}
	if (animCount === 0) {
		// No animation, call afterMove immediately
		afterMove(moved);
	}
}
// After move: add new tile, check win/lose
function afterMove(moved) {
	if (moved) {
		addRandomTile();
	}
	if (has2048()) {
		LK.showYouWin();
		return;
	}
	if (!canMove()) {
		LK.showGameOver();
		return;
	}
}
// --- Input: Swipe detection ---
// We'll use game.down, game.move, game.up to detect swipe direction
var touchStartX = 0,
	touchStartY = 0,
	touchMoved = false;
game.down = function (x, y, obj) {
	if (isMoving) return;
	touchStartX = x;
	touchStartY = y;
	touchMoved = false;
};
game.move = function (x, y, obj) {
	if (isMoving) return;
	if (touchStartX === undefined) return;
	var dx = x - touchStartX;
	var dy = y - touchStartY;
	if (!touchMoved && (Math.abs(dx) > 40 || Math.abs(dy) > 40)) {
		touchMoved = true;
		// Determine direction
		if (Math.abs(dx) > Math.abs(dy)) {
			if (dx > 0) moveTiles('right');else moveTiles('left');
		} else {
			if (dy > 0) moveTiles('down');else moveTiles('up');
		}
		// Reset to prevent multiple moves per swipe
		touchStartX = undefined;
		touchStartY = undefined;
	}
};
game.up = function (x, y, obj) {
	touchStartX = undefined;
	touchStartY = undefined;
	touchMoved = false;
};
// --- Game update (not used, but required for tick-based games) ---
game.update = function () {
	// No per-frame logic needed
};
// --- Start game ---
function startGame() {
	resetGrid();
	addRandomTile();
	addRandomTile();
	scoreTxt.setText(score);
}
startGame();

===================================================================
--- original.js
+++ change.js
@@ -103,9 +103,9 @@
 /**** 
 * Initialize Game
 ****/ 
 var game = new LK.Game({
-	backgroundColor: 0x0a0a1a
+	backgroundColor: 0xffffff
 });
 
 /**** 
 * Game Code
@@ -114,10 +114,10 @@
 // Space tile assets: We'll use colored ellipses for different tile values
 // 2: Asteroid (gray), 4: Moon (light blue), 8: Planet (blue), 16: Star (yellow), 32: Red Giant (red), 64: Neutron Star (purple), 128: Black Hole (black), 256: Nebula (pink), 512: Galaxy (cyan), 1024: Quasar (orange), 2048: Universe (white)
 // Optionally, a subtle grid background
 var gridSize = 4;
-var cellSize = 320; // 320*4=1280, fits well in 2048 width
-var gridPadding = 20;
+var cellSize = 370; // 370*4=1480, bigger board
+var gridPadding = 28;
 var gridWidth = cellSize * gridSize + gridPadding * (gridSize + 1);
 var gridHeight = cellSize * gridSize + gridPadding * (gridSize + 1);
 var gridX = Math.floor((2048 - gridWidth) / 2);
 var gridY = Math.floor((2732 - gridHeight) / 2);