/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ // Palette button class var PaletteButton = Container.expand(function () { var self = Container.call(this); self.colorId = null; self.block = self.attachAsset('color_white', { anchorX: 0.5, anchorY: 0.5 }); self.block.width = paletteCellSize; self.block.height = paletteCellSize; self.setColor = function (colorId) { self.colorId = colorId; self.removeChild(self.block); self.block = self.attachAsset(colorId, { anchorX: 0.5, anchorY: 0.5 }); self.block.width = paletteCellSize; self.block.height = paletteCellSize; }; // Touch event self.down = function (x, y, obj) { selectColor(self.colorId); }; return self; }); // Pixel cell class for the drawing grid var PixelCell = Container.expand(function () { var self = Container.call(this); self.colorId = null; // Current color id (e.g. 'color_yellow') self.gridX = 0; self.gridY = 0; // The colored block self.block = self.attachAsset('color_white', { anchorX: 0.5, anchorY: 0.5 }); self.block.width = cellSize; self.block.height = cellSize; // Draws the cell with the given color id self.setColor = function (colorId) { self.colorId = colorId; self.removeChild(self.block); self.block = self.attachAsset(colorId, { anchorX: 0.5, anchorY: 0.5 }); self.block.width = cellSize; self.block.height = cellSize; }; // For checking if the cell is filled with the correct color self.getColorId = function () { return self.colorId; }; // Touch event self.down = function (x, y, obj) { if (!selectedColorId) return; // Find grid coordinates of this cell var gx = self.gridX; var gy = self.gridY; if (fillMode) { // --- FILL TOOL --- var targetColor = self.getColorId(); if (targetColor === selectedColorId) return; // Already filled // Flood fill algorithm (non-recursive, stack-based) var stack = []; stack.push([gx, gy]); var visited = {}; while (stack.length > 0) { var pos = stack.pop(); var px = pos[0]; var py = pos[1]; var key = px + ',' + py; if (visited[key]) continue; visited[key] = true; if (px >= 0 && px < gridCols && py >= 0 && py < gridRows && gridCells[py][px].getColorId() === targetColor) { gridCells[py][px].setColor(selectedColorId); // Add neighbors stack.push([px - 1, py]); stack.push([px + 1, py]); stack.push([px, py - 1]); stack.push([px, py + 1]); } } checkIfComplete(); return; } // --- BRUSH TOOL --- var size = brushSize; for (var dy = 0; dy < size; dy++) { for (var dx = 0; dx < size; dx++) { var px = gx + dx; var py = gy + dy; if (px < gridCols && py < gridRows) { gridCells[py][px].setColor(selectedColorId); } } } checkIfComplete(); }; return self; }); // Reference cell class (non-interactive, just for showing the reference) var ReferenceCell = Container.expand(function () { var self = Container.call(this); self.block = self.attachAsset('color_white', { anchorX: 0.5, anchorY: 0.5 }); self.block.width = cellSize; self.block.height = cellSize; self.setColor = function (colorId) { self.removeChild(self.block); self.block = self.attachAsset(colorId, { anchorX: 0.5, anchorY: 0.5 }); self.block.width = cellSize; self.block.height = cellSize; }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0xE0E0E0 }); /**** * Game Code ****/ // This block is moved to ensure correct data initialization. // --- CONFIGURATION --- // Define color palette for SpongeBob pixel art (approximate colors) // Reference image: We'll use a grid of colored blocks as a reference (not an actual image asset, but a grid rendered in-game). var gridCols = 12; var gridRows = 16; var cellSize = 90; // px, for main grid var paletteCellSize = 80; // px, for palette // Center the grid var gridStartX = Math.floor((2048 - gridCols * cellSize) / 2); var gridStartY = 350; // Reference grid (smaller, at top) var refCellSize = 40; var refGridStartX = Math.floor((2048 - gridCols * refCellSize) / 2); var refGridStartY = 120; // Palette bar var paletteStartY = 2732 - 220; // Color palette (order matters for palette bar) var colorPalette = ['color_yellow', 'color_white', 'color_black', 'color_brown', 'color_blue', 'color_red', 'color_pink', 'color_green']; // Map colorId to color name for display var colorNames = { 'color_yellow': 'Yellow', 'color_white': 'White', 'color_black': 'Black', 'color_brown': 'Brown', 'color_blue': 'Blue', 'color_red': 'Red', 'color_pink': 'Pink', 'color_green': 'Green' }; // The reference pixel art for SpongeBob (12x16 grid, using colorPalette indices) // 0: yellow, 1: white, 2: black, 3: brown, 4: blue, 5: red, 6: pink, 7: green // Improved SpongeBob reference pixel art (12x16 grid) // 0: yellow, 1: white, 2: black, 3: brown, 4: blue, 5: red, 6: pink, 7: green var spongebobReference = [[2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2], [2, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2], [2, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2], [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2], [2, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 2], [2, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 2], [2, 0, 3, 0, 0, 0, 0, 0, 0, 3, 0, 2], [2, 0, 3, 3, 3, 3, 3, 3, 3, 3, 0, 2], [2, 0, 4, 4, 1, 1, 1, 1, 4, 4, 0, 2], [2, 0, 4, 4, 1, 1, 1, 1, 4, 4, 0, 2], [2, 0, 0, 0, 5, 5, 5, 5, 0, 0, 0, 2], [2, 0, 0, 7, 7, 0, 0, 7, 7, 0, 0, 2], [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]]; // Convert indices to colorIds for easier comparison function getColorIdByIndex(idx) { return colorPalette[idx]; } var spongebobReferenceColorIds = []; for (var y = 0; y < gridRows; y++) { var row = []; for (var x = 0; x < gridCols; x++) { row.push(getColorIdByIndex(spongebobReference[y][x])); } spongebobReferenceColorIds.push(row); } // spongebobReferenceColorIds array creation moved after spongebobReference definition is finalized. // --- STATE --- var gridCells = []; // 2D array of PixelCell var selectedColorId = colorPalette[0]; // Default selected color var paletteButtons = []; var isComplete = false; // --- UI --- // Title var titleText = new Text2('SpongeBob Pixel Art', { size: 90, fill: 0x222222 }); titleText.anchor.set(0.5, 0); LK.gui.top.addChild(titleText); // Instructions var instrText = new Text2('Tap a color, then tap the grid to fill. Try to match the reference above!', { size: 48, fill: 0x444444 }); instrText.anchor.set(0.5, 0); LK.gui.top.addChild(instrText); instrText.y = 110; // --- REFERENCE GRID --- var referenceCells = []; for (var y = 0; y < gridRows; y++) { var row = []; for (var x = 0; x < gridCols; x++) { var refCell = new ReferenceCell(); refCell.setColor(spongebobReferenceColorIds[y][x]); refCell.x = refGridStartX + x * refCellSize + refCellSize / 2; refCell.y = refGridStartY + y * refCellSize + refCellSize / 2; game.addChild(refCell); row.push(refCell); } referenceCells.push(row); } // --- MAIN DRAWING GRID --- for (var y = 0; y < gridRows; y++) { var row = []; for (var x = 0; x < gridCols; x++) { var cell = new PixelCell(); cell.x = gridStartX + x * cellSize + cellSize / 2; cell.y = gridStartY + y * cellSize + cellSize / 2; cell.gridX = x; cell.gridY = y; cell.setColor('color_white'); game.addChild(cell); row.push(cell); } gridCells.push(row); } // --- PALETTE BAR --- var paletteBarWidth = colorPalette.length * (paletteCellSize + 24) - 24; var paletteBarStartX = Math.floor((2048 - paletteBarWidth) / 2); for (var i = 0; i < colorPalette.length; i++) { var colorId = colorPalette[i]; var btn = new PaletteButton(); btn.setColor(colorId); btn.x = paletteBarStartX + i * (paletteCellSize + 24) + paletteCellSize / 2; btn.y = paletteStartY + paletteCellSize / 2; game.addChild(btn); paletteButtons.push(btn); } // --- BRUSH SIZE & FILL TOOL UI --- // Place these tools vertically on the right side of the screen, above the palette bar var toolButtonSize = 100; var toolButtonMargin = 32; var toolStartX = 2048 - toolButtonSize - 40; var toolStartY = paletteStartY - (toolButtonSize + toolButtonMargin) * 2; // Brush size state: 1 or 2 (for 1x1 or 2x2) var brushSize = 1; var fillMode = false; // Brush 1x1 button var brush1Btn = LK.getAsset('color_black', { anchorX: 0.5, anchorY: 0.5 }); brush1Btn.width = toolButtonSize; brush1Btn.height = toolButtonSize; brush1Btn.alpha = 0.18; brush1Btn.x = toolStartX + toolButtonSize / 2; brush1Btn.y = toolStartY + toolButtonSize / 2; game.addChild(brush1Btn); var brush1Icon = new Text2('1x1', { size: 44, fill: 0x222222 }); brush1Icon.anchor.set(0.5, 0.5); brush1Icon.x = brush1Btn.x; brush1Icon.y = brush1Btn.y; game.addChild(brush1Icon); // Brush 2x2 button var brush2Btn = LK.getAsset('color_black', { anchorX: 0.5, anchorY: 0.5 }); brush2Btn.width = toolButtonSize; brush2Btn.height = toolButtonSize; brush2Btn.alpha = 0.18; brush2Btn.x = toolStartX + toolButtonSize / 2; brush2Btn.y = toolStartY + toolButtonSize * 1.5 + toolButtonMargin; game.addChild(brush2Btn); var brush2Icon = new Text2('2x2', { size: 44, fill: 0x222222 }); brush2Icon.anchor.set(0.5, 0.5); brush2Icon.x = brush2Btn.x; brush2Icon.y = brush2Btn.y; game.addChild(brush2Icon); // Fill tool button var fillBtn = LK.getAsset('color_black', { anchorX: 0.5, anchorY: 0.5 }); fillBtn.width = toolButtonSize; fillBtn.height = toolButtonSize; fillBtn.alpha = 0.18; fillBtn.x = toolStartX + toolButtonSize / 2; fillBtn.y = toolStartY + toolButtonSize * 2.5 + toolButtonMargin * 2; game.addChild(fillBtn); var fillIcon = new Text2('Fill', { size: 44, fill: 0x222222 }); fillIcon.anchor.set(0.5, 0.5); fillIcon.x = fillBtn.x; fillIcon.y = fillBtn.y; game.addChild(fillIcon); // Tool selection indicator var toolIndicator = LK.getAsset('color_blue', { anchorX: 0.5, anchorY: 0.5 }); toolIndicator.width = toolButtonSize + 16; toolIndicator.height = toolButtonSize + 16; toolIndicator.alpha = 0.22; game.addChild(toolIndicator); // Set initial tool indicator position function updateToolIndicator() { if (fillMode) { toolIndicator.x = fillBtn.x; toolIndicator.y = fillBtn.y; } else if (brushSize === 2) { toolIndicator.x = brush2Btn.x; toolIndicator.y = brush2Btn.y; } else { toolIndicator.x = brush1Btn.x; toolIndicator.y = brush1Btn.y; } } updateToolIndicator(); // Tool button events brush1Btn.down = function () { brushSize = 1; fillMode = false; updateToolIndicator(); }; brush2Btn.down = function () { brushSize = 2; fillMode = false; updateToolIndicator(); }; fillBtn.down = function () { fillMode = true; updateToolIndicator(); }; // --- PALETTE SELECTION INDICATOR --- var paletteIndicator = LK.getAsset('color_black', { anchorX: 0.5, anchorY: 0.5 }); paletteIndicator.width = paletteCellSize + 16; paletteIndicator.height = paletteCellSize + 16; paletteIndicator.alpha = 0.25; game.addChild(paletteIndicator); // --- MINI SPONGEBOB REFERENCE AT BOTTOM --- // Use the SpongeBobReference image asset at the bottom center as a reference // Set the mini reference image to be a square aspect ratio var miniRefImageSize = 384; // Make it a square, same as previous height var miniRefGridMarginAbovePalette = 40; // Margin between top of palette and bottom of mini-grid var miniRefImageBottomY = paletteStartY - miniRefGridMarginAbovePalette; var miniRefImageStartX = Math.floor((2048 - miniRefImageSize) / 2); var miniRefImageStartY = miniRefImageBottomY - miniRefImageSize; // Add the reference image asset as a square var miniRefImage = LK.getAsset('SpongeBobReference', { anchorX: 0, anchorY: 0, x: miniRefImageStartX, y: miniRefImageStartY, width: miniRefImageSize, height: miniRefImageSize, alpha: 0.95 }); game.addChild(miniRefImage); // --- PALETTE SELECTION LOGIC --- // Play and loop the music asset named Music on first user interaction (to comply with browser autoplay policies) var musicStarted = false; function startMusicIfNeeded() { if (!musicStarted) { LK.playMusic('Music', { loop: true }); musicStarted = true; } } // Listen for first interaction to start music game.down = function (x, y, obj) { startMusicIfNeeded(); // If a palette button or grid cell is pressed, their own .down will also be called }; function selectColor(colorId) { selectedColorId = colorId; // Move indicator to selected button for (var i = 0; i < paletteButtons.length; i++) { if (paletteButtons[i].colorId === colorId) { paletteIndicator.x = paletteButtons[i].x; paletteIndicator.y = paletteButtons[i].y; break; } } } selectColor(selectedColorId); // --- COMPLETION CHECK --- function checkIfComplete() { if (isComplete) return; for (var y = 0; y < gridRows; y++) { for (var x = 0; x < gridCols; x++) { if (gridCells[y][x].getColorId() !== spongebobReferenceColorIds[y][x]) { return; } } } // All cells match! isComplete = true; showCompletion(); } // --- COMPLETION UI --- function showCompletion() { // Flash green LK.effects.flashScreen(0x7ED957, 800); // Show "You did it!" message var winText = new Text2('You did it!', { size: 120, fill: 0x7ED957 }); winText.anchor.set(0.5, 0.5); winText.x = 2048 / 2; winText.y = 2732 / 2 - 100; game.addChild(winText); var compareText = new Text2('Your SpongeBob matches the reference!', { size: 60, fill: 0x222222 }); compareText.anchor.set(0.5, 0.5); compareText.x = 2048 / 2; compareText.y = 2732 / 2 + 40; game.addChild(compareText); // Animate winText tween(winText, { scaleX: 1.2, scaleY: 1.2 }, { duration: 400, easing: tween.elasticOut, onFinish: function onFinish() { tween(winText, { scaleX: 1, scaleY: 1 }, { duration: 300, easing: tween.easeOut }); } }); } // --- GAME UPDATE --- game.update = function () { // No per-frame logic needed for this game }; // --- DRAG PREVENTION --- // No drag logic needed; all interaction is tap/click // --- GUI LAYOUT --- // Position title and instructions titleText.x = 2048 / 2; titleText.y = 20; instrText.x = 2048 / 2; instrText.y = 120; // --- END OF GAME CODE ---