/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ // PuzzleTile: Represents a single tile in the puzzle grid. var PuzzleTile = Container.expand(function () { var self = Container.call(this); // Properties self.gridX = 0; // grid position x self.gridY = 0; // grid position y self.correctX = 0; // correct grid position x self.correctY = 0; // correct grid position y self.tileIndex = 0; // index in the tile array self.isEmpty = false; // is this the empty tile? // The tile's visual var tileAsset = self.attachAsset('tile', { anchorX: 0, anchorY: 0 }); // For MVP, we color each tile differently for visual distinction self.setColor = function (color) { tileAsset.color = color; // Use tween to smoothly animate the tint change for more vibrant effect tween(tileAsset, { tint: color }, { duration: 300, easing: tween.easeOut }); }; // Set the label (number) for the tile self.setLabel = function (label) { if (self.labelText) { self.labelText.setText(label); } else { var txt = new Text2(label + '', { size: 120, fill: 0x222222 }); txt.anchor.set(0.5, 0.5); txt.x = tileAsset.width / 2; txt.y = tileAsset.height / 2; self.addChild(txt); self.labelText = txt; } }; // Hide label for empty tile self.hideLabel = function () { if (self.labelText) { self.labelText.visible = false; } }; // Show label self.showLabel = function () { if (self.labelText) { self.labelText.visible = true; } }; // Animate to a new position self.moveTo = function (x, y, duration) { tween(self, { x: x, y: y }, { duration: duration || 200, easing: tween.cubicOut }); }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x222222 }); /**** * Game Code ****/ // In the future, this can be replaced with a real image or a procedurally generated pattern. // For MVP, we use a colored box as a placeholder for each tile, with a random color per game. // We'll use a single image asset for the puzzle, which will be randomly generated each game. // --- Puzzle Settings --- var gridSize = 4; // 4x4 grid (15-puzzle style) var tileSize = 400; // px, will be scaled to fit screen var tileSpacing = 12; // px gap between tiles var puzzleOffsetX = 0; var puzzleOffsetY = 0; var puzzleWidth = gridSize * tileSize + (gridSize - 1) * tileSpacing; var puzzleHeight = gridSize * tileSize + (gridSize - 1) * tileSpacing; // --- State --- var tiles = []; // 2D array [y][x] of PuzzleTile var tileList = []; // flat array of all PuzzleTile var emptyTile = null; // reference to the empty tile var moveCount = 0; var startTime = 0; var timerInterval = null; var isSolved = false; // --- UI --- var moveText = new Text2('Moves: 0', { size: 90, fill: 0xFFFFFF }); moveText.anchor.set(0, 0); // Anchor to top-left for easier positioning LK.gui.topLeft.addChild(moveText); // Add to topLeft GUI container var timeText = new Text2('Time: 0s', { size: 90, fill: 0xFFFFFF }); timeText.anchor.set(0.5, 0); LK.gui.top.addChild(timeText); // Keep timeText in the top-center // Position UI moveText.x = 20; // Small margin from the left edge moveText.y = 120; // Position below the platform menu icon area timeText.x = LK.gui.top.width / 2; // Center timeText timeText.y = 20; // --- Remix Button --- var remixBtn = new Text2('Remix', { size: 90, fill: 0xFFD700 }); remixBtn.anchor.set(0.5, 0); remixBtn.x = LK.gui.top.width / 2; remixBtn.y = 120; remixBtn.interactive = true; remixBtn.buttonMode = true; remixBtn.down = function (x, y, obj) { if (isSolved) return; shufflePuzzle(); moveCount = 0; startTime = Date.now(); updateUI(); }; LK.gui.top.addChild(remixBtn); // --- New Round Button --- var newRoundBtn = new Text2('New Round', { size: 90, fill: 0x4CAF50 // A nice green color for the new round button }); newRoundBtn.anchor.set(0.5, 0); newRoundBtn.x = LK.gui.top.width / 2; newRoundBtn.y = remixBtn.y + remixBtn.height + 30; // Position below the Remix button with some padding newRoundBtn.interactive = true; newRoundBtn.buttonMode = true; newRoundBtn.visible = false; // Initially hidden newRoundBtn.down = function (x, y, obj) { createPuzzle(); // This will re-initialize the game, hide this button, and reset isSolved }; LK.gui.top.addChild(newRoundBtn); // --- Background Menu Button --- var bgMenuBtn = new Text2('BG', { size: 60, fill: 0xFFFFFF }); bgMenuBtn.anchor.set(1, 0); bgMenuBtn.x = LK.gui.topRight.width - 20; bgMenuBtn.y = 20; bgMenuBtn.interactive = true; bgMenuBtn.buttonMode = true; bgMenuBtn.down = function (x, y, obj) { showBackgroundMenu(); }; LK.gui.topRight.addChild(bgMenuBtn); // --- Background Selection Variables --- var backgroundMenu = null; var backgroundColors = [0x222222, // Dark gray (default) 0x00FF00, // Bright green 0x0080FF, // Bright blue 0xFF00FF, // Bright magenta 0xFF0040, // Bright red 0xFF8000, // Bright orange 0x8000FF, // Bright purple 'rainbow' // Rainbow option ]; var currentBgIndex = 0; // --- Rainbow Background Variables --- var rainbowInterval = null; var rainbowHue = 0; // --- Helper Functions --- // Generate a random color palette for the puzzle function generateColorPalette(n) { var colors = []; var baseHue = Math.floor(Math.random() * 360); for (var i = 0; i < n; i++) { // HSL to RGB conversion with more vibrant saturation and lightness var hue = (baseHue + i * (360 / n)) % 360; var rgb = hslToRgb(hue / 360, 0.9, 0.7); // Increased saturation to 0.9 and lightness to 0.7 var color = rgb[0] << 16 | rgb[1] << 8 | rgb[2]; colors.push(color); } return colors; } // HSL to RGB helper function hslToRgb(h, s, l) { var r, g, b; if (s == 0) { r = g = b = l; } else { var hue2rgb = function hue2rgb(p, q, t) { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1 / 6) return p + (q - p) * 6 * t; if (t < 1 / 2) return q; if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; return p; }; var q = l < 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q; r = hue2rgb(p, q, h + 1 / 3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1 / 3); } return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; } // Shuffle an array in-place function shuffleArray(arr) { for (var i = arr.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var tmp = arr[i]; arr[i] = arr[j]; arr[j] = tmp; } } // Check if the puzzle is solved function checkSolved() { for (var y = 0; y < gridSize; y++) { for (var x = 0; x < gridSize; x++) { var tile = tiles[y][x]; if (tile.gridX !== tile.correctX || tile.gridY !== tile.correctY) { return false; } } } return true; } // Update move and time UI function updateUI() { moveText.setText('Moves: ' + moveCount); var elapsed = Math.floor((Date.now() - startTime) / 1000); timeText.setText('Time: ' + elapsed + 's'); } // --- Puzzle Generation --- function createPuzzle() { if (typeof newRoundBtn !== 'undefined' && newRoundBtn) { newRoundBtn.visible = false; } if (typeof hideTutorial === 'function') { hideTutorial(); } // Remove old tiles for (var i = 0; i < tileList.length; i++) { tileList[i].destroy(); } tiles = []; tileList = []; emptyTile = null; isSolved = false; moveCount = 0; updateUI(); // Generate color palette var numTiles = gridSize * gridSize; var colors = generateColorPalette(numTiles - 1); // Calculate tile size to fit screen var maxWidth = 2048 - 200; var maxHeight = 2732 - 400; tileSize = Math.floor(Math.min((maxWidth - (gridSize - 1) * tileSpacing) / gridSize, (maxHeight - (gridSize - 1) * tileSpacing) / gridSize)); puzzleWidth = gridSize * tileSize + (gridSize - 1) * tileSpacing; puzzleHeight = gridSize * tileSize + (gridSize - 1) * tileSpacing; puzzleOffsetX = Math.floor((2048 - puzzleWidth) / 2); puzzleOffsetY = Math.floor((2732 - puzzleHeight) / 2) + 80; // Create tiles in solved order var idx = 0; for (var y = 0; y < gridSize; y++) { tiles[y] = []; for (var x = 0; x < gridSize; x++) { var tile = new PuzzleTile(); tile.gridX = x; tile.gridY = y; tile.correctX = x; tile.correctY = y; tile.tileIndex = idx; tile.x = puzzleOffsetX + x * (tileSize + tileSpacing); tile.y = puzzleOffsetY + y * (tileSize + tileSpacing); tile.width = tileSize; tile.height = tileSize; tile.setColor(colors[idx] || 0x222222); tile.setLabel(idx + 1); tile.isEmpty = false; tileList.push(tile); tiles[y][x] = tile; game.addChild(tile); idx++; } } // Make last tile the empty tile var lastTile = tiles[gridSize - 1][gridSize - 1]; lastTile.isEmpty = true; lastTile.setColor(0x222222); lastTile.hideLabel(); emptyTile = lastTile; // Shuffle tiles shufflePuzzle(); // Start timer startTime = Date.now(); if (timerInterval) LK.clearInterval(timerInterval); timerInterval = LK.setInterval(updateUI, 500); } // Shuffle the puzzle by simulating random valid moves function shufflePuzzle() { var moves = [[0, 1], [1, 0], [0, -1], [-1, 0]]; var prevX = emptyTile.gridX, prevY = emptyTile.gridY; var shuffleCount = 200 + Math.floor(Math.random() * 100); for (var i = 0; i < shuffleCount; i++) { var possible = []; for (var d = 0; d < moves.length; d++) { var nx = emptyTile.gridX + moves[d][0]; var ny = emptyTile.gridY + moves[d][1]; if (nx >= 0 && nx < gridSize && ny >= 0 && ny < gridSize) { if (!(nx === prevX && ny === prevY)) { possible.push([nx, ny]); } } } if (possible.length === 0) continue; var pick = possible[Math.floor(Math.random() * possible.length)]; var tile = tiles[pick[1]][pick[0]]; swapWithEmpty(tile, false); prevX = emptyTile.gridX; prevY = emptyTile.gridY; } // After shuffling, update all tile positions visually for (var y = 0; y < gridSize; y++) { for (var x = 0; x < gridSize; x++) { var tile = tiles[y][x]; tile.x = puzzleOffsetX + x * (tileSize + tileSpacing); tile.y = puzzleOffsetY + y * (tileSize + tileSpacing); tile.gridX = x; tile.gridY = y; } } } // Swap a tile with the empty tile (if adjacent) function swapWithEmpty(tile, animate) { if (tile.isEmpty) return false; var dx = Math.abs(tile.gridX - emptyTile.gridX); var dy = Math.abs(tile.gridY - emptyTile.gridY); if (dx === 1 && dy === 0 || dx === 0 && dy === 1) { // Swap in tiles array var tx = tile.gridX, ty = tile.gridY; var ex = emptyTile.gridX, ey = emptyTile.gridY; tiles[ty][tx] = emptyTile; tiles[ey][ex] = tile; // Swap grid positions var tmpX = tile.gridX, tmpY = tile.gridY; tile.gridX = emptyTile.gridX; tile.gridY = emptyTile.gridY; emptyTile.gridX = tmpX; emptyTile.gridY = tmpY; // Animate movement var tileTargetX = puzzleOffsetX + tile.gridX * (tileSize + tileSpacing); var tileTargetY = puzzleOffsetY + tile.gridY * (tileSize + tileSpacing); var emptyTargetX = puzzleOffsetX + emptyTile.gridX * (tileSize + tileSpacing); var emptyTargetY = puzzleOffsetY + emptyTile.gridY * (tileSize + tileSpacing); if (animate !== false) { tile.moveTo(tileTargetX, tileTargetY, 120); emptyTile.moveTo(emptyTargetX, emptyTargetY, 120); } else { tile.x = tileTargetX; tile.y = tileTargetY; emptyTile.x = emptyTargetX; emptyTile.y = emptyTargetY; } return true; } return false; } // --- Input Handling --- // Find which tile was pressed function getTileAtPos(x, y) { for (var i = 0; i < tileList.length; i++) { var tile = tileList[i]; if (tile.isEmpty) continue; var tx = tile.x, ty = tile.y; var tw = tile.width, th = tile.height; if (x >= tx && x <= tx + tw && y >= ty && y <= ty + th) { return tile; } } return null; } // Handle tap/click on the puzzle game.down = function (x, y, obj) { if (isSolved) return; var tile = getTileAtPos(x, y); if (!tile) return; var moved = swapWithEmpty(tile, true); if (moved) { moveCount++; updateUI(); if (checkSolved()) { isSolved = true; updateUI(); LK.effects.flashScreen(0x44ff44, 800); // Instead of showing YouWin screen, show the New Round button if (typeof newRoundBtn !== 'undefined' && newRoundBtn) { newRoundBtn.visible = true; } // LK.setTimeout(function () { // Original YouWin call removed // LK.showYouWin(); // }, 900); } } }; // --- Game Update --- game.update = function () { // No per-frame logic needed for MVP }; // --- Tutorial Overlay --- var tutorialOverlay = null; var tutorialStep = 0; var tutorialActive = false; // Show tutorial overlay for the first level function showTutorial() { tutorialActive = true; tutorialStep = 0; if (tutorialOverlay) { tutorialOverlay.destroy(); tutorialOverlay = null; } tutorialOverlay = new Container(); var bg = LK.getAsset('centerCircle', { anchorX: 0.5, anchorY: 0.5, scaleX: 20, scaleY: 20, x: 2048 / 2, y: 2732 / 2 }); bg.alpha = 0.7; tutorialOverlay.addChild(bg); var tutText = new Text2("Welcome to Puzzle It!\n\nWatch how to move the tiles...", { size: 100, fill: 0xffffff }); tutText.anchor.set(0.5, 0.5); tutText.x = 2048 / 2; tutText.y = 2732 / 2 - 200; tutorialOverlay.addChild(tutText); var tutBtn = new Text2("Got it!", { size: 80, fill: 0x4CAF50 }); tutBtn.anchor.set(0.5, 0.5); tutBtn.x = 2048 / 2; tutBtn.y = 2732 / 2 + 300; tutBtn.interactive = true; tutBtn.buttonMode = true; tutBtn.visible = false; // Hide button initially tutorialOverlay.addChild(tutBtn); // Add the tutorial overlay to the game directly instead of LK.gui.center game.addChild(tutorialOverlay); // Set up the button's click handler after it's added to the display tree tutBtn.down = function (x, y, obj) { hideTutorial(); }; // Start the step-by-step tutorial startTutorialSteps(tutText, tutBtn); } // Start step-by-step tutorial movements function startTutorialSteps(tutText, tutBtn) { var stepDelay = 2000; // 2 seconds between steps var moveDelay = 1000; // 1 second to show movement var steps = [{ text: "Step 1: Move tile 15 up...", tileToMove: function tileToMove() { // Find tile with number 15 for (var i = 0; i < tileList.length; i++) { if (tileList[i].labelText && tileList[i].labelText.text === "15") { return tileList[i]; } } return null; } }, { text: "Step 2: Move tile 14 right...", tileToMove: function tileToMove() { // Find tile with number 14 for (var i = 0; i < tileList.length; i++) { if (tileList[i].labelText && tileList[i].labelText.text === "14") { return tileList[i]; } } return null; } }, { text: "Step 3: Move tile 11 down...", tileToMove: function tileToMove() { // Find tile with number 11 for (var i = 0; i < tileList.length; i++) { if (tileList[i].labelText && tileList[i].labelText.text === "11") { return tileList[i]; } } return null; } }]; var currentStep = 0; function performNextStep() { if (currentStep >= steps.length) { // Tutorial complete tutText.setText("Great! Now you try.\n\nTap a tile next to the empty space to move it.\n\nPut the numbers in order to win."); tutBtn.visible = true; return; } var step = steps[currentStep]; tutText.setText(step.text); // Wait a moment, then perform the move LK.setTimeout(function () { var tile = step.tileToMove(); if (tile && swapWithEmpty(tile, true)) { // Move was successful, wait for animation then continue LK.setTimeout(function () { currentStep++; performNextStep(); }, moveDelay); } else { // Move failed, skip to next step currentStep++; performNextStep(); } }, stepDelay); } // Start the tutorial steps performNextStep(); } // Hide tutorial overlay function hideTutorial() { tutorialActive = false; if (tutorialOverlay) { game.removeChild(tutorialOverlay); tutorialOverlay.destroy(); tutorialOverlay = null; } } // Show background color selection menu function showBackgroundMenu() { if (backgroundMenu) { hideBackgroundMenu(); return; } backgroundMenu = new Container(); // Semi-transparent background var menuBg = LK.getAsset('centerCircle', { anchorX: 0.5, anchorY: 0.5, scaleX: 12, scaleY: 8, x: 2048 / 2, y: 2732 / 2 }); menuBg.alpha = 0.9; menuBg.tint = 0x000000; backgroundMenu.addChild(menuBg); // Title var titleText = new Text2("Choose Background", { size: 80, fill: 0xFFFFFF }); titleText.anchor.set(0.5, 0.5); titleText.x = 2048 / 2; titleText.y = 2732 / 2 - 300; backgroundMenu.addChild(titleText); // Color options var colorsPerRow = 4; var colorSize = 120; var colorSpacing = 40; var startX = 2048 / 2 - (colorsPerRow * colorSize + (colorsPerRow - 1) * colorSpacing) / 2 + colorSize / 2; var startY = 2732 / 2 - 100; for (var i = 0; i < backgroundColors.length; i++) { var row = Math.floor(i / colorsPerRow); var col = i % colorsPerRow; var colorBtn = LK.getAsset('centerCircle', { anchorX: 0.5, anchorY: 0.5, scaleX: colorSize / 100, scaleY: colorSize / 100, x: startX + col * (colorSize + colorSpacing), y: startY + row * (colorSize + colorSpacing) }); if (backgroundColors[i] === 'rainbow') { // Create a rainbow gradient effect for the rainbow button colorBtn.tint = 0xFF0000; // Start with red, will be animated // Add a visual indicator that this is the rainbow option var rainbowText = new Text2("🌈", { size: 60, fill: 0xFFFFFF }); rainbowText.anchor.set(0.5, 0.5); rainbowText.x = 0; rainbowText.y = 0; colorBtn.addChild(rainbowText); } else { colorBtn.tint = backgroundColors[i]; } colorBtn.interactive = true; colorBtn.buttonMode = true; colorBtn.colorIndex = i; // Add selection indicator for current background if (i === currentBgIndex) { var indicator = LK.getAsset('centerCircle', { anchorX: 0.5, anchorY: 0.5, scaleX: (colorSize + 20) / 100, scaleY: (colorSize + 20) / 100, x: 0, y: 0 }); indicator.tint = 0xFFD700; indicator.alpha = 0.8; colorBtn.addChild(indicator); } (function (colorIndex) { colorBtn.down = function (x, y, obj) { currentBgIndex = colorIndex; if (backgroundColors[colorIndex] === 'rainbow') { startRainbowBackground(); } else { stopRainbowBackground(); game.setBackgroundColor(backgroundColors[colorIndex]); } hideBackgroundMenu(); }; })(i); backgroundMenu.addChild(colorBtn); } // Close button var closeBtn = new Text2("Close", { size: 70, fill: 0xFF4444 }); closeBtn.anchor.set(0.5, 0.5); closeBtn.x = 2048 / 2; closeBtn.y = 2732 / 2 + 250; closeBtn.interactive = true; closeBtn.buttonMode = true; closeBtn.down = function (x, y, obj) { hideBackgroundMenu(); }; backgroundMenu.addChild(closeBtn); game.addChild(backgroundMenu); } // Hide background selection menu function hideBackgroundMenu() { if (backgroundMenu) { game.removeChild(backgroundMenu); backgroundMenu.destroy(); backgroundMenu = null; } } // Start rainbow background animation function startRainbowBackground() { stopRainbowBackground(); // Stop any existing rainbow rainbowInterval = LK.setInterval(function () { rainbowHue = (rainbowHue + 2) % 360; // Increment hue var rgb = hslToRgb(rainbowHue / 360, 0.8, 0.5); // High saturation, medium lightness var color = rgb[0] << 16 | rgb[1] << 8 | rgb[2]; game.setBackgroundColor(color); }, 50); // Update every 50ms for smooth animation } // Stop rainbow background animation function stopRainbowBackground() { if (rainbowInterval) { LK.clearInterval(rainbowInterval); rainbowInterval = null; } } // --- Start Game --- createPuzzle(); ; // Show tutorial only for the first level (first time game is loaded) showTutorial(); // Block input while tutorial is active var origGameDown = game.down; game.down = function (x, y, obj) { if (tutorialActive) return; origGameDown(x, y, obj); };