/**** * 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();

Clock Cascade by Benjaminsen

Remixes

Images