var NewNumberBanner = Container.expand(function (value) { var self = Container.call(this); var bannerGraphics = self.createAsset('newNumberBanner', 'New Number Banner', 0.5, 0.5); var bannerLabel = new Text2(value.toString(), { size: 160, fill: '#000000', font: 'Impact' }); bannerLabel.anchor.set(0.5, 0.5); self.addChild(bannerLabel); self.x = -bannerGraphics.width; self.y = Math.random() * (2732 - bannerGraphics.height); self.move = function () { if (self.x < 2048) { self.x += 10; } else { self.destroy(); } }; }); var Tile = Container.expand(function (value) { var self = Container.call(this); self.alpha = 0; var fadeIn = function () { if (self.alpha < 1) { self.alpha = Math.min(self.alpha + 0.24, 1); self.scale.set(self.alpha); LK.setTimeout(fadeIn, 16.67); } else { self.alpha = 1; self.scale.set(1); } }; fadeIn(); self.value = value || 2; var tileGraphics = self.createAsset('tile', 'Tile Graphics', .5, .5); var hsvToRgb = function (h, s, v) { var r, g, b; var i = Math.floor(h * 6); var f = h * 6 - i; var p = v * (1 - s); var q = v * (1 - f * s); var t = v * (1 - (1 - f) * s); switch (i % 6) { case 0: (r = v, g = t, b = p); break; case 1: (r = q, g = v, b = p); break; case 2: (r = p, g = v, b = t); break; case 3: (r = p, g = q, b = v); break; case 4: (r = t, g = p, b = v); break; case 5: (r = v, g = p, b = q); break; } return (Math.round(r * 255) << 16) + (Math.round(g * 255) << 8) + Math.round(b * 255); }; self.setTint = function () { var hue = (Math.log2(self.value) + 6) % 20 / 20; tileGraphics.tint = hsvToRgb(hue, 0.3, 1); }; self.setTint(); var tileLabel = new Text2(self.value.toString(), { size: 300, fill: '#332d28', font: 'Sans-Serif', weight: '800', strokeThickness: 0 }); tileLabel.anchor.set(0.5, 0.5); tileLabel.x = 0; tileLabel.y = -10; self.addChild(tileLabel); self.setValue = function (value) { self.newValue = value; }; self.updateToRealValue = function () { if (self.newValue) { if (self.value !== self.newValue) { var newNumberBanner = new NewNumberBanner(self.newValue); LK.gui.addChild(newNumberBanner); LK.on('tick', function () { newNumberBanner.move(); }); } self.value = self.newValue; tileLabel.setText(self.value.toString()); var textScale = Math.min(1, 350 / (tileLabel.width / tileLabel.scale.x)); tileLabel.scale.set(textScale); self.setTint(); self.newValue = null; self.scale.set(1.2); var scaleDown = function () { if (self.scale.x > 1) { self.scale.x -= 0.02; self.scale.y -= 0.02; LK.setTimeout(scaleDown, 16.67); } else { self.scale.set(1); } }; scaleDown(); } }; self.targetX = 0; self.targetY = 0; self.isMoving = false; self.merged = false; self.setPosition = function (x, y, instant) { self.targetX = x * 500 + 250; self.targetY = y * 500 + 250; if (instant) { self.x = self.targetX; self.y = self.targetY; } }; self.move = function () { var dx = self.targetX - self.x; var dy = self.targetY - self.y; var distance = Math.sqrt(dx * dx + dy * dy); if (distance > 150) { self.isMoving = true; self.x += dx / distance * 150; self.y += dy / distance * 150; return false; } self.isMoving = false; self.x = self.targetX; self.y = self.targetY; return true; }; }); var Game = Container.expand(function () { var self = Container.call(this); var snowflakes = []; self.checkPossibleMoves = function () { for (var i = 0; i < gridSize; i++) { for (var j = 0; j < gridSize; j++) { if (squares[i][j] === null) { return true; } if (i < gridSize - 1 && squares[i][j] !== null && squares[i + 1][j] !== null && squares[i][j].value === squares[i + 1][j].value) { return true; } if (j < gridSize - 1 && squares[i][j] !== null && squares[i][j + 1] !== null && squares[i][j].value === squares[i][j + 1].value) { return true; } } } return false; }; var scoreTxt = new Text2('2', { size: 160, fill: '#000000', font: 'Impact', strokeThickness: 0 }); var banner = self.createAsset('steampunkBanner', 'Steampunk Banner', .5, 0); banner.x = 1024; banner.y = 0; banner.scale.set(1); self.addChild(banner); scoreTxt.anchor.set(0, 0); scoreTxt.x = 140; LK.gui.topLeft.addChild(scoreTxt); var achievedTxt = new Text2('# Reached', { size: 80, fill: '#000000', font: 'Impact', strokeThickness: 0 }); achievedTxt.anchor.set(0.5, 0); achievedTxt.y = scoreTxt.y + scoreTxt.height + 10; achievedTxt.x = scoreTxt.x + scoreTxt.width / 2; LK.gui.topLeft.addChild(achievedTxt); var moveCounter = 0; var moveCounterTxt = new Text2(moveCounter.toString(), { size: 160, fill: '#000000', font: 'Impact', strokeThickness: 0 }); moveCounterTxt.anchor.set(1, 0); LK.gui.topRight.addChild(moveCounterTxt); var movesLabel = new Text2('moves', { size: 80, fill: '#000000', font: 'Impact', strokeThickness: 0 }); movesLabel.anchor.set(1, 0); movesLabel.y = 180; LK.gui.topRight.addChild(movesLabel); var arrowUp = self.createAsset('arrowUp', 'Arrow Up', .5, .5); arrowUp.x = 1024; arrowUp.y = 2732 - 250; arrowUp.on('down', function () { self.moveTiles('up'); }); var arrowDown = self.createAsset('arrowUp', 'Arrow Down', .5, .5); arrowDown.rotation = Math.PI; arrowDown.x = 1024; arrowDown.y = 2732 - 100; arrowDown.on('down', function () { self.moveTiles('down'); }); var arrowLeft = self.createAsset('arrowUp', 'Arrow Left', .5, .5); arrowLeft.rotation = -Math.PI / 2; arrowLeft.x = 899; arrowLeft.y = 2732 - 175; arrowLeft.on('down', function () { self.moveTiles('left'); }); var arrowRight = self.createAsset('arrowUp', 'Arrow Right', .5, .5); arrowRight.rotation = Math.PI / 2; arrowRight.x = 1149; arrowRight.y = 2732 - 175; arrowRight.on('down', function () { self.moveTiles('right'); }); var toBeRemoved = []; self.addRandomTile = function () { var emptyPositions = []; for (var i = 0; i < gridSize; i++) { for (var j = 0; j < gridSize; j++) { if (squares[i][j] === null) { emptyPositions.push({ x: i, y: j }); } } } if (emptyPositions.length > 0) { var randomPosition = emptyPositions[Math.floor(Math.random() * emptyPositions.length)]; var square = new Tile(Math.random() < 0.5 ? 2 : 4); square.setPosition(randomPosition.x, randomPosition.y, true); squares[randomPosition.x][randomPosition.y] = square; gridContainer.addChild(square); } }; self.mergeTiles = function (x1, y1, x2, y2) { if (squares[x1][y1] !== null && squares[x2][y2] !== null && squares[x1][y1].value === squares[x2][y2].value && !squares[x1][y1].merged && !squares[x2][y2].merged) { squares[x2][y2].setValue(squares[x2][y2].value * 2, true); squares[x2][y2].merged = true; squares[x1][y1].targetX = squares[x2][y2].targetX; squares[x1][y1].targetY = squares[x2][y2].targetY; toBeRemoved.push(squares[x1][y1]); squares[x1][y1] = null; gridContainer.removeChild(squares[x2][y2]); gridContainer.addChild(squares[x2][y2]); return true; } return false; }; var gridSize = 4; LK.stageContainer.setBackgroundColor(0x000000); var gridContainer = new Container(); gridContainer.x = 44; gridContainer.y = 400; self.addChild(gridContainer); for (var i = 0; i < gridSize; i++) { for (var j = 0; j < gridSize; j++) { var gridTile = gridContainer.createAsset('gridTile', 'Grid Tile', .5, .5); gridTile.x = i * 500 + 250; gridTile.y = j * 500 + 250; gridTile.alpha = .8; } } var squares = new Array(gridSize).fill().map(() => new Array(gridSize).fill(null)); for (var i = 0; i < gridSize; i++) { for (var j = 0; j < gridSize; j++) { squares[i][j] = null; } } var initialTiles = 2; for (var i = 0; i < initialTiles; i++) { var x, y; do { x = Math.floor(Math.random() * gridSize); y = Math.floor(Math.random() * gridSize); } while (squares[x][y] !== null); var square = new Tile(); square.setPosition(x, y, true); squares[x][y] = square; gridContainer.addChild(square); } var swipeStart = { x: 0, y: 0 }; var swipeEnd = { x: 0, y: 0 }; var boardChanged = false; var winMessageShown = false; self.moveTiles = function (direction) { var dx = (direction === 'right') - (direction === 'left'); var dy = (direction === 'down') - (direction === 'up'); var moved = false; do { moved = false; var iStart = dx > 0 ? gridSize - 1 : 0; var iEnd = dx > 0 ? -1 : gridSize; var iStep = dx > 0 ? -1 : 1; var jStart = dy > 0 ? gridSize - 1 : 0; var jEnd = dy > 0 ? -1 : gridSize; var jStep = dy > 0 ? -1 : 1; for (var i = iStart; i !== iEnd; i += iStep) { for (var j = jStart; j !== jEnd; j += jStep) { var x = i + dx; var y = j + dy; if (x >= 0 && x < gridSize && y >= 0 && y < gridSize && squares[i][j] !== null) { if (squares[x][y] === null) { squares[x][y] = squares[i][j]; squares[i][j] = null; squares[x][y].setPosition(x, y); moved = true; boardChanged = true; } else if (squares[x][y] !== null && squares[i][j] !== null && squares[x][y].value === squares[i][j].value) { moved = self.mergeTiles(i, j, x, y); if (moved) boardChanged = true; } } } } } while (moved); for (var i = 0; i < gridSize; i++) { for (var j = 0; j < gridSize; j++) { if (squares[i][j] !== null) { squares[i][j].merged = false; } } } }; stage.on('down', function (obj) { var anyTileMoving = squares.some(row => row.some(tile => tile && tile.isMoving)); if (!anyTileMoving) { var pos = obj.event.getLocalPosition(self); swipeStart = { x: pos.x, y: pos.y }; } }); stage.on('up', function (obj) { var pos = obj.event.getLocalPosition(self); swipeEnd = { x: pos.x, y: pos.y }; var dx = swipeEnd.x - swipeStart.x; var dy = swipeEnd.y - swipeStart.y; var threshold = 50; if (Math.abs(dx) > threshold || Math.abs(dy) > threshold) { if (Math.abs(dx) > Math.abs(dy)) { if (dx > 0) { self.moveTiles('right'); } else { self.moveTiles('left'); } } else { if (dy > 0) { self.moveTiles('down'); } else { self.moveTiles('up'); } } } }); LK.on('tick', function () { var allTilesStopped = true; for (var i = 0; i < gridSize; i++) { for (var j = 0; j < gridSize; j++) { if (squares[i][j] !== null) { if (!squares[i][j].move()) { allTilesStopped = false; } } } } for (var i = 0; i < toBeRemoved.length; i++) { if (!toBeRemoved[i].move()) { allTilesStopped = false; } else { toBeRemoved[i].destroy(); toBeRemoved.splice(i, 1); i--; } } if (allTilesStopped) { for (var i = 0; i < gridSize; i++) { for (var j = 0; j < gridSize; j++) { if (squares[i][j] !== null && squares[i][j].newValue) { squares[i][j].updateToRealValue(); if (squares[i][j].value === 2048 && !winMessageShown) { var winMessage = new Text2('Congratulations\n you win!', { size: 150, fill: '#ffffff', font: 'Sans-Serif', weight: '800', stroke: '#000000', strokeThickness: 25, align: 'center' }); winMessage.anchor.set(0.5, 0.5); LK.gui.center.addChild(winMessage); winMessageShown = true; LK.setTimeout(function () { LK.gui.center.removeChild(winMessage); }, 5000); } } } } if (boardChanged) { self.addRandomTile(); boardChanged = false; var maxTileValue = Math.max.apply(Math, squares.map(function (row) { return Math.max.apply(Math, row.map(function (tile) { return tile ? tile.value : 0; })); })); scoreTxt.setText(maxTileValue.toString()); moveCounter++; moveCounterTxt.setText(moveCounter.toString()); } if (!self.checkPossibleMoves()) { for (var i = 0; i < gridSize; i++) { for (var j = 0; j < gridSize; j++) { if (squares[i][j] !== null) { squares[i][j].alpha = 1; squares[i][j].scale.set(1); } } } LK.showGameOver(); } } }); });