/**** 
* Classes
****/
var Tile = Container.expand(function (type) {
	var self = Container.call(this);
	var tileGraphics = self.attachAsset('tile', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	tileGraphics.alpha = 0;
	self.targetX = 0;
	self.targetY = 0;
	self.isMoving = false;
	self.totalTypes = 3;
	self.type = type || Math.floor(Math.random() * self.totalTypes);
	var hue = self.type / self.totalTypes;
	var color = hsvToRgb(hue, 0.5, 1);
	tileGraphics.tint = color;
	self.cells = [];
	var cellWidth = 0;
	var cellHeight = 0;
	self.structure = [];
	if (self.type === 0) {
		self.structure = [[1, 1]];
		var cell1 = new Cell();
		var cell2 = new Cell();
		cellWidth = cell1.width;
		cellHeight = cell1.height;
		self.cells.push(cell1);
		self.cells.push(cell2);
	} else if (self.type === 1) {
		self.structure = [[1], [1]];
		var cell1 = new Cell();
		var cell2 = new Cell();
		cellWidth = cell1.width;
		cellHeight = cell1.height;
		self.cells.push(cell1);
		self.cells.push(cell2);
	} else if (self.type === 2) {
		self.structure = [[1]];
		var cell1 = new Cell();
		cellWidth = cell1.width;
		cellHeight = cell1.height;
		self.cells.push(cell1);
	}
	self.cells.forEach(function (cell, index) {
		if (self.type === 0) {
			cell.x = index === 0 ? self.x - cellWidth / 2 : self.x + cellWidth / 2;
			cell.y = self.y;
		} else if (self.type === 1) {
			cell.x = self.x;
			cell.y = index === 0 ? self.y - cellHeight / 2 : self.y + cellHeight / 2;
		}
		self.addChild(cell);
	});
	self.move = function (x, y, instant) {
		self.targetX = x;
		self.targetY = y;
		if (instant) {
			self.x = x;
			self.y = y;
		}
	};
	self.tick = function () {
		var dx = self.targetX - self.x;
		var dy = self.targetY - self.y;
		var distance = Math.sqrt(dx * dx + dy * dy);
		if (distance > 1) {
			self.x += dx * 0.15;
			self.y += dy * 0.15;
			self.isMoving = true;
		} else {
			self.x = self.targetX;
			self.y = self.targetY;
			self.isMoving = false;
		}
	};
});
var GridBackgroundCell = Container.expand(function () {
	var self = Container.call(this);
	var bgCellGraphics = self.attachAsset('gridCell', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	bgCellGraphics.alpha = 0.7;
	self.setAlphaAndTint = function (alpha, tint) {
		bgCellGraphics.alpha = alpha;
		bgCellGraphics.tint = tint;
	};
});
var Cell = Container.expand(function (type) {
	var self = Container.call(this);
	var cellGraphics = self.attachAsset('cell', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var clockGraphics = self.attachAsset('clock', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	clockGraphics.y = -8;
	clockGraphics.x = -4;
	clockGraphics.blendMode = 2;
	self.targetX = 0;
	self.targetY = 0;
	self.isMoving = false;
	self.totalTypes = 5;
	self.type = type !== undefined ? type : Math.floor(Math.random() * self.totalTypes);
	var hue = self.type / self.totalTypes;
	var color = hsvToRgb(hue, 0.5, 1);
	cellGraphics.tint = color;
	clockGraphics.rotation = self.type * (2 * Math.PI / self.totalTypes);
	self.move = function (x, y, instant) {
		self.targetX = x;
		self.targetY = y;
		if (instant) {
			self.x = x;
			self.y = y;
		}
	};
	self.tick = function () {
		var acceleration = 1;
		self.speedX = self.speedX || 0;
		self.speedY = self.speedY || 0;
		var threshold = 1;
		var dx = self.targetX - self.x;
		var dy = self.targetY - self.y;
		if (Math.abs(dx) < threshold && Math.abs(dy) < threshold) {
			self.x = self.targetX;
			self.y = self.targetY;
			self.isMoving = false;
			self.speedX = 0;
			self.speedY = 0;
		} else {
			if (dx !== 0) {
				self.speedX += dx > 0 ? acceleration : -acceleration;
			}
			if (dy !== 0) {
				self.speedY += dy > 0 ? acceleration : -acceleration;
			}
			var nextX = self.x + self.speedX;
			var nextY = self.y + self.speedY;
			if (self.speedX > 0 && nextX > self.targetX || self.speedX < 0 && nextX < self.targetX) {
				nextX = self.targetX;
				self.speedX = 0;
			}
			if (self.speedY > 0 && nextY > self.targetY || self.speedY < 0 && nextY < self.targetY) {
				nextY = self.targetY;
				self.speedY = 0;
			}
			self.x = nextX;
			self.y = nextY;
			self.isMoving = self.x !== self.targetX || self.y !== self.targetY;
		}
	};
});

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

/**** 
* Game Code
****/
function hsvToRgb(h, s, v) {
	var i = Math.floor(h * 6),
		f = h * 6 - i,
		p = v * (1 - s),
		q = v * (1 - f * s),
		t = v * (1 - (1 - f) * s),
		mod = i % 6,
		r = [v, q, p, p, t, v][mod],
		g = [t, v, v, q, p, p][mod],
		b = [p, p, t, v, v, q][mod];
	return (r * 255 << 16) + (g * 255 << 8) + b * 255;
}
game.score = 0;
game.setBackgroundColor(0x041027);
var backgroundGraphics = game.attachAsset('background', {
	anchorX: 0.5,
	anchorY: 0.5
});
game.addChild(backgroundGraphics);
backgroundGraphics.x = 2048 / 2;
backgroundGraphics.y = 2732 / 2;
backgroundGraphics.alpha = 0.5;
var bottomTileBackground = game.attachAsset('bottomTileBackground', {
	anchorX: 0.5,
	anchorY: 1
});
game.addChild(bottomTileBackground);
bottomTileBackground.x = 2048 / 2;
bottomTileBackground.y = 2732;
bottomTileBackground.alpha = 0.5;
game.findCellColRow = function (cell) {
	for (var col = 0; col < gridWidth; col++) {
		for (var row = 0; row < gridHeight; row++) {
			if (grid[col][row] === cell) {
				return {
					col: col,
					row: row
				};
			}
		}
	}
	return null;
};
game.canPlaceAnyTile = function () {
	for (var i = 0; i < bottomTiles.length; i++) {
		var tile = bottomTiles[i];
		for (var col = 0; col < gridWidth; col++) {
			for (var row = 0; row < gridHeight; row++) {
				if (game.canPlaceTile(tile, col, row)) {
					return true;
				}
			}
		}
	}
	return false;
};
game.canPlaceTile = function (tile, gridX, gridY) {
	for (var row = 0; row < tile.structure.length; row++) {
		for (var col = 0; col < tile.structure[row].length; col++) {
			if (tile.structure[row][col] === 1) {
				var targetCol = gridX + col;
				var targetRow = gridY + row;
				if (targetCol < 0 || targetCol >= gridWidth || targetRow < 0 || targetRow >= gridHeight) {
					return false;
				}
				if (grid[targetCol][targetRow]) {
					return false;
				}
			}
		}
	}
	return true;
};
game.toTest = [];
game.getOverlappingCells = function (tile) {
	var overlappingCells = [];
	var shouldReturnEmpty = false;
	tile.cells.forEach(function (cell) {
		var cellBounds = cell.getBounds();
		for (var i = 0; i < gridWidth; i++) {
			for (var j = 0; j < gridHeight; j++) {
				var bgCell = bgGrid[i][j];
				var bgCellBounds = bgCell.getBounds();
				if (cellBounds.contains(bgCellBounds.x + bgCellBounds.width / 2, bgCellBounds.y + bgCellBounds.height / 2)) {
					if (grid[i][j]) {
						shouldReturnEmpty = true;
						break;
					}
					overlappingCells.push(bgCell);
				}
			}
			if (shouldReturnEmpty) {
				break;
			}
		}
	});
	if (shouldReturnEmpty) {
		return [];
	}
	return overlappingCells;
};
game.resetBackgroundGridCells = function () {
	for (var i = 0; i < gridWidth; i++) {
		for (var j = 0; j < gridHeight; j++) {
			var bgCell = bgGrid[i][j];
			bgCell.setAlphaAndTint(0.7, 0xFFFFFF);
		}
	}
};
var gridWidth = 5;
var gridHeight = 5;
var gridSpacing = 2;
var tempTile = new Tile();
var tileWidth = tempTile.width;
var tileHeight = tempTile.height;
tempTile.destroy();
var tempCell = new Cell();
var cellWidth = tempCell.width;
var cellHeight = tempCell.height;
tempCell.destroy();
var gridContainer = new Container();
game.addChild(gridContainer);
var totalGridWidth = gridWidth * (cellWidth + gridSpacing) - gridSpacing;
var totalGridHeight = gridHeight * (cellHeight + gridSpacing) - gridSpacing;
gridContainer.x = (2048 - totalGridWidth) / 2 + cellWidth / 2;
gridContainer.y = (2732 - totalGridHeight) / 2 + cellHeight / 2 - 290;
game.calculateTargetPosition = function (col, row) {
	return {
		x: col * (cellWidth + gridSpacing),
		y: row * (cellHeight + gridSpacing)
	};
};
game.findConnectedNeighbors = function (cell, connectedNeighbors) {
	connectedNeighbors = connectedNeighbors || [];
	if (!cell) {
		return [];
	}
	var cellType = cell.type;
	var cellColRow = game.findCellColRow(cell);
	if (cellColRow) {
		var directions = [[-1, 0], [1, 0], [0, -1], [0, 1]];
		directions.forEach(function (dir) {
			var newRow = cellColRow.row + dir[0];
			var newCol = cellColRow.col + dir[1];
			if (newRow >= 0 && newRow < gridHeight && newCol >= 0 && newCol < gridWidth) {
				var neighborCell = grid[newCol][newRow];
				if (neighborCell && neighborCell.visible && neighborCell.type === cellType && connectedNeighbors.indexOf(neighborCell) === -1) {
					connectedNeighbors.push(neighborCell);
					game.findConnectedNeighbors(neighborCell, connectedNeighbors);
				}
			}
		});
	}
	return connectedNeighbors;
};
game.findBgCellColRow = function (bgCell) {
	for (var col = 0; col < gridWidth; col++) {
		for (var row = 0; row < gridHeight; row++) {
			if (bgGrid[col][row] === bgCell) {
				return {
					col: col,
					row: row
				};
			}
		}
	}
	return null;
};
var grid = Array(5).fill().map(function () {
	return Array(5).fill(null);
});
var bgGrid = Array(5).fill().map(function () {
	return Array(5).fill(null);
});
for (var i = 0; i < gridWidth; i++) {
	for (var j = 0; j < gridHeight; j++) {
		var bgCell = new GridBackgroundCell();
		var targetPos = game.calculateTargetPosition(i, j);
		bgCell.x = targetPos.x;
		bgCell.y = targetPos.y;
		bgGrid[i][j] = bgCell;
		gridContainer.addChild(bgCell);
	}
}
for (var k = 0; k < 2; k++) {
	var randomCol = Math.floor(Math.random() * gridWidth);
	var randomRow = Math.floor(Math.random() * gridHeight);
	while (grid[randomCol][randomRow]) {
		randomCol = Math.floor(Math.random() * gridWidth);
		randomRow = Math.floor(Math.random() * gridHeight);
	}
	var cell = new Cell();
	var targetPos = game.calculateTargetPosition(randomCol, randomRow);
	cell.move(targetPos.x, targetPos.y, true);
	grid[randomCol][randomRow] = cell;
	gridContainer.addChild(cell);
}
game.on('move', function (obj) {
	if (draggedTile) {
		var pos = obj.event.getLocalPosition(game);
		draggedTile.x = pos.x;
		draggedTile.y = pos.y;
		game.highlightOverlappingCells(draggedTile);
	}
});
game.highlightOverlappingCells = function (tile) {
	game.resetBackgroundGridCells();
	var overlappingCells = game.getOverlappingCells(tile);
	if (overlappingCells.length !== tile.cells.length) {
		return;
	}
	overlappingCells.forEach(function (bgCell) {
		bgCell.setAlphaAndTint(1, 0xFFFFFF);
	});
};
LK.on('tick', function () {
	if (toDelete.length > 0) {
		var allNotMoving = toDelete.every(function (cell) {
			return !cell.isMoving;
		});
		if (allNotMoving) {
			toDelete.forEach(function (cell) {
				cell.destroy();
			});
			toDelete = [];
			for (var i = 0; i < gridWidth; i++) {
				for (var j = 0; j < gridHeight; j++) {
					if (grid[i][j] && !grid[i][j].visible) {
						grid[i][j].visible = true;
						game.toTest.push(grid[i][j]);
					}
				}
			}
		} else {
			for (var i = 0; i < toDelete.length; i++) {
				toDelete[i].tick();
			}
		}
	}
	for (var i = 0; i < gridWidth; i++) {
		for (var j = 0; j < gridHeight; j++) {
			if (grid[i][j]) {
				grid[i][j].tick();
			}
		}
	}
	for (var i = 0; i < bottomTiles.length; i++) {
		if (bottomTiles[i] !== draggedTile) {
			bottomTiles[i].tick();
		}
	}
	var isAnyRowMoving = grid.some(function (row) {
		return row.some(function (cell) {
			return cell && cell.isMoving;
		});
	});
	if (!isAnyRowMoving) {
		while (game.toTest.length > 0) {
			var cell = game.toTest.shift();
			var colRow = game.findCellColRow(cell);
			var connectedNeighbors = game.findConnectedNeighbors(cell);
			if (connectedNeighbors.length >= 3) {
				var newType = (cell.type + 1) % cell.totalTypes;
				var newCell = new Cell(newType);
				newCell.visible = false;
				connectedNeighbors.forEach(function (neighborCell) {
					var neighborColRow = game.findCellColRow(neighborCell);
					if (neighborColRow) {
						grid[neighborColRow.col][neighborColRow.row] = null;
						neighborCell.isMoving = true;
						toDelete.push(neighborCell);
						neighborCell.move(cell.x, cell.y);
						game.score += 1;
						LK.setScore(game.score);
						scoreTxt.setText(game.score.toString());
					}
				});
				if (colRow) {
					var targetPos = game.calculateTargetPosition(colRow.col, colRow.row);
					newCell.move(targetPos.x, targetPos.y, true);
					newCell.isMoving = true;
					grid[colRow.col][colRow.row] = newCell;
					gridContainer.addChild(newCell);
				}
			}
		}
		var isAnyTileMoving = bottomTiles.some(function (tile) {
			return tile.isMoving;
		});
		isAnyRowMoving = grid.some(function (row) {
			return row.some(function (cell) {
				return cell && cell.isMoving;
			});
		});
		if (!isAnyTileMoving && !game.canPlaceAnyTile() && !isAnyRowMoving && toDelete.length === 0) {
			LK.showGameOver();
		}
	}
});
var bottomTiles = [];
var toDelete = [];
var draggedTile = null;
game.addBottomTiles = function () {
	var numberOfTiles = 3;
	var totalTilesWidth = numberOfTiles * tileWidth + (numberOfTiles - 1) * gridSpacing;
	var margin = (2048 - totalTilesWidth) / 2;
	var spacing = margin + tileWidth / 2;
	var posY = 2732 - tileHeight / 2 - margin;
	for (var i = 0; i < numberOfTiles; i++) {
		var tile = new Tile();
		var posX = spacing + i * (tileWidth + gridSpacing);
		tile.move(posX, 2732 + tileHeight, true);
		tile.move(posX, posY);
		bottomTiles[i] = tile;
		tile.on('down', function () {
			draggedTile = this;
		});
		game.addChild(tile);
	}
};
var scoreTxt = new Text2('0', {
	size: 150,
	fill: '#ffffff',
	font: 'Impact',
	dropShadow: true,
	dropShadowColor: '#000000',
	dropShadowBlur: 4,
	dropShadowAngle: Math.PI / 6,
	dropShadowDistance: 6
});
scoreTxt.anchor.set(.5, 0);
LK.gui.topCenter.addChild(scoreTxt);
game.on('up', function (obj) {
	game.resetBackgroundGridCells();
	if (draggedTile) {
		var overlappingCells = game.getOverlappingCells(draggedTile);
		if (overlappingCells.length === draggedTile.cells.length) {
			overlappingCells.forEach(function (bgCell, index) {
				var colRow = game.findBgCellColRow(bgCell);
				if (colRow && draggedTile.cells[index]) {
					var cell = draggedTile.cells[index];
					var targetPos = game.calculateTargetPosition(colRow.col, colRow.row);
					cell.move(targetPos.x, targetPos.y, true);
					grid[colRow.col][colRow.row] = cell;
					gridContainer.addChild(cell);
					game.toTest.push(cell);
				}
			});
			var tileIndex = bottomTiles.indexOf(draggedTile);
			if (tileIndex !== -1) {
				bottomTiles.splice(tileIndex, 1);
			}
			draggedTile.destroy();
			if (bottomTiles.length === 0) {
				game.addBottomTiles();
			}
			draggedTile = null;
		}
	}
	draggedTile = null;
});
game.addBottomTiles();
Creation History

Images

Most played remixes
