User prompt
Improve clue logic so all factors are available
User prompt
Move wins and losses tally up 750 in correct and incorrect screens
User prompt
Have a win loss tally on the correct and incorrect screen to keep tabs on how many times the player is correct or incorrect ↪💡 Consider importing and using the following plugins: @upit/storage.v1
User prompt
Fix this please
User prompt
Fix this please
User prompt
Make clues more adjusted to lead to the solution
User prompt
Make clues more intricate and inclusive of all factors
User prompt
Ensure all clues are visible without a strike through them when game is restarted
User prompt
When starting a new puzzle ensure all clues are not struck out
User prompt
Use play again asset for play again button
User prompt
After correctly solving the puzzle add play again button to correct scene
User prompt
Remove first and second scene and go straight from title scene to puzzle game
User prompt
Make clues more adjusted to lead to the solution
User prompt
Add another column of clues so they can all be seen on screen
User prompt
Don't show repeated clues
User prompt
Change <> symbols to mean directly next to
User prompt
Make sure all clues are visible and not off screen
User prompt
Add a third and fourth column of clues
User prompt
Add more clues to the puzzle to make it possible to solve
User prompt
Fix randomised clue generator and remove all hard coded clues
User prompt
Please fix the bug: 'TypeError: Cannot read properties of undefined (reading 'length')' in or related to this line: 'var item1Asset = LK.getAsset(clue.item1, {' Line Number: 1610
User prompt
Please fix the bug: 'TypeError: Cannot read properties of undefined (reading 'length')' in or related to this line: 'var item1Asset = LK.getAsset(clue.item1, {' Line Number: 1034
User prompt
✅ Add global puzzle generation system with randomized solutions and clues
User prompt
Replace hardcoded puzzle solution with randomized generation system
User prompt
Show story in front of second scene
/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ // Dot class for interactive dots in the puzzle var Dot = Container.expand(function () { var self = Container.call(this); // Create a visual representation for the dot var dotGraphics = self.attachAsset('Street', { anchorX: 0.5, anchorY: 0.5, scaleX: 1.8, scaleY: 1.8, alpha: 0 }); // Dot properties self.isActive = false; self.gridX = 0; self.gridY = 0; self.instrumentIndex = 0; self.currentInstrument = null; // Array of instrument image IDs for first row (dots 1-5) self.instruments = ['Blank', 'Saxophone', 'Drum', 'Gutair', 'Harp', 'Flute']; // Array of image IDs for dots 21-25 (bottom row) self.specialInstruments = ['Blank', 'PJ', 'KJ', 'Harmony', 'Khalida', 'Sapphire']; // Method to toggle dot state self.toggle = function () { self.isActive = !self.isActive; }; // Method to cycle through instruments for first row (dots 1-5) self.cycleInstrument = function () { // Remove current instrument if it exists and free it from usedInstruments if (self.currentInstrument) { var currentInstrumentId = self.instruments[self.instrumentIndex]; if (currentInstrumentId !== 'Blank' && usedInstruments[currentInstrumentId] === self) { delete usedInstruments[currentInstrumentId]; } self.removeChild(self.currentInstrument); self.currentInstrument = null; } // Find next available instrument var startIndex = self.instrumentIndex; var found = false; do { self.instrumentIndex = (self.instrumentIndex + 1) % self.instruments.length; var instrumentId = self.instruments[self.instrumentIndex]; // Check if instrument is available (Blank is always available) if (instrumentId === 'Blank' || !usedInstruments[instrumentId]) { found = true; // Mark non-blank instruments as used if (instrumentId !== 'Blank') { usedInstruments[instrumentId] = self; } // Create new instrument image self.currentInstrument = self.attachAsset(instrumentId, { anchorX: 0.5, anchorY: 0.5, scaleX: 1.0, scaleY: 1.0 }); break; } } while (self.instrumentIndex !== startIndex); // If no available instrument found, stay on current (shouldn't happen with 6 instruments for 5 dots) if (!found) { self.instrumentIndex = startIndex; } }; // Method to cycle through special images for dots 21-25 (bottom row) self.cycleSpecialInstrument = function () { // Remove current instrument if it exists if (self.currentInstrument) { // Remove from usedSpecialInstruments if not Blank if (typeof usedSpecialInstruments !== "undefined" && self.specialInstruments && typeof self.specialInstrumentIndex === "number") { var prevId = self.specialInstruments[self.specialInstrumentIndex]; if (prevId !== 'Blank' && usedSpecialInstruments[prevId] === self) { delete usedSpecialInstruments[prevId]; } } self.removeChild(self.currentInstrument); self.currentInstrument = null; } // Find next available special instrument (no duplicates except Blank) if (typeof usedSpecialInstruments === "undefined") { usedSpecialInstruments = {}; } if (typeof self.specialInstrumentIndex !== "number") self.specialInstrumentIndex = 0; self.specialInstrumentIndex = typeof self.specialInstrumentIndex === "number" ? self.specialInstrumentIndex : 0; var startIndex = self.specialInstrumentIndex; var found = false; do { self.specialInstrumentIndex = (self.specialInstrumentIndex + 1) % self.specialInstruments.length; var instrumentId = self.specialInstruments[self.specialInstrumentIndex]; // Only allow Blank or unused if (instrumentId === 'Blank' || !usedSpecialInstruments[instrumentId]) { found = true; // Mark as used if not Blank if (instrumentId !== 'Blank') { usedSpecialInstruments[instrumentId] = self; } // Slightly decrease the size of all special images for dots 21-25 var scaleX = 0.85; var scaleY = 0.85; if (instrumentId === 'Harmony') { scaleX = 1.45; scaleY = 1.45; } // Move Khalida or Harmony image up by 10 pixels, move KJ down by 5 pixels var extraY = 0; if (instrumentId === 'Khalida' || instrumentId === 'Harmony') { extraY = -10; } if (instrumentId === 'KJ') { extraY = 5; } self.currentInstrument = self.attachAsset(instrumentId, { anchorX: 0.5, anchorY: 0.5, scaleX: scaleX, scaleY: scaleY, y: extraY }); break; } } while (self.specialInstrumentIndex !== startIndex); // If no available instrument found, stay on current (shouldn't happen) if (!found) { self.specialInstrumentIndex = startIndex; } }; // Touch/click handler self.down = function (x, y, obj) { // Only cycle instruments for dots 1-5 (first row) if (self.gridY === 0) { self.cycleInstrument(); } // Dots 21-25 (bottom row, gridY === 4, gridX 0-4) else if (self.gridY === 4) { self.cycleSpecialInstrument(); } // Dots 16-20 (row 4, gridY === 3, gridX 0-4) else if (self.gridY === 3) { // Animal images to cycle through if (!self.animalImages) { self.animalImages = ['Blank', 'Cat', 'Dog', 'Fish', 'Frog', 'Turtle']; self.animalIndex = 0; } // Setup usedAnimalImages global tracker if not present if (typeof usedAnimalImages === "undefined") { usedAnimalImages = {}; } // Remove current animal image if exists and update usedAnimalImages if (self.currentInstrument) { if (typeof self.animalIndex === "number") { var prevAnimalId = self.animalImages[self.animalIndex]; if (prevAnimalId !== 'Blank' && usedAnimalImages[prevAnimalId] === self) { delete usedAnimalImages[prevAnimalId]; } } self.removeChild(self.currentInstrument); self.currentInstrument = null; } // Cycle to next available animal image (no duplicates except Blank) var startIndex = typeof self.animalIndex === "number" ? self.animalIndex : 0; var found = false; var tries = 0; do { self.animalIndex = (typeof self.animalIndex === "number" ? self.animalIndex : 0) + 1; if (self.animalIndex >= self.animalImages.length) self.animalIndex = 0; var animalId = self.animalImages[self.animalIndex]; // Only allow Blank or unused if (animalId === 'Blank' || !usedAnimalImages[animalId]) { found = true; // Mark as used if not Blank if (animalId !== 'Blank') { usedAnimalImages[animalId] = self; } self.currentInstrument = self.attachAsset(animalId, { anchorX: 0.5, anchorY: 0.5, scaleX: 1.0, scaleY: 1.0 }); break; } tries++; } while (self.animalIndex !== startIndex && tries < self.animalImages.length + 1); // If no available animal found, stay on current (shouldn't happen) if (!found) { self.animalIndex = startIndex; } } // Dots 6-10 (row 2, gridY === 1, gridX 0-4) else if (self.gridY === 1) { // Food images to cycle through if (!self.foodImages) { self.foodImages = ['Blank', 'Pizza', 'Chips', 'Icecream', 'Donut', 'Spaghetti']; self.foodIndex = 0; } // Setup usedFoodImages global tracker if not present if (typeof usedFoodImages === "undefined") { usedFoodImages = {}; } // Remove current food image if exists and update usedFoodImages if (self.currentInstrument) { if (typeof self.foodIndex === "number") { var prevFoodId = self.foodImages[self.foodIndex]; if (prevFoodId !== 'Blank' && usedFoodImages[prevFoodId] === self) { delete usedFoodImages[prevFoodId]; } } self.removeChild(self.currentInstrument); self.currentInstrument = null; } // Cycle to next available food image (no duplicates except Blank) var startFoodIndex = typeof self.foodIndex === "number" ? self.foodIndex : 0; var foundFood = false; var foodTries = 0; do { self.foodIndex = (typeof self.foodIndex === "number" ? self.foodIndex : 0) + 1; if (self.foodIndex >= self.foodImages.length) self.foodIndex = 0; var foodId = self.foodImages[self.foodIndex]; // Only allow Blank or unused if (foodId === 'Blank' || !usedFoodImages[foodId]) { foundFood = true; // Mark as used if not Blank if (foodId !== 'Blank') { usedFoodImages[foodId] = self; } self.currentInstrument = self.attachAsset(foodId, { anchorX: 0.5, anchorY: 0.5, scaleX: 1.0, scaleY: 1.0 }); break; } foodTries++; } while (self.foodIndex !== startFoodIndex && foodTries < self.foodImages.length + 1); // If no available food found, stay on current (shouldn't happen) if (!foundFood) { self.foodIndex = startFoodIndex; } } else if (self.gridY === 2) { // Toy images to cycle through if (!self.toyImages) { self.toyImages = ['Blank', 'Lego', 'Dolls', 'Basketball', 'Videogame', 'Plushtoy']; self.toyIndex = 0; } // Setup usedToyImages global tracker if not present if (typeof usedToyImages === "undefined") { usedToyImages = {}; } // Remove current toy image if exists and update usedToyImages if (self.currentInstrument) { if (typeof self.toyIndex === "number") { var prevToyId = self.toyImages[self.toyIndex]; if (prevToyId !== 'Blank' && usedToyImages[prevToyId] === self) { delete usedToyImages[prevToyId]; } } self.removeChild(self.currentInstrument); self.currentInstrument = null; } // Cycle to next available toy image (no duplicates except Blank) var startToyIndex = typeof self.toyIndex === "number" ? self.toyIndex : 0; var foundToy = false; var toyTries = 0; do { self.toyIndex = (typeof self.toyIndex === "number" ? self.toyIndex : 0) + 1; if (self.toyIndex >= self.toyImages.length) self.toyIndex = 0; var toyId = self.toyImages[self.toyIndex]; // Only allow Blank or unused if (toyId === 'Blank' || !usedToyImages[toyId]) { foundToy = true; // Mark as used if not Blank if (toyId !== 'Blank') { usedToyImages[toyId] = self; } self.currentInstrument = self.attachAsset(toyId, { anchorX: 0.5, anchorY: 0.5, scaleX: 1.0, scaleY: 1.0 }); break; } toyTries++; } while (self.toyIndex !== startToyIndex && toyTries < self.toyImages.length + 1); // If no available toy found, stay on current (shouldn't happen) if (!foundToy) { self.toyIndex = startToyIndex; } } self.toggle(); // Update clues with strikethrough after changing dot if (typeof updateCluesWithStrikethrough === 'function') { updateCluesWithStrikethrough(); } }; // Initialize dot as inactive // Initialize with blank instrument self.currentInstrument = self.attachAsset('Blank', { anchorX: 0.5, anchorY: 0.5, scaleX: 1.0, scaleY: 1.0 }); return self; }); // Puzzle class for managing a puzzle element in the game var Puzzle = Container.expand(function () { var self = Container.call(this); // Add a 4x5 asset to the puzzle and scale it to be exactly 2048 wide var targetWidth = 2048; var assetWidth = 1000; var scale = targetWidth / assetWidth; // Center horizontally, align to top var puzzleImage = self.attachAsset('4x5', { anchorX: 0.5, anchorY: 0, x: 2048 / 2, y: 0, scaleX: scale, scaleY: scale }); // (Story asset removed) // (Clue images and clue text removed) // Create 25 dots in a 5x5 grid self.dots = []; var gridSize = 5; var dotSpacing = targetWidth / (gridSize + 1); // Distribute dots evenly across the width var gridHeight = puzzleImage.height * scale; var verticalSpacing = gridHeight / (gridSize + 1); for (var row = 0; row < gridSize; row++) { for (var col = 0; col < gridSize; col++) { var dot = new Dot(); dot.gridX = col; dot.gridY = row; // Initialize all indices to 0 for consistent reset state dot.instrumentIndex = 0; dot.specialInstrumentIndex = 0; dot.animalIndex = 0; dot.foodIndex = 0; dot.toyIndex = 0; // Position dots over the 4x5 asset dot.x = (col + 1) * dotSpacing; dot.y = (row + 1) * verticalSpacing; self.dots.push(dot); self.addChild(dot); } } // Example: puzzle state self.isSolved = false; // Method to check if puzzle is solved according to target solution self.checkSolved = function () { // Target solution mapping: dot index -> expected image var targetSolution = { 0: 'Drum', // Dot 1 (row 1, col 1) 1: 'Harp', // Dot 2 (row 1, col 2) 2: 'Saxophone', // Dot 3 (row 1, col 3) 3: 'Flute', // Dot 4 (row 1, col 4) 4: 'Gutair', // Dot 5 (row 1, col 5) 5: 'Spaghetti', // Dot 6 (row 2, col 1) 6: 'Donut', // Dot 7 (row 2, col 2) 7: 'Chips', // Dot 8 (row 2, col 3) 8: 'Icecream', // Dot 9 (row 2, col 4) 9: 'Pizza', // Dot 10 (row 2, col 5) 10: 'Basketball', // Dot 11 (row 3, col 1) 11: 'Dolls', // Dot 12 (row 3, col 2) 12: 'Lego', // Dot 13 (row 3, col 3) 13: 'Videogame', // Dot 14 (row 3, col 4) 14: 'Plushtoy', // Dot 15 (row 3, col 5) 15: 'Fish', // Dot 16 (row 4, col 1) 16: 'Turtle', // Dot 17 (row 4, col 2) 17: 'Frog', // Dot 18 (row 4, col 3) 18: 'Cat', // Dot 19 (row 4, col 4) 19: 'Dog', // Dot 20 (row 4, col 5) 20: 'KJ', // Dot 21 (row 5, col 1) 21: 'Khalida', // Dot 22 (row 5, col 2) 22: 'Sapphire', // Dot 23 (row 5, col 3) 23: 'Harmony', // Dot 24 (row 5, col 4) 24: 'PJ' // Dot 25 (row 5, col 5) }; // Check if all dots match the target solution var allCorrect = true; for (var i = 0; i < self.dots.length; i++) { var dot = self.dots[i]; var expectedImage = targetSolution[i]; // Get current image of the dot based on its row and current index var currentImage = 'Blank'; var row = dot.gridY; if (row === 0 && dot.instruments) { // Row 1: Music instruments currentImage = dot.instruments[dot.instrumentIndex]; } else if (row === 1 && dot.foodImages) { // Row 2: Food currentImage = dot.foodImages[dot.foodIndex]; } else if (row === 2 && dot.toyImages) { // Row 3: Toys currentImage = dot.toyImages[dot.toyIndex]; } else if (row === 3 && dot.animalImages) { // Row 4: Animals currentImage = dot.animalImages[dot.animalIndex]; } else if (row === 4 && dot.specialInstruments) { // Row 5: Family currentImage = dot.specialInstruments[dot.specialInstrumentIndex]; } // Check if current image matches expected if (currentImage !== expectedImage) { allCorrect = false; break; } } // Update solved state only - win display handled by green tick if (allCorrect && !self.isSolved) { self.isSolved = true; } else if (!allCorrect && self.isSolved) { self.isSolved = false; } }; // Example: update method for per-frame logic self.update = function () { // Add per-frame puzzle logic here // For example, check for completion self.checkSolved(); }; return self; }); // StoryScene class for displaying story content var StoryScene = Container.expand(function () { var self = Container.call(this); // Add background var bg = self.attachAsset('Street', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, y: 2732 / 2, scaleX: 20.48, scaleY: 27.32, alpha: 0.95 }); // Add story content container var storyContent = new Container(); self.addChild(storyContent); // --- SCENE DATA --- var scenes = [{ // First scene imageId: 'First', text: "Once upon a time, in a magical puzzle world,\nthere lived characters who needed your help\nto solve their mysteries..." }, { // Second scene imageId: 'Second', text: "Each puzzle you solve brings harmony to their world.\nAre you ready to begin your adventure?" }, { // Story asset in front of second scene imageId: 'Title', text: "" }]; var currentScene = 0; // Add story title var storyTitle = new Text2("STORY", { size: 120, fill: 0xFFFFFF, align: 'center', font: "'Times New Roman','Times New Roman Bold','GillSans-Bold',Impact,'Arial Black',Tahoma" }); storyTitle.anchor.set(0.5, 0.5); storyTitle.x = 2048 / 2; storyTitle.y = 300; storyContent.addChild(storyTitle); // Add story image (centered, fills screen) var storyImage = storyContent.attachAsset(scenes[0].imageId, { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, y: 2732 / 2, scaleX: 1.0, scaleY: 1.0 }); // Add story text var storyText = new Text2(scenes[0].text, { size: 80, fill: 0xFFFFFF, align: 'center', font: "'Times New Roman','Times New Roman Bold','GillSans-Bold',Impact,'Arial Black',Tahoma" }); storyText.anchor.set(0.5, 0.5); storyText.x = 2048 / 2; storyText.y = 2732 - 600; storyContent.addChild(storyText); // Add continue button var continueText = new Text2("TAP TO CONTINUE", { size: 100, fill: 0xFFFF00, align: 'center', font: "'Times New Roman','Times New Roman Bold','GillSans-Bold',Impact,'Arial Black',Tahoma" }); continueText.anchor.set(0.5, 0.5); continueText.x = 2048 / 2; continueText.y = 2732 - 400; storyContent.addChild(continueText); // Pulse the continue text var _pulseContinueText = function pulseContinueText() { tween(continueText, { alpha: 0.3 }, { duration: 800, easing: tween.sineInOut, onFinish: function onFinish() { tween(continueText, { alpha: 1 }, { duration: 800, easing: tween.sineInOut, onFinish: _pulseContinueText }); } }); }; _pulseContinueText(); // Helper to update scene visuals with smooth fade transition function showScene(idx) { if (idx < 0 || idx >= scenes.length) return; // Fade out current image and text, then swap and fade in var fadeOutDuration = 350; var fadeInDuration = 350; // Helper to fade in new image and text function fadeInNewScene() { // Swap image if (storyImage && storyImage.parent) { storyImage.parent.removeChild(storyImage); } var newImg = storyContent.attachAsset(scenes[idx].imageId, { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, y: 2732 / 2, scaleX: 1.0, scaleY: 1.0 }); newImg.alpha = 0; storyImage = newImg; // Update text storyText.setText(scenes[idx].text); storyText.alpha = 0; // Fade in new image and text tween(newImg, { alpha: 1 }, { duration: fadeInDuration, easing: tween.cubicOut }); tween(storyText, { alpha: 1 }, { duration: fadeInDuration, easing: tween.cubicOut }); } // Fade out current image and text, then call fadeInNewScene if (storyImage && storyText) { tween(storyImage, { alpha: 0 }, { duration: fadeOutDuration, easing: tween.cubicIn, onFinish: fadeInNewScene }); tween(storyText, { alpha: 0 }, { duration: fadeOutDuration, easing: tween.cubicIn }); } else { // If no image/text, just show new scene fadeInNewScene(); } } // Handle tap/click to continue self.down = function (x, y, obj) { if (currentScene < scenes.length - 1) { // Go to next scene currentScene++; showScene(currentScene); } else { // Fade out story scene tween(self, { alpha: 0 }, { duration: 500, easing: tween.cubicOut, onFinish: function onFinish() { if (self.parent) { self.parent.removeChild(self); // Start the main game startMainGame(); } } }); } }; return self; }); // TitleScreen class for the game's title screen var TitleScreen = Container.expand(function () { var self = Container.call(this); // Add background var bg = self.attachAsset('Street', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, y: 2732 / 2, scaleX: 20.48, scaleY: 27.32, alpha: 0.95 }); // Add title image to fill the whole screen var titleImg = self.attachAsset('Title', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, y: 2732 / 2, scaleX: 1.0, scaleY: 1.0 }); // Add animated swirl image, centered, IN FRONT of title var swirlImg = self.attachAsset('Swirl', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, y: 2732 / 2, scaleX: 1.2, scaleY: 1.2, alpha: 0.45 }); self.swirlImg = swirlImg; // Add heading image above the title image and swirl, so it is in front of both // Start tiny in the center, then tween to large in the center var headingImg = self.attachAsset('Heading', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, y: 2732 / 2, // Start in the center scaleX: 0.1, scaleY: 0.1 }); // Add loading text that shows while assets are loading var loadingText = new Text2("LOADING...", { size: 80, fill: 0xFFFFFF, align: 'center', font: "'Times New Roman','Times New Roman Bold','GillSans-Bold',Impact,'Arial Black',Tahoma" }); loadingText.anchor.set(0.5, 0.5); loadingText.x = 2048 / 2; loadingText.y = 2732 / 2 + 600; loadingText.alpha = 1; self.addChild(loadingText); // Pulse the loading text while assets load var _pulseLoadingText = function pulseLoadingText() { if (!loadingText || !loadingText.parent) return; tween(loadingText, { alpha: 0.3 }, { duration: 600, easing: tween.sineInOut, onFinish: function onFinish() { if (!loadingText || !loadingText.parent) return; tween(loadingText, { alpha: 1 }, { duration: 600, easing: tween.sineInOut, onFinish: _pulseLoadingText }); } }); }; _pulseLoadingText(); // Animate heading to grow and stay in the center position, but only after fully loaded function startTitleScreenAnimations() { // Fade out loading text first if (loadingText && loadingText.parent) { tween(loadingText, { alpha: 0 }, { duration: 500, easing: tween.cubicOut, onFinish: function onFinish() { if (loadingText && loadingText.parent) { self.removeChild(loadingText); } } }); } tween(headingImg, { x: 2048 / 2, y: 2732 / 2, scaleX: 1.0, scaleY: 1.0 }, { duration: 5000, easing: tween.cubicOut }); // Animate swirl rotation using tween for infinite smooth rotation function startSwirlTween() { if (!self.swirlImg) return; // Always rotate to the next full circle (-2*PI) from current rotation for opposite direction var startRotation = self.swirlImg.rotation || 0; var endRotation = startRotation - Math.PI * 2; tween(self.swirlImg, { rotation: endRotation }, { duration: 8000, easing: tween.linear, onFinish: function onFinish() { // Reset rotation to avoid overflow and keep animation smooth if (self.swirlImg) self.swirlImg.rotation = self.swirlImg.rotation % (Math.PI * 2); startSwirlTween(); } }); } startSwirlTween(); } // Wait 2 seconds to simulate asset loading delay, then start animations LK.setTimeout(function () { if (self && self.parent) { startTitleScreenAnimations(); } }, 2000); // Add "Tap to Start" text with pulsing effect var startText = new Text2("TAP TO START", { size: 120, fill: 0xFFFF00, align: 'center', font: "'Times New Roman','Times New Roman Bold','GillSans-Bold',Impact,'Arial Black',Tahoma" }); startText.anchor.set(0.5, 0.5); startText.x = 2048 / 2; startText.y = 2732 - 300; self.addChild(startText); // Pulse the start text var _pulseStartText = function pulseStartText() { tween(startText, { alpha: 0.3 }, { duration: 800, easing: tween.sineInOut, onFinish: function onFinish() { tween(startText, { alpha: 1 }, { duration: 800, easing: tween.sineInOut, onFinish: _pulseStartText }); } }); }; _pulseStartText(); // Handle tap/click to start game self.down = function (x, y, obj) { // Fade out title screen tween(self, { alpha: 0 }, { duration: 500, easing: tween.cubicOut, onFinish: function onFinish() { if (self.parent) { self.parent.removeChild(self); // Show the first story scene after title var storyScene = new StoryScene(); game.addChild(storyScene); } } }); }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 }); /**** * Game Code ****/ // Global variables that need to be accessible var usedInstruments = {}; var puzzle; var greenTick; var numberImages = []; var allClueAssets = []; var infoButton; var instructionsScreen = null; var clueStrikeStates = [false, false]; var usedSpecialInstruments = {}; var usedAnimalImages = {}; var usedFoodImages = {}; var usedToyImages = {}; // Function to start the main game after title screen function startMainGame() { // Reset global variables usedInstruments = {}; usedSpecialInstruments = {}; usedAnimalImages = {}; usedFoodImages = {}; usedToyImages = {}; numberImages = []; allClueAssets = []; clueStrikeStates = [false, false]; // Add Puzzle to the game when it starts puzzle = new Puzzle(); game.addChild(puzzle); // Add 1 2 3 4 5 number image assets to the top of the screen var numberLabelY = 60; // 60px from top var numberSpacing = 2048 / 6; // 5 numbers, 6 spaces // Track number image assets for later removal var numberImages = []; for (var i = 1; i <= 5; i++) { var numImg = LK.getAsset(i + "", { anchorX: 0.5, anchorY: 0, x: i * numberSpacing, y: numberLabelY, scaleX: 0.7, scaleY: 0.7 }); game.addChild(numImg); numberImages.push(numImg); } // --- CLUE STRIKETHROUGH LOGIC --- // Track strikethrough state for clues (first two clues only for now) var clueStrikeStates = [false, false]; // Helper to apply or remove strikethrough effect (alpha fade) for a group of clue assets function setClueStrikethrough(clueGroup, isStruck) { var alpha = isStruck ? 0.35 : 1.0; for (var i = 0; i < clueGroup.length; i++) { if (clueGroup[i]) clueGroup[i].alpha = alpha; } } // Helper to toggle strikethrough and remember state // Optionally accepts a clueIndex to persist state for first two clues function makeClueStrikeToggle(clueGroup, clueIndex) { var struck = false; // If restoring, use persisted state if (typeof clueIndex === "number" && clueStrikeStates[clueIndex] !== undefined) { struck = clueStrikeStates[clueIndex]; setClueStrikethrough(clueGroup, struck); } for (var i = 0; i < clueGroup.length; i++) { // Attach to all, but only one will handle the toggle clueGroup[i].down = function () { struck = !struck; setClueStrikethrough(clueGroup, struck); if (typeof clueIndex === "number") { clueStrikeStates[clueIndex] = struck; } }; } } // Add sapphire avatar = fries avatar clue to the left side of the puzzle screen var sapphireImg = LK.getAsset('Sapphire', { anchorX: 0.0, anchorY: 1.0, x: 30, y: 2732 - 40 - 500 + 30, scaleX: 0.45, scaleY: 0.45 }); var friesImg = LK.getAsset('Chips', { anchorX: 0.0, anchorY: 1.0, x: 30 + 200 * 0.45 + 20 + 60, // moved right by 60px to reveal equals symbol // Sapphire width * scale + 20px gap + extra space for equals y: 2732 - 40 - 500 + 30, scaleX: 0.45, scaleY: 0.45 }); var eqText = new Text2("=", { size: 120, fill: 0xFFFFFF }); eqText.anchor.set(0.5, 1.0); eqText.x = (sapphireImg.x + friesImg.x) / 2 + 30; // Centered between sapphire and fries, nudged right for balance eqText.y = 2732 - 40 - 500 + 30; game.addChild(sapphireImg); game.addChild(eqText); game.addChild(friesImg); makeClueStrikeToggle([sapphireImg, eqText, friesImg], 0); // Add sapphire avatar < videogame asset as another clue starting the next clues column var sapphireVideogameClueY = sapphireImg.y; // align with first clue row var sapphireVideogameColumnX = friesImg.x + 350 + 600; // start a new column to the right of previous clues var sapphireClueImg = LK.getAsset('Sapphire', { anchorX: 0.0, anchorY: 1.0, x: sapphireVideogameColumnX, y: sapphireVideogameClueY, scaleX: 0.45, scaleY: 0.45 }); var videogameClueImg_sapphire = LK.getAsset('Videogame', { anchorX: 0.0, anchorY: 1.0, x: sapphireVideogameColumnX + 200 * 0.45 + 20 + 60, y: sapphireVideogameClueY, scaleX: 0.45, scaleY: 0.45 }); var ltTextSapphireVideogame = new Text2("<", { size: 120, fill: 0xFFFFFF }); ltTextSapphireVideogame.anchor.set(0.5, 1.0); ltTextSapphireVideogame.x = (sapphireClueImg.x + videogameClueImg_sapphire.x) / 2 + 30; ltTextSapphireVideogame.y = sapphireVideogameClueY; game.addChild(sapphireClueImg); game.addChild(ltTextSapphireVideogame); game.addChild(videogameClueImg_sapphire); makeClueStrikeToggle([sapphireClueImg, ltTextSapphireVideogame, videogameClueImg_sapphire], 1); // Add guitar avatar > cat asset as another clue under the sapphire < videogame clue var guitarCatClueY = sapphireVideogameClueY + 120; // 120px below the sapphire < videogame clue var guitarImg = LK.getAsset('Gutair', { anchorX: 0.0, anchorY: 1.0, x: sapphireVideogameColumnX, y: guitarCatClueY, scaleX: 0.45, scaleY: 0.45 }); var catImg = LK.getAsset('Cat', { anchorX: 0.0, anchorY: 1.0, x: sapphireVideogameColumnX + 200 * 0.45 + 20 + 60, y: guitarCatClueY, scaleX: 0.45, scaleY: 0.45 }); var gtTextGuitarCat = new Text2(">", { size: 120, fill: 0xFFFFFF }); gtTextGuitarCat.anchor.set(0.5, 1.0); gtTextGuitarCat.x = (guitarImg.x + catImg.x) / 2 + 30; gtTextGuitarCat.y = guitarCatClueY; game.addChild(guitarImg); game.addChild(gtTextGuitarCat); game.addChild(catImg); makeClueStrikeToggle([guitarImg, gtTextGuitarCat, catImg]); // Add donut avatar < chips asset as another clue under the Gutair cat clue var donutChipsClueY = guitarCatClueY + 120; // 120px below the guitar > cat clue var donutImg = LK.getAsset('Donut', { anchorX: 0.0, anchorY: 1.0, x: sapphireVideogameColumnX, y: donutChipsClueY, scaleX: 0.45, scaleY: 0.45 }); var chipsImg = LK.getAsset('Chips', { anchorX: 0.0, anchorY: 1.0, x: sapphireVideogameColumnX + 200 * 0.45 + 20 + 60, y: donutChipsClueY, scaleX: 0.45, scaleY: 0.45 }); var ltTextDonutChips = new Text2("<", { size: 120, fill: 0xFFFFFF }); ltTextDonutChips.anchor.set(0.5, 1.0); ltTextDonutChips.x = (donutImg.x + chipsImg.x) / 2 + 30; ltTextDonutChips.y = donutChipsClueY; game.addChild(donutImg); game.addChild(ltTextDonutChips); game.addChild(chipsImg); makeClueStrikeToggle([donutImg, ltTextDonutChips, chipsImg]); // Add plushtoy avatar = dog asset as another clue under donut and chips var plushtoyDogClueY = donutChipsClueY + 120; // 120px below the donut < chips clue var plushtoyImg = LK.getAsset('Plushtoy', { anchorX: 0.0, anchorY: 1.0, x: sapphireVideogameColumnX, y: plushtoyDogClueY, scaleX: 0.45, scaleY: 0.45 }); var dogImg = LK.getAsset('Dog', { anchorX: 0.0, anchorY: 1.0, x: sapphireVideogameColumnX + 200 * 0.45 + 20 + 60, y: plushtoyDogClueY, scaleX: 0.45, scaleY: 0.45 }); var eqTextPlushtoyDog = new Text2("=", { size: 120, fill: 0xFFFFFF }); eqTextPlushtoyDog.anchor.set(0.5, 1.0); eqTextPlushtoyDog.x = (plushtoyImg.x + dogImg.x) / 2 + 30; eqTextPlushtoyDog.y = plushtoyDogClueY; game.addChild(plushtoyImg); game.addChild(eqTextPlushtoyDog); game.addChild(dogImg); makeClueStrikeToggle([plushtoyImg, eqTextPlushtoyDog, dogImg]); // Add basketball avatar < donut asset as another clue under plushtoy and dog clue var basketballDonutClueY = plushtoyDogClueY + 120; // 120px below the plushtoy = dog clue var basketballImg = LK.getAsset('Basketball', { anchorX: 0.0, anchorY: 1.0, x: sapphireVideogameColumnX, y: basketballDonutClueY, scaleX: 0.45, scaleY: 0.45 }); var donut2Img = LK.getAsset('Donut', { anchorX: 0.0, anchorY: 1.0, x: sapphireVideogameColumnX + 200 * 0.45 + 20 + 60, y: basketballDonutClueY, scaleX: 0.45, scaleY: 0.45 }); var ltTextBasketballDonut = new Text2("<", { size: 120, fill: 0xFFFFFF }); ltTextBasketballDonut.anchor.set(0.5, 1.0); ltTextBasketballDonut.x = (basketballImg.x + donut2Img.x) / 2 + 30; ltTextBasketballDonut.y = basketballDonutClueY; game.addChild(basketballImg); game.addChild(ltTextBasketballDonut); game.addChild(donut2Img); makeClueStrikeToggle([basketballImg, ltTextBasketballDonut, donut2Img]); // Add PJ avatar = dog asset as another clue starting a new column var pjDogColumnX = sapphireVideogameColumnX + 2 * (200 * 0.45 + 20 + 60) + 350; // new column to the right var pjDogClueY = sapphireVideogameClueY; // align with top row var pjDogImg = LK.getAsset('PJ', { anchorX: 0.0, anchorY: 1.0, x: pjDogColumnX - 100, y: pjDogClueY, scaleX: 0.45, scaleY: 0.45 }); var dog2Img = LK.getAsset('Dog', { anchorX: 0.0, anchorY: 1.0, x: pjDogColumnX + 200 * 0.45 + 20 + 60 - 100, y: pjDogClueY, scaleX: 0.45, scaleY: 0.45 }); var eqTextPjDog = new Text2("=", { size: 120, fill: 0xFFFFFF }); eqTextPjDog.anchor.set(0.5, 1.0); eqTextPjDog.x = (pjDogImg.x + dog2Img.x) / 2 + 30; eqTextPjDog.y = pjDogClueY; game.addChild(pjDogImg); game.addChild(eqTextPjDog); game.addChild(dog2Img); makeClueStrikeToggle([pjDogImg, eqTextPjDog, dog2Img]); // Add spaghetti avatar < turtle asset as another clue under PJ dog clue var spaghettiTurtleClueY = pjDogClueY + 120; // 120px below the PJ = dog clue var spaghettiImg = LK.getAsset('Spaghetti', { anchorX: 0.0, anchorY: 1.0, x: pjDogColumnX - 100, y: spaghettiTurtleClueY, scaleX: 0.45, scaleY: 0.45 }); var turtleImg = LK.getAsset('Turtle', { anchorX: 0.0, anchorY: 1.0, x: pjDogColumnX + 200 * 0.45 + 20 + 60 - 100, y: spaghettiTurtleClueY, scaleX: 0.45, scaleY: 0.45 }); var ltTextSpaghettiTurtle = new Text2("<", { size: 120, fill: 0xFFFFFF }); ltTextSpaghettiTurtle.anchor.set(0.5, 1.0); ltTextSpaghettiTurtle.x = (spaghettiImg.x + turtleImg.x) / 2 + 30; ltTextSpaghettiTurtle.y = spaghettiTurtleClueY; game.addChild(spaghettiImg); game.addChild(ltTextSpaghettiTurtle); game.addChild(turtleImg); makeClueStrikeToggle([spaghettiImg, ltTextSpaghettiTurtle, turtleImg]); // Add frog avatar < ice cream asset as another clue under spaghetti turtle clue var frogIcecreamClueY = spaghettiTurtleClueY + 120; // 120px below the spaghetti < turtle clue var frogImg = LK.getAsset('Frog', { anchorX: 0.0, anchorY: 1.0, x: pjDogColumnX - 100, y: frogIcecreamClueY, scaleX: 0.45, scaleY: 0.45 }); var icecreamImg = LK.getAsset('Icecream', { anchorX: 0.0, anchorY: 1.0, x: pjDogColumnX + 200 * 0.45 + 20 + 60 - 100, y: frogIcecreamClueY, scaleX: 0.45, scaleY: 0.45 }); var ltTextFrogIcecream = new Text2("<", { size: 120, fill: 0xFFFFFF }); ltTextFrogIcecream.anchor.set(0.5, 1.0); ltTextFrogIcecream.x = (frogImg.x + icecreamImg.x) / 2 + 30; ltTextFrogIcecream.y = frogIcecreamClueY; game.addChild(frogImg); game.addChild(ltTextFrogIcecream); game.addChild(icecreamImg); makeClueStrikeToggle([frogImg, ltTextFrogIcecream, icecreamImg]); // Add fish avatar = spaghetti asset as another clue under frog icecream clue var fishSpaghettiClueY = frogIcecreamClueY + 120; // 120px below the frog < icecream clue var fishImg = LK.getAsset('Fish', { anchorX: 0.0, anchorY: 1.0, x: pjDogColumnX - 100, y: fishSpaghettiClueY, scaleX: 0.45, scaleY: 0.45 }); var spaghetti2Img = LK.getAsset('Spaghetti', { anchorX: 0.0, anchorY: 1.0, x: pjDogColumnX + 200 * 0.45 + 20 + 60 - 100, y: fishSpaghettiClueY, scaleX: 0.45, scaleY: 0.45 }); var eqTextFishSpaghetti = new Text2("=", { size: 120, fill: 0xFFFFFF }); eqTextFishSpaghetti.anchor.set(0.5, 1.0); eqTextFishSpaghetti.x = (fishImg.x + spaghetti2Img.x) / 2 + 30; eqTextFishSpaghetti.y = fishSpaghettiClueY; game.addChild(fishImg); game.addChild(eqTextFishSpaghetti); game.addChild(spaghetti2Img); makeClueStrikeToggle([fishImg, eqTextFishSpaghetti, spaghetti2Img]); // Add cat avatar = videogame asset as another clue under fish and spaghetti var catVideogameClueY = fishSpaghettiClueY + 120; // 120px below the fish = spaghetti clue var catClueImg = LK.getAsset('Cat', { anchorX: 0.0, anchorY: 1.0, x: pjDogColumnX - 100, y: catVideogameClueY, scaleX: 0.45, scaleY: 0.45 }); var videogameClueImg_cat = LK.getAsset('Videogame', { anchorX: 0.0, anchorY: 1.0, x: pjDogColumnX + 200 * 0.45 + 20 + 60 - 100, y: catVideogameClueY, scaleX: 0.45, scaleY: 0.45 }); var eqTextCatVideogame = new Text2("=", { size: 120, fill: 0xFFFFFF }); eqTextCatVideogame.anchor.set(0.5, 1.0); eqTextCatVideogame.x = (catClueImg.x + videogameClueImg_cat.x) / 2 + 30; eqTextCatVideogame.y = catVideogameClueY; game.addChild(catClueImg); game.addChild(eqTextCatVideogame); game.addChild(videogameClueImg_cat); makeClueStrikeToggle([catClueImg, eqTextCatVideogame, videogameClueImg_cat]); // Add Khalida avatar > KJ asset as another clue on the right of the first clue (swap with harmony < pizza) var harmonyClueY = sapphireImg.y; // align with first clue var khalidaClueImg = LK.getAsset('Khalida', { anchorX: 0.0, anchorY: 1.0, x: friesImg.x + 350, y: harmonyClueY, scaleX: 0.45, scaleY: 0.45 }); var kjClueImg = LK.getAsset('KJ', { anchorX: 0.0, anchorY: 1.0, x: friesImg.x + 350 + 200 * 0.45 + 20 + 60, y: harmonyClueY, scaleX: 0.45, scaleY: 0.45 }); var gtTextKhalidaKJ = new Text2(">", { size: 120, fill: 0xFFFFFF }); gtTextKhalidaKJ.anchor.set(0.5, 1.0); gtTextKhalidaKJ.x = (khalidaClueImg.x + kjClueImg.x) / 2 + 30; gtTextKhalidaKJ.y = harmonyClueY; game.addChild(khalidaClueImg); game.addChild(gtTextKhalidaKJ); game.addChild(kjClueImg); makeClueStrikeToggle([khalidaClueImg, gtTextKhalidaKJ, kjClueImg]); // Add PJ avatar = 5 asset as another clue under the first clue var pjClueY = sapphireImg.y + 120; // 120px below the first clue var pjImg = LK.getAsset('PJ', { anchorX: 0.0, anchorY: 1.0, x: 30, y: pjClueY, scaleX: 0.45, scaleY: 0.45 }); var fiveImg = LK.getAsset('5', { anchorX: 0.0, anchorY: 1.0, x: 30 + 200 * 0.45 + 20 + 60, // match fries x y: pjClueY, scaleX: 0.45, scaleY: 0.45 }); var eqText2 = new Text2("=", { size: 120, fill: 0xFFFFFF }); eqText2.anchor.set(0.5, 1.0); eqText2.x = (pjImg.x + fiveImg.x) / 2 + 30; eqText2.y = pjClueY; game.addChild(pjImg); game.addChild(eqText2); game.addChild(fiveImg); makeClueStrikeToggle([pjImg, eqText2, fiveImg]); // Add KJ avatar = 1 asset as another clue under the second clue var kjClueY = pjClueY + 120; // 120px below the second clue var kjImg = LK.getAsset('KJ', { anchorX: 0.0, anchorY: 1.0, x: 30, y: kjClueY, scaleX: 0.45, scaleY: 0.45 }); var oneImg = LK.getAsset('1', { anchorX: 0.0, anchorY: 1.0, x: 30 + 200 * 0.45 + 20 + 60, y: kjClueY, scaleX: 0.45, scaleY: 0.45 }); var eqText3 = new Text2("=", { size: 120, fill: 0xFFFFFF }); eqText3.anchor.set(0.5, 1.0); eqText3.x = (kjImg.x + oneImg.x) / 2 + 30; eqText3.y = kjClueY; game.addChild(kjImg); game.addChild(eqText3); game.addChild(oneImg); makeClueStrikeToggle([kjImg, eqText3, oneImg]); // Add Saxophone avatar = 3 asset as another clue under the harmony clue var saxClueY = harmonyClueY + 120; // 120px below the harmony clue // Use the same x as the right column clues (e.g. 30 + 1200) var rightColumnX = friesImg.x + 350; // This matches the x used for right column clues above var saxImg = LK.getAsset('Saxophone', { anchorX: 0.0, anchorY: 1.0, x: rightColumnX, // align left with right column clues y: saxClueY, scaleX: 0.45, scaleY: 0.45 }); var threeImg = LK.getAsset('3', { anchorX: 0.0, anchorY: 1.0, x: rightColumnX + 200 * 0.45 + 20 + 60, // match pizza x offset y: saxClueY, scaleX: 0.45, scaleY: 0.45 }); var eqTextSax = new Text2("=", { size: 120, fill: 0xFFFFFF }); eqTextSax.anchor.set(0.5, 1.0); eqTextSax.x = (saxImg.x + threeImg.x) / 2 + 30; eqTextSax.y = saxClueY; game.addChild(saxImg); game.addChild(eqTextSax); game.addChild(threeImg); makeClueStrikeToggle([saxImg, eqTextSax, threeImg]); // Add Khalida avatar = harp avatar as another clue under the third clue var khalidaClueY = kjClueY + 120; // 120px below the third clue var khalidaImg = LK.getAsset('Khalida', { anchorX: 0.0, anchorY: 1.0, x: 30, y: khalidaClueY, scaleX: 0.45, scaleY: 0.45 }); var harpImg = LK.getAsset('Harp', { anchorX: 0.0, anchorY: 1.0, x: 30 + 200 * 0.45 + 20 + 60, y: khalidaClueY, scaleX: 0.45, scaleY: 0.45 }); var eqText4 = new Text2("=", { size: 120, fill: 0xFFFFFF }); eqText4.anchor.set(0.5, 1.0); eqText4.x = (khalidaImg.x + harpImg.x) / 2 + 30; eqText4.y = khalidaClueY; game.addChild(khalidaImg); game.addChild(eqText4); game.addChild(harpImg); makeClueStrikeToggle([khalidaImg, eqText4, harpImg]); // Add Khalida avatar > KJ asset as another clue under the saxophone clue (right column, below saxophone = 3) var khalidaKJClueY = saxClueY + 120; // 120px below the saxophone clue var drumClueY = khalidaClueY + 120; // 120px below the fourth clue var drumImg = LK.getAsset('Drum', { anchorX: 0.0, anchorY: 1.0, x: 30, y: drumClueY, scaleX: 0.45, scaleY: 0.45 }); var dollsImg = LK.getAsset('Dolls', { anchorX: 0.0, anchorY: 1.0, x: 30 + 200 * 0.45 + 20 + 60, y: drumClueY, scaleX: 0.45, scaleY: 0.45 }); var ltText = new Text2("<", { size: 120, fill: 0xFFFFFF }); ltText.anchor.set(0.5, 1.0); ltText.x = (drumImg.x + dollsImg.x) / 2 + 30; ltText.y = drumClueY; game.addChild(drumImg); game.addChild(ltText); game.addChild(dollsImg); makeClueStrikeToggle([drumImg, ltText, dollsImg]); // Add harmony avatar < pizza asset as another clue under the saxophone clue (right column, below saxophone = 3) var harmonyImg = LK.getAsset('Harmony', { anchorX: 0.0, anchorY: 1.0, x: rightColumnX, // right column, same x as above y: khalidaKJClueY, scaleX: 0.55, scaleY: 0.55 }); var pizzaImgClue = LK.getAsset('Pizza', { anchorX: 0.0, anchorY: 1.0, x: rightColumnX + 200 * 0.45 + 20 + 60, y: khalidaKJClueY, scaleX: 0.45, scaleY: 0.45 }); var ltTextHarmony = new Text2("<", { size: 120, fill: 0xFFFFFF }); ltTextHarmony.anchor.set(0.5, 1.0); ltTextHarmony.x = (harmonyImg.x + pizzaImgClue.x) / 2 + 30; ltTextHarmony.y = khalidaKJClueY; game.addChild(harmonyImg); game.addChild(ltTextHarmony); game.addChild(pizzaImgClue); makeClueStrikeToggle([harmonyImg, ltTextHarmony, pizzaImgClue]); // Add drum avatar < harp avatar as another clue under the KJ Khalida clue var drumHarpClueY = khalidaKJClueY + 120; // 120px below the KJ Khalida clue var drumHarpImg = LK.getAsset('Drum', { anchorX: 0.0, anchorY: 1.0, x: harmonyImg.x, y: drumHarpClueY, scaleX: 0.45, scaleY: 0.45 }); var harpClueImg = LK.getAsset('Harp', { anchorX: 0.0, anchorY: 1.0, x: harmonyImg.x + 200 * 0.45 + 20 + 60, y: drumHarpClueY, scaleX: 0.45, scaleY: 0.45 }); var ltTextDrumHarp = new Text2("<", { size: 120, fill: 0xFFFFFF }); ltTextDrumHarp.anchor.set(0.5, 1.0); ltTextDrumHarp.x = (drumHarpImg.x + harpClueImg.x) / 2 + 30; ltTextDrumHarp.y = drumHarpClueY; game.addChild(drumHarpImg); game.addChild(ltTextDrumHarp); game.addChild(harpClueImg); makeClueStrikeToggle([drumHarpImg, ltTextDrumHarp, harpClueImg]); // Add harmony avatar > saxophone asset as another clue under the drum harp clue (right column, below drum < harp) var harmonySaxClueY = drumHarpClueY + 120; // 120px below the drum harp clue var harmonyAvatarImg = LK.getAsset('Harmony', { anchorX: 0.0, anchorY: 1.0, x: harmonyImg.x, y: harmonySaxClueY, scaleX: 0.55, scaleY: 0.55 }); var saxophoneAvatarImg = LK.getAsset('Saxophone', { anchorX: 0.0, anchorY: 1.0, x: harmonyImg.x + 200 * 0.45 + 20 + 60, y: harmonySaxClueY, scaleX: 0.45, scaleY: 0.45 }); var gtTextHarmonySax = new Text2(">", { size: 120, fill: 0xFFFFFF }); gtTextHarmonySax.anchor.set(0.5, 1.0); gtTextHarmonySax.x = (harmonyAvatarImg.x + saxophoneAvatarImg.x) / 2 + 30; gtTextHarmonySax.y = harmonySaxClueY; game.addChild(harmonyAvatarImg); game.addChild(gtTextHarmonySax); game.addChild(saxophoneAvatarImg); makeClueStrikeToggle([harmonyAvatarImg, gtTextHarmonySax, saxophoneAvatarImg]); // Add green tick to bottom right corner var greenTick = LK.getAsset('Greentick', { anchorX: 1.0, anchorY: 1.0, x: 2048 - 0, //{7i} // moved right by 50px y: 2732 - 50 - 600 - 35, // moved up by 15px (previously 10, now 15) scaleX: 0.8, scaleY: 0.8 }); game.addChild(greenTick); // Add info button to bottom left corner var infoButton = LK.getAsset('Info', { anchorX: 0.0, anchorY: 1.0, x: 0, y: 2732 - 50 - 600 - 30, scaleX: 1.5, scaleY: 1.5 }); game.addChild(infoButton); // Variable to track instructions screen var instructionsScreen = null; // Make info button clickable to show illustrated how-to-play guide infoButton.down = function (x, y, obj) { // If instructions screen is already showing, hide it if (instructionsScreen && instructionsScreen.parent) { instructionsScreen.parent.removeChild(instructionsScreen); instructionsScreen = null; return; } // Create instructions screen container instructionsScreen = new Container(); // Add semi-transparent background var instructionsBg = LK.getAsset('Street', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, y: 2732 / 2, scaleX: 20.48, scaleY: 27.32, alpha: 0.92 }); instructionsScreen.addChild(instructionsBg); // Add "How to Play" asset to the top of the instructions page var howToPlayAsset = LK.getAsset('Howtoplaybutton', { anchorX: 0.5, anchorY: 0, x: 2048 / 2, y: 80, scaleX: 1.0, scaleY: 1.0 }); instructionsScreen.addChild(howToPlayAsset); // Add visual clue examples to help players understand the clue system // Example 1: Equality clue (Sapphire = Chips) var exampleSapphire = LK.getAsset('Sapphire', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2 - 200, y: 800, scaleX: 0.6, scaleY: 0.6 }); instructionsScreen.addChild(exampleSapphire); var exampleEquals = new Text2("=", { size: 80, fill: 0xFFFFFF }); exampleEquals.anchor.set(0.5, 0.5); exampleEquals.x = 2048 / 2; exampleEquals.y = 800; instructionsScreen.addChild(exampleEquals); var exampleChips = LK.getAsset('Chips', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2 + 200, y: 800, scaleX: 0.6, scaleY: 0.6 }); instructionsScreen.addChild(exampleChips); // Example 2: Less than clue (Donut < Chips) var exampleDonut = LK.getAsset('Donut', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2 - 200, y: 950, scaleX: 0.6, scaleY: 0.6 }); instructionsScreen.addChild(exampleDonut); var exampleLessThan = new Text2("<", { size: 80, fill: 0xFFFFFF }); exampleLessThan.anchor.set(0.5, 0.5); exampleLessThan.x = 2048 / 2; exampleLessThan.y = 950; instructionsScreen.addChild(exampleLessThan); var exampleChips2 = LK.getAsset('Chips', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2 + 200, y: 950, scaleX: 0.6, scaleY: 0.6 }); instructionsScreen.addChild(exampleChips2); // Example 3: Greater than clue (Guitar > Cat) var exampleGuitar = LK.getAsset('Gutair', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2 - 200, y: 1100, scaleX: 0.6, scaleY: 0.6 }); instructionsScreen.addChild(exampleGuitar); var exampleGreaterThan = new Text2(">", { size: 80, fill: 0xFFFFFF }); exampleGreaterThan.anchor.set(0.5, 0.5); exampleGreaterThan.x = 2048 / 2; exampleGreaterThan.y = 1100; instructionsScreen.addChild(exampleGreaterThan); var exampleCat = LK.getAsset('Cat', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2 + 200, y: 1100, scaleX: 0.6, scaleY: 0.6 }); instructionsScreen.addChild(exampleCat); // Add step-by-step text instructions positioned below the visual examples var instructionsText = new Text2("HOW TO PLAY THIS PUZZLE GAME\n\n" + "1. TAP ANY QUESTION MARK to cycle through available pictures\n" + "2. USE THE CLUES (examples shown above):\n" + " • = means 'equals' or 'matches'\n" + " • < means 'comes before' (left to right)\n" + " • > means 'comes after' (left to right)\n\n" + "3. STRIKE THROUGH CLUES by tapping them\n" + "4. CHECK YOUR ANSWER by tapping the green tick\n\n" + "Tap anywhere to close this guide.", { size: 60, fill: 0xffffff, align: 'center', font: "'Times New Roman Bold','Times New Roman','GillSans-Bold',Impact,'Arial Black',Tahoma" }); instructionsText.anchor.set(0.5, 0.5); instructionsText.x = 2048 / 2; instructionsText.y = 2732 / 2 + 100 + 300; instructionsScreen.addChild(instructionsText); // Make the entire instructions screen clickable to close instructionsScreen.down = function (x, y, obj) { if (instructionsScreen && instructionsScreen.parent) { instructionsScreen.parent.removeChild(instructionsScreen); instructionsScreen = null; } }; // Add instructions screen to game game.addChild(instructionsScreen); }; // Helper to show/hide info button function setInfoButtonVisible(visible) { if (infoButton && infoButton.parent) { infoButton.visible = !!visible; } } // Function to update clues with strikethrough for solved items (picture clues only) function updateCluesWithStrikethrough() { // This function now only handles picture clue strikethrough effects // The picture clues are already implemented with makeClueStrikeToggle // No additional text-based clue processing needed } // Make green tick clickable to enter puzzle attempt greenTick.down = function (x, y, obj) { // Remove all clue assets from game when green tick is clicked if (typeof allClueAssets === "undefined") allClueAssets = []; // If not already collected, collect all clue assets for later restoration if (allClueAssets.length === 0) { // Collect all clue asset instances, including both videogame clue images allClueAssets = [sapphireImg, friesImg, eqText, sapphireClueImg, ltTextSapphireVideogame, videogameClueImg_sapphire, // sapphire < videogame guitarImg, catImg, gtTextGuitarCat, donutImg, chipsImg, ltTextDonutChips, plushtoyImg, dogImg, eqTextPlushtoyDog, basketballImg, donut2Img, ltTextBasketballDonut, pjDogImg, dog2Img, eqTextPjDog, spaghettiImg, turtleImg, ltTextSpaghettiTurtle, frogImg, icecreamImg, ltTextFrogIcecream, fishImg, spaghetti2Img, eqTextFishSpaghetti, catClueImg, eqTextCatVideogame, videogameClueImg_cat, // cat = videogame khalidaClueImg, kjClueImg, gtTextKhalidaKJ, pjImg, fiveImg, eqText2, kjImg, oneImg, eqText3, saxImg, threeImg, eqTextSax, khalidaImg, harpImg, eqText4, drumImg, dollsImg, ltText, harmonyImg, pizzaImgClue, ltTextHarmony, drumHarpImg, harpClueImg, ltTextDrumHarp, harmonyAvatarImg, saxophoneAvatarImg, gtTextHarmonySax]; // Remove duplicates and nulls for safety var seen = []; var filtered = []; for (var i = 0; i < allClueAssets.length; i++) { var asset = allClueAssets[i]; if (asset && seen.indexOf(asset) === -1) { seen.push(asset); filtered.push(asset); } } allClueAssets = filtered; } for (var i = 0; i < allClueAssets.length; i++) { if (allClueAssets[i] && allClueAssets[i].parent) { allClueAssets[i].parent.removeChild(allClueAssets[i]); } } // Remove number image assets from game when green tick is clicked if (typeof numberImages !== "undefined" && numberImages.length) { for (var i = 0; i < numberImages.length; i++) { if (numberImages[i] && numberImages[i].parent) numberImages[i].parent.removeChild(numberImages[i]); } } if (puzzle && typeof puzzle.checkSolved === "function") { // Run the check puzzle.checkSolved(); // If solved, show endpuzzletwo scene if (puzzle.isSolved) { // Remove the puzzle and green tick from the game if (puzzle.parent) puzzle.parent.removeChild(puzzle); if (greenTick.parent) greenTick.parent.removeChild(greenTick); // Hide info button when showing endpuzzletwo setInfoButtonVisible(false); // Show endpuzzletwo asset centered on screen var endpuzzletwo = LK.getAsset('Endpuzzletwo', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, y: 2732 / 2, scaleX: 2.2, scaleY: 2.2, alpha: 0 }); game.addChild(endpuzzletwo); // Fade in endpuzzletwo tween(endpuzzletwo, { alpha: 1 }, { duration: 350, easing: tween.cubicOut }); // After 2 seconds, fade out and swap to correct scene with correct word under the correct image LK.setTimeout(function () { tween(endpuzzletwo, { alpha: 0 }, { duration: 350, easing: tween.cubicIn, onFinish: function onFinish() { if (endpuzzletwo.parent) endpuzzletwo.parent.removeChild(endpuzzletwo); // Show Correct scene (centered) var correctScene = LK.getAsset('Correct', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, y: 2732 / 2, scaleX: 2.2, scaleY: 2.2, alpha: 0 }); game.addChild(correctScene); // Fade in correctScene tween(correctScene, { alpha: 1 }, { duration: 350, easing: tween.cubicOut }); // No winning image displayed - just show the correct word // Show the correct word asset at the bottom of the screen var correctWord = LK.getAsset('Correctword', { anchorX: 0.5, anchorY: 1.0, x: 2048 / 2, y: 2732 - 50, scaleX: 2.2, scaleY: 2.2, alpha: 0 }); game.addChild(correctWord); tween(correctWord, { alpha: 1 }, { duration: 350, easing: tween.cubicOut }); } }); }, 2000); } else { // If not solved, show endgame1 scene if (puzzle.parent) puzzle.parent.removeChild(puzzle); if (greenTick.parent) greenTick.parent.removeChild(greenTick); // Hide info button when showing endgame1 setInfoButtonVisible(false); // Show endgame1 asset centered on screen var endgame1 = LK.getAsset('Endpuzzleone', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, y: 2732 / 2, scaleX: 2.2, scaleY: 2.2, alpha: 0 }); game.addChild(endgame1); tween(endgame1, { alpha: 1 }, { duration: 350, easing: tween.cubicOut }); // After 2 seconds, fade out and swap to incorrect scene with incorrect word under the incorrect image LK.setTimeout(function () { tween(endgame1, { alpha: 0 }, { duration: 350, easing: tween.cubicIn, onFinish: function onFinish() { if (endgame1.parent) endgame1.parent.removeChild(endgame1); // Show Incorrect scene (centered) var incorrectScene = LK.getAsset('Incorrect', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, y: 2732 / 2, scaleX: 2.2, scaleY: 2.2, alpha: 0 }); game.addChild(incorrectScene); tween(incorrectScene, { alpha: 1 }, { duration: 350, easing: tween.cubicOut }); // Find the first incorrect dot and its expected word var targetSolution = { 0: 'Drum', 1: 'Harp', 2: 'Saxophone', 3: 'Flute', 4: 'Gutair', 5: 'Spaghetti', 6: 'Donut', 7: 'Chips', 8: 'Icecream', 9: 'Pizza', 10: 'Basketball', 11: 'Dolls', 12: 'Lego', 13: 'Videogame', 14: 'Plushtoy', 15: 'Fish', 16: 'Turtle', 17: 'Frog', 18: 'Cat', 19: 'Dog', 20: 'KJ', 21: 'Khalida', 22: 'Sapphire', 23: 'Harmony', 24: 'PJ' }; var firstWrongIdx = -1; var wrongActual = ''; var wrongExpected = ''; for (var i = 0; i < puzzle.dots.length; i++) { var dot = puzzle.dots[i]; var expected = targetSolution[i]; var actual = 'Blank'; var row = dot.gridY; // Get current image based on row and index if (row === 0 && dot.instruments) { actual = dot.instruments[dot.instrumentIndex]; } else if (row === 1 && dot.foodImages) { actual = dot.foodImages[dot.foodIndex]; } else if (row === 2 && dot.toyImages) { actual = dot.toyImages[dot.toyIndex]; } else if (row === 3 && dot.animalImages) { actual = dot.animalImages[dot.animalIndex]; } else if (row === 4 && dot.specialInstruments) { actual = dot.specialInstruments[dot.specialInstrumentIndex]; } if (actual !== expected) { firstWrongIdx = i; wrongActual = actual; wrongExpected = expected; break; } } // If found, show the incorrect image and word under it if (firstWrongIdx !== -1) { var wrongImg = null; var imgY = 2732 / 2 + 100; var wordY = imgY; // Only show the image if it's not 'Blank' if (wrongActual !== 'Blank') { wrongImg = LK.getAsset(wrongActual, { anchorX: 0.5, anchorY: 1.0, x: 2048 / 2, y: imgY, alpha: 0 }); game.addChild(wrongImg); tween(wrongImg, { alpha: 1 }, { duration: 350, easing: tween.cubicOut }); wordY = 2732 / 2 + 120 + (wrongImg.height || 100); // 20px below image } else { // If blank, just show the word lower down wordY = 2732 / 2 + 120; } // Show the incorrect word asset at the bottom of the screen var incorrectWord = LK.getAsset('Incorrectword', { anchorX: 0.5, anchorY: 1.0, x: 2048 / 2, y: 2732 - 50, // 50px padding from bottom scaleX: 2.2, scaleY: 2.2, alpha: 0 }); game.addChild(incorrectWord); tween(incorrectWord, { alpha: 1 }, { duration: 350, easing: tween.cubicOut }); // Add retry button below the incorrect image/word var retryBtnY = 2732 - 50 - incorrectWord.height * 2.2 - 40; // 40px above incorrect word var retryBtn = LK.getAsset('Retry', { anchorX: 0.5, anchorY: 1.0, x: 2048 / 2, y: retryBtnY, scaleX: 1.8, scaleY: 1.8, alpha: 0 }); game.addChild(retryBtn); tween(retryBtn, { alpha: 1 }, { duration: 350, easing: tween.cubicOut }); // Retry button handler: remove incorrect scene and restart puzzle retryBtn.down = function (x, y, obj) { // Fade out all incorrect scene assets, then remove and reset var fadeOuts = [incorrectScene, wrongImg, incorrectWord, retryBtn]; var fadeCount = 0; var fadeDone = function fadeDone() { fadeCount++; if (fadeCount === fadeOuts.length) { // Remove all incorrect scene assets if (incorrectScene && incorrectScene.parent) incorrectScene.parent.removeChild(incorrectScene); if (wrongImg && wrongImg.parent) wrongImg.parent.removeChild(wrongImg); if (incorrectWord && incorrectWord.parent) incorrectWord.parent.removeChild(incorrectWord); if (retryBtn && retryBtn.parent) retryBtn.parent.removeChild(retryBtn); // Reset all used image trackers so dots can be reused usedInstruments = {}; usedSpecialInstruments = {}; usedAnimalImages = {}; usedFoodImages = {}; usedToyImages = {}; // Re-add puzzle and green tick puzzle = new Puzzle(); game.addChild(puzzle); game.addChild(greenTick); // Re-add number image assets to the top of the screen numberImages = []; for (var i = 1; i <= 5; i++) { var numImg = LK.getAsset(i + "", { anchorX: 0.5, anchorY: 0, x: i * (2048 / 6), y: 60, scaleX: 0.7, scaleY: 0.7 }); game.addChild(numImg); numberImages.push(numImg); } // Restore all clue assets when retry is clicked if (typeof allClueAssets !== "undefined" && allClueAssets.length) { for (var i = 0; i < allClueAssets.length; i++) { if (allClueAssets[i] && !allClueAssets[i].parent) { game.addChild(allClueAssets[i]); } } // Remove all strikethrough from clues when retry is clicked for (var i = 0; i < allClueAssets.length; i++) { if (allClueAssets[i]) allClueAssets[i].alpha = 1.0; } // Reset strikethrough state for all clues for (var i = 0; i < clueStrikeStates.length; i++) { clueStrikeStates[i] = false; } } // Re-add info button after story asset if (infoButton && infoButton.parent) { infoButton.parent.removeChild(infoButton); } // Find the story asset in the puzzle and add infoButton after it var storyAssetIdx = -1; for (var i = 0; i < puzzle.children.length; i++) { var child = puzzle.children[i]; if (child && child.assetId === 'Story') { storyAssetIdx = i; break; } } if (storyAssetIdx !== -1) { // Insert infoButton after story asset if (puzzle.children.length > storyAssetIdx + 1) { puzzle.addChildAt(infoButton, storyAssetIdx + 1); } else { puzzle.addChild(infoButton); } } else { // Fallback: add to puzzle if not found puzzle.addChild(infoButton); } // Show info button again after retry setInfoButtonVisible(true); } }; for (var i = 0; i < fadeOuts.length; i++) { if (fadeOuts[i]) { tween(fadeOuts[i], { alpha: 0 }, { duration: 250, easing: tween.cubicIn, onFinish: fadeDone }); } else { fadeDone(); } } }; } } }); }, 2000); } } }; // Update global references that might be needed window.puzzle = puzzle; window.greenTick = greenTick; window.numberImages = numberImages; window.allClueAssets = allClueAssets; window.infoButton = infoButton; } // Initialize the game with title screen var titleScreen = new TitleScreen(); game.addChild(titleScreen);
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
// Dot class for interactive dots in the puzzle
var Dot = Container.expand(function () {
var self = Container.call(this);
// Create a visual representation for the dot
var dotGraphics = self.attachAsset('Street', {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 1.8,
scaleY: 1.8,
alpha: 0
});
// Dot properties
self.isActive = false;
self.gridX = 0;
self.gridY = 0;
self.instrumentIndex = 0;
self.currentInstrument = null;
// Array of instrument image IDs for first row (dots 1-5)
self.instruments = ['Blank', 'Saxophone', 'Drum', 'Gutair', 'Harp', 'Flute'];
// Array of image IDs for dots 21-25 (bottom row)
self.specialInstruments = ['Blank', 'PJ', 'KJ', 'Harmony', 'Khalida', 'Sapphire'];
// Method to toggle dot state
self.toggle = function () {
self.isActive = !self.isActive;
};
// Method to cycle through instruments for first row (dots 1-5)
self.cycleInstrument = function () {
// Remove current instrument if it exists and free it from usedInstruments
if (self.currentInstrument) {
var currentInstrumentId = self.instruments[self.instrumentIndex];
if (currentInstrumentId !== 'Blank' && usedInstruments[currentInstrumentId] === self) {
delete usedInstruments[currentInstrumentId];
}
self.removeChild(self.currentInstrument);
self.currentInstrument = null;
}
// Find next available instrument
var startIndex = self.instrumentIndex;
var found = false;
do {
self.instrumentIndex = (self.instrumentIndex + 1) % self.instruments.length;
var instrumentId = self.instruments[self.instrumentIndex];
// Check if instrument is available (Blank is always available)
if (instrumentId === 'Blank' || !usedInstruments[instrumentId]) {
found = true;
// Mark non-blank instruments as used
if (instrumentId !== 'Blank') {
usedInstruments[instrumentId] = self;
}
// Create new instrument image
self.currentInstrument = self.attachAsset(instrumentId, {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 1.0,
scaleY: 1.0
});
break;
}
} while (self.instrumentIndex !== startIndex);
// If no available instrument found, stay on current (shouldn't happen with 6 instruments for 5 dots)
if (!found) {
self.instrumentIndex = startIndex;
}
};
// Method to cycle through special images for dots 21-25 (bottom row)
self.cycleSpecialInstrument = function () {
// Remove current instrument if it exists
if (self.currentInstrument) {
// Remove from usedSpecialInstruments if not Blank
if (typeof usedSpecialInstruments !== "undefined" && self.specialInstruments && typeof self.specialInstrumentIndex === "number") {
var prevId = self.specialInstruments[self.specialInstrumentIndex];
if (prevId !== 'Blank' && usedSpecialInstruments[prevId] === self) {
delete usedSpecialInstruments[prevId];
}
}
self.removeChild(self.currentInstrument);
self.currentInstrument = null;
}
// Find next available special instrument (no duplicates except Blank)
if (typeof usedSpecialInstruments === "undefined") {
usedSpecialInstruments = {};
}
if (typeof self.specialInstrumentIndex !== "number") self.specialInstrumentIndex = 0;
self.specialInstrumentIndex = typeof self.specialInstrumentIndex === "number" ? self.specialInstrumentIndex : 0;
var startIndex = self.specialInstrumentIndex;
var found = false;
do {
self.specialInstrumentIndex = (self.specialInstrumentIndex + 1) % self.specialInstruments.length;
var instrumentId = self.specialInstruments[self.specialInstrumentIndex];
// Only allow Blank or unused
if (instrumentId === 'Blank' || !usedSpecialInstruments[instrumentId]) {
found = true;
// Mark as used if not Blank
if (instrumentId !== 'Blank') {
usedSpecialInstruments[instrumentId] = self;
}
// Slightly decrease the size of all special images for dots 21-25
var scaleX = 0.85;
var scaleY = 0.85;
if (instrumentId === 'Harmony') {
scaleX = 1.45;
scaleY = 1.45;
}
// Move Khalida or Harmony image up by 10 pixels, move KJ down by 5 pixels
var extraY = 0;
if (instrumentId === 'Khalida' || instrumentId === 'Harmony') {
extraY = -10;
}
if (instrumentId === 'KJ') {
extraY = 5;
}
self.currentInstrument = self.attachAsset(instrumentId, {
anchorX: 0.5,
anchorY: 0.5,
scaleX: scaleX,
scaleY: scaleY,
y: extraY
});
break;
}
} while (self.specialInstrumentIndex !== startIndex);
// If no available instrument found, stay on current (shouldn't happen)
if (!found) {
self.specialInstrumentIndex = startIndex;
}
};
// Touch/click handler
self.down = function (x, y, obj) {
// Only cycle instruments for dots 1-5 (first row)
if (self.gridY === 0) {
self.cycleInstrument();
}
// Dots 21-25 (bottom row, gridY === 4, gridX 0-4)
else if (self.gridY === 4) {
self.cycleSpecialInstrument();
}
// Dots 16-20 (row 4, gridY === 3, gridX 0-4)
else if (self.gridY === 3) {
// Animal images to cycle through
if (!self.animalImages) {
self.animalImages = ['Blank', 'Cat', 'Dog', 'Fish', 'Frog', 'Turtle'];
self.animalIndex = 0;
}
// Setup usedAnimalImages global tracker if not present
if (typeof usedAnimalImages === "undefined") {
usedAnimalImages = {};
}
// Remove current animal image if exists and update usedAnimalImages
if (self.currentInstrument) {
if (typeof self.animalIndex === "number") {
var prevAnimalId = self.animalImages[self.animalIndex];
if (prevAnimalId !== 'Blank' && usedAnimalImages[prevAnimalId] === self) {
delete usedAnimalImages[prevAnimalId];
}
}
self.removeChild(self.currentInstrument);
self.currentInstrument = null;
}
// Cycle to next available animal image (no duplicates except Blank)
var startIndex = typeof self.animalIndex === "number" ? self.animalIndex : 0;
var found = false;
var tries = 0;
do {
self.animalIndex = (typeof self.animalIndex === "number" ? self.animalIndex : 0) + 1;
if (self.animalIndex >= self.animalImages.length) self.animalIndex = 0;
var animalId = self.animalImages[self.animalIndex];
// Only allow Blank or unused
if (animalId === 'Blank' || !usedAnimalImages[animalId]) {
found = true;
// Mark as used if not Blank
if (animalId !== 'Blank') {
usedAnimalImages[animalId] = self;
}
self.currentInstrument = self.attachAsset(animalId, {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 1.0,
scaleY: 1.0
});
break;
}
tries++;
} while (self.animalIndex !== startIndex && tries < self.animalImages.length + 1);
// If no available animal found, stay on current (shouldn't happen)
if (!found) {
self.animalIndex = startIndex;
}
}
// Dots 6-10 (row 2, gridY === 1, gridX 0-4)
else if (self.gridY === 1) {
// Food images to cycle through
if (!self.foodImages) {
self.foodImages = ['Blank', 'Pizza', 'Chips', 'Icecream', 'Donut', 'Spaghetti'];
self.foodIndex = 0;
}
// Setup usedFoodImages global tracker if not present
if (typeof usedFoodImages === "undefined") {
usedFoodImages = {};
}
// Remove current food image if exists and update usedFoodImages
if (self.currentInstrument) {
if (typeof self.foodIndex === "number") {
var prevFoodId = self.foodImages[self.foodIndex];
if (prevFoodId !== 'Blank' && usedFoodImages[prevFoodId] === self) {
delete usedFoodImages[prevFoodId];
}
}
self.removeChild(self.currentInstrument);
self.currentInstrument = null;
}
// Cycle to next available food image (no duplicates except Blank)
var startFoodIndex = typeof self.foodIndex === "number" ? self.foodIndex : 0;
var foundFood = false;
var foodTries = 0;
do {
self.foodIndex = (typeof self.foodIndex === "number" ? self.foodIndex : 0) + 1;
if (self.foodIndex >= self.foodImages.length) self.foodIndex = 0;
var foodId = self.foodImages[self.foodIndex];
// Only allow Blank or unused
if (foodId === 'Blank' || !usedFoodImages[foodId]) {
foundFood = true;
// Mark as used if not Blank
if (foodId !== 'Blank') {
usedFoodImages[foodId] = self;
}
self.currentInstrument = self.attachAsset(foodId, {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 1.0,
scaleY: 1.0
});
break;
}
foodTries++;
} while (self.foodIndex !== startFoodIndex && foodTries < self.foodImages.length + 1);
// If no available food found, stay on current (shouldn't happen)
if (!foundFood) {
self.foodIndex = startFoodIndex;
}
} else if (self.gridY === 2) {
// Toy images to cycle through
if (!self.toyImages) {
self.toyImages = ['Blank', 'Lego', 'Dolls', 'Basketball', 'Videogame', 'Plushtoy'];
self.toyIndex = 0;
}
// Setup usedToyImages global tracker if not present
if (typeof usedToyImages === "undefined") {
usedToyImages = {};
}
// Remove current toy image if exists and update usedToyImages
if (self.currentInstrument) {
if (typeof self.toyIndex === "number") {
var prevToyId = self.toyImages[self.toyIndex];
if (prevToyId !== 'Blank' && usedToyImages[prevToyId] === self) {
delete usedToyImages[prevToyId];
}
}
self.removeChild(self.currentInstrument);
self.currentInstrument = null;
}
// Cycle to next available toy image (no duplicates except Blank)
var startToyIndex = typeof self.toyIndex === "number" ? self.toyIndex : 0;
var foundToy = false;
var toyTries = 0;
do {
self.toyIndex = (typeof self.toyIndex === "number" ? self.toyIndex : 0) + 1;
if (self.toyIndex >= self.toyImages.length) self.toyIndex = 0;
var toyId = self.toyImages[self.toyIndex];
// Only allow Blank or unused
if (toyId === 'Blank' || !usedToyImages[toyId]) {
foundToy = true;
// Mark as used if not Blank
if (toyId !== 'Blank') {
usedToyImages[toyId] = self;
}
self.currentInstrument = self.attachAsset(toyId, {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 1.0,
scaleY: 1.0
});
break;
}
toyTries++;
} while (self.toyIndex !== startToyIndex && toyTries < self.toyImages.length + 1);
// If no available toy found, stay on current (shouldn't happen)
if (!foundToy) {
self.toyIndex = startToyIndex;
}
}
self.toggle();
// Update clues with strikethrough after changing dot
if (typeof updateCluesWithStrikethrough === 'function') {
updateCluesWithStrikethrough();
}
};
// Initialize dot as inactive
// Initialize with blank instrument
self.currentInstrument = self.attachAsset('Blank', {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 1.0,
scaleY: 1.0
});
return self;
});
// Puzzle class for managing a puzzle element in the game
var Puzzle = Container.expand(function () {
var self = Container.call(this);
// Add a 4x5 asset to the puzzle and scale it to be exactly 2048 wide
var targetWidth = 2048;
var assetWidth = 1000;
var scale = targetWidth / assetWidth;
// Center horizontally, align to top
var puzzleImage = self.attachAsset('4x5', {
anchorX: 0.5,
anchorY: 0,
x: 2048 / 2,
y: 0,
scaleX: scale,
scaleY: scale
});
// (Story asset removed)
// (Clue images and clue text removed)
// Create 25 dots in a 5x5 grid
self.dots = [];
var gridSize = 5;
var dotSpacing = targetWidth / (gridSize + 1); // Distribute dots evenly across the width
var gridHeight = puzzleImage.height * scale;
var verticalSpacing = gridHeight / (gridSize + 1);
for (var row = 0; row < gridSize; row++) {
for (var col = 0; col < gridSize; col++) {
var dot = new Dot();
dot.gridX = col;
dot.gridY = row;
// Initialize all indices to 0 for consistent reset state
dot.instrumentIndex = 0;
dot.specialInstrumentIndex = 0;
dot.animalIndex = 0;
dot.foodIndex = 0;
dot.toyIndex = 0;
// Position dots over the 4x5 asset
dot.x = (col + 1) * dotSpacing;
dot.y = (row + 1) * verticalSpacing;
self.dots.push(dot);
self.addChild(dot);
}
}
// Example: puzzle state
self.isSolved = false;
// Method to check if puzzle is solved according to target solution
self.checkSolved = function () {
// Target solution mapping: dot index -> expected image
var targetSolution = {
0: 'Drum',
// Dot 1 (row 1, col 1)
1: 'Harp',
// Dot 2 (row 1, col 2)
2: 'Saxophone',
// Dot 3 (row 1, col 3)
3: 'Flute',
// Dot 4 (row 1, col 4)
4: 'Gutair',
// Dot 5 (row 1, col 5)
5: 'Spaghetti',
// Dot 6 (row 2, col 1)
6: 'Donut',
// Dot 7 (row 2, col 2)
7: 'Chips',
// Dot 8 (row 2, col 3)
8: 'Icecream',
// Dot 9 (row 2, col 4)
9: 'Pizza',
// Dot 10 (row 2, col 5)
10: 'Basketball',
// Dot 11 (row 3, col 1)
11: 'Dolls',
// Dot 12 (row 3, col 2)
12: 'Lego',
// Dot 13 (row 3, col 3)
13: 'Videogame',
// Dot 14 (row 3, col 4)
14: 'Plushtoy',
// Dot 15 (row 3, col 5)
15: 'Fish',
// Dot 16 (row 4, col 1)
16: 'Turtle',
// Dot 17 (row 4, col 2)
17: 'Frog',
// Dot 18 (row 4, col 3)
18: 'Cat',
// Dot 19 (row 4, col 4)
19: 'Dog',
// Dot 20 (row 4, col 5)
20: 'KJ',
// Dot 21 (row 5, col 1)
21: 'Khalida',
// Dot 22 (row 5, col 2)
22: 'Sapphire',
// Dot 23 (row 5, col 3)
23: 'Harmony',
// Dot 24 (row 5, col 4)
24: 'PJ' // Dot 25 (row 5, col 5)
};
// Check if all dots match the target solution
var allCorrect = true;
for (var i = 0; i < self.dots.length; i++) {
var dot = self.dots[i];
var expectedImage = targetSolution[i];
// Get current image of the dot based on its row and current index
var currentImage = 'Blank';
var row = dot.gridY;
if (row === 0 && dot.instruments) {
// Row 1: Music instruments
currentImage = dot.instruments[dot.instrumentIndex];
} else if (row === 1 && dot.foodImages) {
// Row 2: Food
currentImage = dot.foodImages[dot.foodIndex];
} else if (row === 2 && dot.toyImages) {
// Row 3: Toys
currentImage = dot.toyImages[dot.toyIndex];
} else if (row === 3 && dot.animalImages) {
// Row 4: Animals
currentImage = dot.animalImages[dot.animalIndex];
} else if (row === 4 && dot.specialInstruments) {
// Row 5: Family
currentImage = dot.specialInstruments[dot.specialInstrumentIndex];
}
// Check if current image matches expected
if (currentImage !== expectedImage) {
allCorrect = false;
break;
}
}
// Update solved state only - win display handled by green tick
if (allCorrect && !self.isSolved) {
self.isSolved = true;
} else if (!allCorrect && self.isSolved) {
self.isSolved = false;
}
};
// Example: update method for per-frame logic
self.update = function () {
// Add per-frame puzzle logic here
// For example, check for completion
self.checkSolved();
};
return self;
});
// StoryScene class for displaying story content
var StoryScene = Container.expand(function () {
var self = Container.call(this);
// Add background
var bg = self.attachAsset('Street', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2,
scaleX: 20.48,
scaleY: 27.32,
alpha: 0.95
});
// Add story content container
var storyContent = new Container();
self.addChild(storyContent);
// --- SCENE DATA ---
var scenes = [{
// First scene
imageId: 'First',
text: "Once upon a time, in a magical puzzle world,\nthere lived characters who needed your help\nto solve their mysteries..."
}, {
// Second scene
imageId: 'Second',
text: "Each puzzle you solve brings harmony to their world.\nAre you ready to begin your adventure?"
}, {
// Story asset in front of second scene
imageId: 'Title',
text: ""
}];
var currentScene = 0;
// Add story title
var storyTitle = new Text2("STORY", {
size: 120,
fill: 0xFFFFFF,
align: 'center',
font: "'Times New Roman','Times New Roman Bold','GillSans-Bold',Impact,'Arial Black',Tahoma"
});
storyTitle.anchor.set(0.5, 0.5);
storyTitle.x = 2048 / 2;
storyTitle.y = 300;
storyContent.addChild(storyTitle);
// Add story image (centered, fills screen)
var storyImage = storyContent.attachAsset(scenes[0].imageId, {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2,
scaleX: 1.0,
scaleY: 1.0
});
// Add story text
var storyText = new Text2(scenes[0].text, {
size: 80,
fill: 0xFFFFFF,
align: 'center',
font: "'Times New Roman','Times New Roman Bold','GillSans-Bold',Impact,'Arial Black',Tahoma"
});
storyText.anchor.set(0.5, 0.5);
storyText.x = 2048 / 2;
storyText.y = 2732 - 600;
storyContent.addChild(storyText);
// Add continue button
var continueText = new Text2("TAP TO CONTINUE", {
size: 100,
fill: 0xFFFF00,
align: 'center',
font: "'Times New Roman','Times New Roman Bold','GillSans-Bold',Impact,'Arial Black',Tahoma"
});
continueText.anchor.set(0.5, 0.5);
continueText.x = 2048 / 2;
continueText.y = 2732 - 400;
storyContent.addChild(continueText);
// Pulse the continue text
var _pulseContinueText = function pulseContinueText() {
tween(continueText, {
alpha: 0.3
}, {
duration: 800,
easing: tween.sineInOut,
onFinish: function onFinish() {
tween(continueText, {
alpha: 1
}, {
duration: 800,
easing: tween.sineInOut,
onFinish: _pulseContinueText
});
}
});
};
_pulseContinueText();
// Helper to update scene visuals with smooth fade transition
function showScene(idx) {
if (idx < 0 || idx >= scenes.length) return;
// Fade out current image and text, then swap and fade in
var fadeOutDuration = 350;
var fadeInDuration = 350;
// Helper to fade in new image and text
function fadeInNewScene() {
// Swap image
if (storyImage && storyImage.parent) {
storyImage.parent.removeChild(storyImage);
}
var newImg = storyContent.attachAsset(scenes[idx].imageId, {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2,
scaleX: 1.0,
scaleY: 1.0
});
newImg.alpha = 0;
storyImage = newImg;
// Update text
storyText.setText(scenes[idx].text);
storyText.alpha = 0;
// Fade in new image and text
tween(newImg, {
alpha: 1
}, {
duration: fadeInDuration,
easing: tween.cubicOut
});
tween(storyText, {
alpha: 1
}, {
duration: fadeInDuration,
easing: tween.cubicOut
});
}
// Fade out current image and text, then call fadeInNewScene
if (storyImage && storyText) {
tween(storyImage, {
alpha: 0
}, {
duration: fadeOutDuration,
easing: tween.cubicIn,
onFinish: fadeInNewScene
});
tween(storyText, {
alpha: 0
}, {
duration: fadeOutDuration,
easing: tween.cubicIn
});
} else {
// If no image/text, just show new scene
fadeInNewScene();
}
}
// Handle tap/click to continue
self.down = function (x, y, obj) {
if (currentScene < scenes.length - 1) {
// Go to next scene
currentScene++;
showScene(currentScene);
} else {
// Fade out story scene
tween(self, {
alpha: 0
}, {
duration: 500,
easing: tween.cubicOut,
onFinish: function onFinish() {
if (self.parent) {
self.parent.removeChild(self);
// Start the main game
startMainGame();
}
}
});
}
};
return self;
});
// TitleScreen class for the game's title screen
var TitleScreen = Container.expand(function () {
var self = Container.call(this);
// Add background
var bg = self.attachAsset('Street', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2,
scaleX: 20.48,
scaleY: 27.32,
alpha: 0.95
});
// Add title image to fill the whole screen
var titleImg = self.attachAsset('Title', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2,
scaleX: 1.0,
scaleY: 1.0
});
// Add animated swirl image, centered, IN FRONT of title
var swirlImg = self.attachAsset('Swirl', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2,
scaleX: 1.2,
scaleY: 1.2,
alpha: 0.45
});
self.swirlImg = swirlImg;
// Add heading image above the title image and swirl, so it is in front of both
// Start tiny in the center, then tween to large in the center
var headingImg = self.attachAsset('Heading', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2,
// Start in the center
scaleX: 0.1,
scaleY: 0.1
});
// Add loading text that shows while assets are loading
var loadingText = new Text2("LOADING...", {
size: 80,
fill: 0xFFFFFF,
align: 'center',
font: "'Times New Roman','Times New Roman Bold','GillSans-Bold',Impact,'Arial Black',Tahoma"
});
loadingText.anchor.set(0.5, 0.5);
loadingText.x = 2048 / 2;
loadingText.y = 2732 / 2 + 600;
loadingText.alpha = 1;
self.addChild(loadingText);
// Pulse the loading text while assets load
var _pulseLoadingText = function pulseLoadingText() {
if (!loadingText || !loadingText.parent) return;
tween(loadingText, {
alpha: 0.3
}, {
duration: 600,
easing: tween.sineInOut,
onFinish: function onFinish() {
if (!loadingText || !loadingText.parent) return;
tween(loadingText, {
alpha: 1
}, {
duration: 600,
easing: tween.sineInOut,
onFinish: _pulseLoadingText
});
}
});
};
_pulseLoadingText();
// Animate heading to grow and stay in the center position, but only after fully loaded
function startTitleScreenAnimations() {
// Fade out loading text first
if (loadingText && loadingText.parent) {
tween(loadingText, {
alpha: 0
}, {
duration: 500,
easing: tween.cubicOut,
onFinish: function onFinish() {
if (loadingText && loadingText.parent) {
self.removeChild(loadingText);
}
}
});
}
tween(headingImg, {
x: 2048 / 2,
y: 2732 / 2,
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 5000,
easing: tween.cubicOut
});
// Animate swirl rotation using tween for infinite smooth rotation
function startSwirlTween() {
if (!self.swirlImg) return;
// Always rotate to the next full circle (-2*PI) from current rotation for opposite direction
var startRotation = self.swirlImg.rotation || 0;
var endRotation = startRotation - Math.PI * 2;
tween(self.swirlImg, {
rotation: endRotation
}, {
duration: 8000,
easing: tween.linear,
onFinish: function onFinish() {
// Reset rotation to avoid overflow and keep animation smooth
if (self.swirlImg) self.swirlImg.rotation = self.swirlImg.rotation % (Math.PI * 2);
startSwirlTween();
}
});
}
startSwirlTween();
}
// Wait 2 seconds to simulate asset loading delay, then start animations
LK.setTimeout(function () {
if (self && self.parent) {
startTitleScreenAnimations();
}
}, 2000);
// Add "Tap to Start" text with pulsing effect
var startText = new Text2("TAP TO START", {
size: 120,
fill: 0xFFFF00,
align: 'center',
font: "'Times New Roman','Times New Roman Bold','GillSans-Bold',Impact,'Arial Black',Tahoma"
});
startText.anchor.set(0.5, 0.5);
startText.x = 2048 / 2;
startText.y = 2732 - 300;
self.addChild(startText);
// Pulse the start text
var _pulseStartText = function pulseStartText() {
tween(startText, {
alpha: 0.3
}, {
duration: 800,
easing: tween.sineInOut,
onFinish: function onFinish() {
tween(startText, {
alpha: 1
}, {
duration: 800,
easing: tween.sineInOut,
onFinish: _pulseStartText
});
}
});
};
_pulseStartText();
// Handle tap/click to start game
self.down = function (x, y, obj) {
// Fade out title screen
tween(self, {
alpha: 0
}, {
duration: 500,
easing: tween.cubicOut,
onFinish: function onFinish() {
if (self.parent) {
self.parent.removeChild(self);
// Show the first story scene after title
var storyScene = new StoryScene();
game.addChild(storyScene);
}
}
});
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x000000
});
/****
* Game Code
****/
// Global variables that need to be accessible
var usedInstruments = {};
var puzzle;
var greenTick;
var numberImages = [];
var allClueAssets = [];
var infoButton;
var instructionsScreen = null;
var clueStrikeStates = [false, false];
var usedSpecialInstruments = {};
var usedAnimalImages = {};
var usedFoodImages = {};
var usedToyImages = {};
// Function to start the main game after title screen
function startMainGame() {
// Reset global variables
usedInstruments = {};
usedSpecialInstruments = {};
usedAnimalImages = {};
usedFoodImages = {};
usedToyImages = {};
numberImages = [];
allClueAssets = [];
clueStrikeStates = [false, false];
// Add Puzzle to the game when it starts
puzzle = new Puzzle();
game.addChild(puzzle);
// Add 1 2 3 4 5 number image assets to the top of the screen
var numberLabelY = 60; // 60px from top
var numberSpacing = 2048 / 6; // 5 numbers, 6 spaces
// Track number image assets for later removal
var numberImages = [];
for (var i = 1; i <= 5; i++) {
var numImg = LK.getAsset(i + "", {
anchorX: 0.5,
anchorY: 0,
x: i * numberSpacing,
y: numberLabelY,
scaleX: 0.7,
scaleY: 0.7
});
game.addChild(numImg);
numberImages.push(numImg);
}
// --- CLUE STRIKETHROUGH LOGIC ---
// Track strikethrough state for clues (first two clues only for now)
var clueStrikeStates = [false, false];
// Helper to apply or remove strikethrough effect (alpha fade) for a group of clue assets
function setClueStrikethrough(clueGroup, isStruck) {
var alpha = isStruck ? 0.35 : 1.0;
for (var i = 0; i < clueGroup.length; i++) {
if (clueGroup[i]) clueGroup[i].alpha = alpha;
}
}
// Helper to toggle strikethrough and remember state
// Optionally accepts a clueIndex to persist state for first two clues
function makeClueStrikeToggle(clueGroup, clueIndex) {
var struck = false;
// If restoring, use persisted state
if (typeof clueIndex === "number" && clueStrikeStates[clueIndex] !== undefined) {
struck = clueStrikeStates[clueIndex];
setClueStrikethrough(clueGroup, struck);
}
for (var i = 0; i < clueGroup.length; i++) {
// Attach to all, but only one will handle the toggle
clueGroup[i].down = function () {
struck = !struck;
setClueStrikethrough(clueGroup, struck);
if (typeof clueIndex === "number") {
clueStrikeStates[clueIndex] = struck;
}
};
}
}
// Add sapphire avatar = fries avatar clue to the left side of the puzzle screen
var sapphireImg = LK.getAsset('Sapphire', {
anchorX: 0.0,
anchorY: 1.0,
x: 30,
y: 2732 - 40 - 500 + 30,
scaleX: 0.45,
scaleY: 0.45
});
var friesImg = LK.getAsset('Chips', {
anchorX: 0.0,
anchorY: 1.0,
x: 30 + 200 * 0.45 + 20 + 60,
// moved right by 60px to reveal equals symbol
// Sapphire width * scale + 20px gap + extra space for equals
y: 2732 - 40 - 500 + 30,
scaleX: 0.45,
scaleY: 0.45
});
var eqText = new Text2("=", {
size: 120,
fill: 0xFFFFFF
});
eqText.anchor.set(0.5, 1.0);
eqText.x = (sapphireImg.x + friesImg.x) / 2 + 30; // Centered between sapphire and fries, nudged right for balance
eqText.y = 2732 - 40 - 500 + 30;
game.addChild(sapphireImg);
game.addChild(eqText);
game.addChild(friesImg);
makeClueStrikeToggle([sapphireImg, eqText, friesImg], 0);
// Add sapphire avatar < videogame asset as another clue starting the next clues column
var sapphireVideogameClueY = sapphireImg.y; // align with first clue row
var sapphireVideogameColumnX = friesImg.x + 350 + 600; // start a new column to the right of previous clues
var sapphireClueImg = LK.getAsset('Sapphire', {
anchorX: 0.0,
anchorY: 1.0,
x: sapphireVideogameColumnX,
y: sapphireVideogameClueY,
scaleX: 0.45,
scaleY: 0.45
});
var videogameClueImg_sapphire = LK.getAsset('Videogame', {
anchorX: 0.0,
anchorY: 1.0,
x: sapphireVideogameColumnX + 200 * 0.45 + 20 + 60,
y: sapphireVideogameClueY,
scaleX: 0.45,
scaleY: 0.45
});
var ltTextSapphireVideogame = new Text2("<", {
size: 120,
fill: 0xFFFFFF
});
ltTextSapphireVideogame.anchor.set(0.5, 1.0);
ltTextSapphireVideogame.x = (sapphireClueImg.x + videogameClueImg_sapphire.x) / 2 + 30;
ltTextSapphireVideogame.y = sapphireVideogameClueY;
game.addChild(sapphireClueImg);
game.addChild(ltTextSapphireVideogame);
game.addChild(videogameClueImg_sapphire);
makeClueStrikeToggle([sapphireClueImg, ltTextSapphireVideogame, videogameClueImg_sapphire], 1);
// Add guitar avatar > cat asset as another clue under the sapphire < videogame clue
var guitarCatClueY = sapphireVideogameClueY + 120; // 120px below the sapphire < videogame clue
var guitarImg = LK.getAsset('Gutair', {
anchorX: 0.0,
anchorY: 1.0,
x: sapphireVideogameColumnX,
y: guitarCatClueY,
scaleX: 0.45,
scaleY: 0.45
});
var catImg = LK.getAsset('Cat', {
anchorX: 0.0,
anchorY: 1.0,
x: sapphireVideogameColumnX + 200 * 0.45 + 20 + 60,
y: guitarCatClueY,
scaleX: 0.45,
scaleY: 0.45
});
var gtTextGuitarCat = new Text2(">", {
size: 120,
fill: 0xFFFFFF
});
gtTextGuitarCat.anchor.set(0.5, 1.0);
gtTextGuitarCat.x = (guitarImg.x + catImg.x) / 2 + 30;
gtTextGuitarCat.y = guitarCatClueY;
game.addChild(guitarImg);
game.addChild(gtTextGuitarCat);
game.addChild(catImg);
makeClueStrikeToggle([guitarImg, gtTextGuitarCat, catImg]);
// Add donut avatar < chips asset as another clue under the Gutair cat clue
var donutChipsClueY = guitarCatClueY + 120; // 120px below the guitar > cat clue
var donutImg = LK.getAsset('Donut', {
anchorX: 0.0,
anchorY: 1.0,
x: sapphireVideogameColumnX,
y: donutChipsClueY,
scaleX: 0.45,
scaleY: 0.45
});
var chipsImg = LK.getAsset('Chips', {
anchorX: 0.0,
anchorY: 1.0,
x: sapphireVideogameColumnX + 200 * 0.45 + 20 + 60,
y: donutChipsClueY,
scaleX: 0.45,
scaleY: 0.45
});
var ltTextDonutChips = new Text2("<", {
size: 120,
fill: 0xFFFFFF
});
ltTextDonutChips.anchor.set(0.5, 1.0);
ltTextDonutChips.x = (donutImg.x + chipsImg.x) / 2 + 30;
ltTextDonutChips.y = donutChipsClueY;
game.addChild(donutImg);
game.addChild(ltTextDonutChips);
game.addChild(chipsImg);
makeClueStrikeToggle([donutImg, ltTextDonutChips, chipsImg]);
// Add plushtoy avatar = dog asset as another clue under donut and chips
var plushtoyDogClueY = donutChipsClueY + 120; // 120px below the donut < chips clue
var plushtoyImg = LK.getAsset('Plushtoy', {
anchorX: 0.0,
anchorY: 1.0,
x: sapphireVideogameColumnX,
y: plushtoyDogClueY,
scaleX: 0.45,
scaleY: 0.45
});
var dogImg = LK.getAsset('Dog', {
anchorX: 0.0,
anchorY: 1.0,
x: sapphireVideogameColumnX + 200 * 0.45 + 20 + 60,
y: plushtoyDogClueY,
scaleX: 0.45,
scaleY: 0.45
});
var eqTextPlushtoyDog = new Text2("=", {
size: 120,
fill: 0xFFFFFF
});
eqTextPlushtoyDog.anchor.set(0.5, 1.0);
eqTextPlushtoyDog.x = (plushtoyImg.x + dogImg.x) / 2 + 30;
eqTextPlushtoyDog.y = plushtoyDogClueY;
game.addChild(plushtoyImg);
game.addChild(eqTextPlushtoyDog);
game.addChild(dogImg);
makeClueStrikeToggle([plushtoyImg, eqTextPlushtoyDog, dogImg]);
// Add basketball avatar < donut asset as another clue under plushtoy and dog clue
var basketballDonutClueY = plushtoyDogClueY + 120; // 120px below the plushtoy = dog clue
var basketballImg = LK.getAsset('Basketball', {
anchorX: 0.0,
anchorY: 1.0,
x: sapphireVideogameColumnX,
y: basketballDonutClueY,
scaleX: 0.45,
scaleY: 0.45
});
var donut2Img = LK.getAsset('Donut', {
anchorX: 0.0,
anchorY: 1.0,
x: sapphireVideogameColumnX + 200 * 0.45 + 20 + 60,
y: basketballDonutClueY,
scaleX: 0.45,
scaleY: 0.45
});
var ltTextBasketballDonut = new Text2("<", {
size: 120,
fill: 0xFFFFFF
});
ltTextBasketballDonut.anchor.set(0.5, 1.0);
ltTextBasketballDonut.x = (basketballImg.x + donut2Img.x) / 2 + 30;
ltTextBasketballDonut.y = basketballDonutClueY;
game.addChild(basketballImg);
game.addChild(ltTextBasketballDonut);
game.addChild(donut2Img);
makeClueStrikeToggle([basketballImg, ltTextBasketballDonut, donut2Img]);
// Add PJ avatar = dog asset as another clue starting a new column
var pjDogColumnX = sapphireVideogameColumnX + 2 * (200 * 0.45 + 20 + 60) + 350; // new column to the right
var pjDogClueY = sapphireVideogameClueY; // align with top row
var pjDogImg = LK.getAsset('PJ', {
anchorX: 0.0,
anchorY: 1.0,
x: pjDogColumnX - 100,
y: pjDogClueY,
scaleX: 0.45,
scaleY: 0.45
});
var dog2Img = LK.getAsset('Dog', {
anchorX: 0.0,
anchorY: 1.0,
x: pjDogColumnX + 200 * 0.45 + 20 + 60 - 100,
y: pjDogClueY,
scaleX: 0.45,
scaleY: 0.45
});
var eqTextPjDog = new Text2("=", {
size: 120,
fill: 0xFFFFFF
});
eqTextPjDog.anchor.set(0.5, 1.0);
eqTextPjDog.x = (pjDogImg.x + dog2Img.x) / 2 + 30;
eqTextPjDog.y = pjDogClueY;
game.addChild(pjDogImg);
game.addChild(eqTextPjDog);
game.addChild(dog2Img);
makeClueStrikeToggle([pjDogImg, eqTextPjDog, dog2Img]);
// Add spaghetti avatar < turtle asset as another clue under PJ dog clue
var spaghettiTurtleClueY = pjDogClueY + 120; // 120px below the PJ = dog clue
var spaghettiImg = LK.getAsset('Spaghetti', {
anchorX: 0.0,
anchorY: 1.0,
x: pjDogColumnX - 100,
y: spaghettiTurtleClueY,
scaleX: 0.45,
scaleY: 0.45
});
var turtleImg = LK.getAsset('Turtle', {
anchorX: 0.0,
anchorY: 1.0,
x: pjDogColumnX + 200 * 0.45 + 20 + 60 - 100,
y: spaghettiTurtleClueY,
scaleX: 0.45,
scaleY: 0.45
});
var ltTextSpaghettiTurtle = new Text2("<", {
size: 120,
fill: 0xFFFFFF
});
ltTextSpaghettiTurtle.anchor.set(0.5, 1.0);
ltTextSpaghettiTurtle.x = (spaghettiImg.x + turtleImg.x) / 2 + 30;
ltTextSpaghettiTurtle.y = spaghettiTurtleClueY;
game.addChild(spaghettiImg);
game.addChild(ltTextSpaghettiTurtle);
game.addChild(turtleImg);
makeClueStrikeToggle([spaghettiImg, ltTextSpaghettiTurtle, turtleImg]);
// Add frog avatar < ice cream asset as another clue under spaghetti turtle clue
var frogIcecreamClueY = spaghettiTurtleClueY + 120; // 120px below the spaghetti < turtle clue
var frogImg = LK.getAsset('Frog', {
anchorX: 0.0,
anchorY: 1.0,
x: pjDogColumnX - 100,
y: frogIcecreamClueY,
scaleX: 0.45,
scaleY: 0.45
});
var icecreamImg = LK.getAsset('Icecream', {
anchorX: 0.0,
anchorY: 1.0,
x: pjDogColumnX + 200 * 0.45 + 20 + 60 - 100,
y: frogIcecreamClueY,
scaleX: 0.45,
scaleY: 0.45
});
var ltTextFrogIcecream = new Text2("<", {
size: 120,
fill: 0xFFFFFF
});
ltTextFrogIcecream.anchor.set(0.5, 1.0);
ltTextFrogIcecream.x = (frogImg.x + icecreamImg.x) / 2 + 30;
ltTextFrogIcecream.y = frogIcecreamClueY;
game.addChild(frogImg);
game.addChild(ltTextFrogIcecream);
game.addChild(icecreamImg);
makeClueStrikeToggle([frogImg, ltTextFrogIcecream, icecreamImg]);
// Add fish avatar = spaghetti asset as another clue under frog icecream clue
var fishSpaghettiClueY = frogIcecreamClueY + 120; // 120px below the frog < icecream clue
var fishImg = LK.getAsset('Fish', {
anchorX: 0.0,
anchorY: 1.0,
x: pjDogColumnX - 100,
y: fishSpaghettiClueY,
scaleX: 0.45,
scaleY: 0.45
});
var spaghetti2Img = LK.getAsset('Spaghetti', {
anchorX: 0.0,
anchorY: 1.0,
x: pjDogColumnX + 200 * 0.45 + 20 + 60 - 100,
y: fishSpaghettiClueY,
scaleX: 0.45,
scaleY: 0.45
});
var eqTextFishSpaghetti = new Text2("=", {
size: 120,
fill: 0xFFFFFF
});
eqTextFishSpaghetti.anchor.set(0.5, 1.0);
eqTextFishSpaghetti.x = (fishImg.x + spaghetti2Img.x) / 2 + 30;
eqTextFishSpaghetti.y = fishSpaghettiClueY;
game.addChild(fishImg);
game.addChild(eqTextFishSpaghetti);
game.addChild(spaghetti2Img);
makeClueStrikeToggle([fishImg, eqTextFishSpaghetti, spaghetti2Img]);
// Add cat avatar = videogame asset as another clue under fish and spaghetti
var catVideogameClueY = fishSpaghettiClueY + 120; // 120px below the fish = spaghetti clue
var catClueImg = LK.getAsset('Cat', {
anchorX: 0.0,
anchorY: 1.0,
x: pjDogColumnX - 100,
y: catVideogameClueY,
scaleX: 0.45,
scaleY: 0.45
});
var videogameClueImg_cat = LK.getAsset('Videogame', {
anchorX: 0.0,
anchorY: 1.0,
x: pjDogColumnX + 200 * 0.45 + 20 + 60 - 100,
y: catVideogameClueY,
scaleX: 0.45,
scaleY: 0.45
});
var eqTextCatVideogame = new Text2("=", {
size: 120,
fill: 0xFFFFFF
});
eqTextCatVideogame.anchor.set(0.5, 1.0);
eqTextCatVideogame.x = (catClueImg.x + videogameClueImg_cat.x) / 2 + 30;
eqTextCatVideogame.y = catVideogameClueY;
game.addChild(catClueImg);
game.addChild(eqTextCatVideogame);
game.addChild(videogameClueImg_cat);
makeClueStrikeToggle([catClueImg, eqTextCatVideogame, videogameClueImg_cat]);
// Add Khalida avatar > KJ asset as another clue on the right of the first clue (swap with harmony < pizza)
var harmonyClueY = sapphireImg.y; // align with first clue
var khalidaClueImg = LK.getAsset('Khalida', {
anchorX: 0.0,
anchorY: 1.0,
x: friesImg.x + 350,
y: harmonyClueY,
scaleX: 0.45,
scaleY: 0.45
});
var kjClueImg = LK.getAsset('KJ', {
anchorX: 0.0,
anchorY: 1.0,
x: friesImg.x + 350 + 200 * 0.45 + 20 + 60,
y: harmonyClueY,
scaleX: 0.45,
scaleY: 0.45
});
var gtTextKhalidaKJ = new Text2(">", {
size: 120,
fill: 0xFFFFFF
});
gtTextKhalidaKJ.anchor.set(0.5, 1.0);
gtTextKhalidaKJ.x = (khalidaClueImg.x + kjClueImg.x) / 2 + 30;
gtTextKhalidaKJ.y = harmonyClueY;
game.addChild(khalidaClueImg);
game.addChild(gtTextKhalidaKJ);
game.addChild(kjClueImg);
makeClueStrikeToggle([khalidaClueImg, gtTextKhalidaKJ, kjClueImg]);
// Add PJ avatar = 5 asset as another clue under the first clue
var pjClueY = sapphireImg.y + 120; // 120px below the first clue
var pjImg = LK.getAsset('PJ', {
anchorX: 0.0,
anchorY: 1.0,
x: 30,
y: pjClueY,
scaleX: 0.45,
scaleY: 0.45
});
var fiveImg = LK.getAsset('5', {
anchorX: 0.0,
anchorY: 1.0,
x: 30 + 200 * 0.45 + 20 + 60,
// match fries x
y: pjClueY,
scaleX: 0.45,
scaleY: 0.45
});
var eqText2 = new Text2("=", {
size: 120,
fill: 0xFFFFFF
});
eqText2.anchor.set(0.5, 1.0);
eqText2.x = (pjImg.x + fiveImg.x) / 2 + 30;
eqText2.y = pjClueY;
game.addChild(pjImg);
game.addChild(eqText2);
game.addChild(fiveImg);
makeClueStrikeToggle([pjImg, eqText2, fiveImg]);
// Add KJ avatar = 1 asset as another clue under the second clue
var kjClueY = pjClueY + 120; // 120px below the second clue
var kjImg = LK.getAsset('KJ', {
anchorX: 0.0,
anchorY: 1.0,
x: 30,
y: kjClueY,
scaleX: 0.45,
scaleY: 0.45
});
var oneImg = LK.getAsset('1', {
anchorX: 0.0,
anchorY: 1.0,
x: 30 + 200 * 0.45 + 20 + 60,
y: kjClueY,
scaleX: 0.45,
scaleY: 0.45
});
var eqText3 = new Text2("=", {
size: 120,
fill: 0xFFFFFF
});
eqText3.anchor.set(0.5, 1.0);
eqText3.x = (kjImg.x + oneImg.x) / 2 + 30;
eqText3.y = kjClueY;
game.addChild(kjImg);
game.addChild(eqText3);
game.addChild(oneImg);
makeClueStrikeToggle([kjImg, eqText3, oneImg]);
// Add Saxophone avatar = 3 asset as another clue under the harmony clue
var saxClueY = harmonyClueY + 120; // 120px below the harmony clue
// Use the same x as the right column clues (e.g. 30 + 1200)
var rightColumnX = friesImg.x + 350; // This matches the x used for right column clues above
var saxImg = LK.getAsset('Saxophone', {
anchorX: 0.0,
anchorY: 1.0,
x: rightColumnX,
// align left with right column clues
y: saxClueY,
scaleX: 0.45,
scaleY: 0.45
});
var threeImg = LK.getAsset('3', {
anchorX: 0.0,
anchorY: 1.0,
x: rightColumnX + 200 * 0.45 + 20 + 60,
// match pizza x offset
y: saxClueY,
scaleX: 0.45,
scaleY: 0.45
});
var eqTextSax = new Text2("=", {
size: 120,
fill: 0xFFFFFF
});
eqTextSax.anchor.set(0.5, 1.0);
eqTextSax.x = (saxImg.x + threeImg.x) / 2 + 30;
eqTextSax.y = saxClueY;
game.addChild(saxImg);
game.addChild(eqTextSax);
game.addChild(threeImg);
makeClueStrikeToggle([saxImg, eqTextSax, threeImg]);
// Add Khalida avatar = harp avatar as another clue under the third clue
var khalidaClueY = kjClueY + 120; // 120px below the third clue
var khalidaImg = LK.getAsset('Khalida', {
anchorX: 0.0,
anchorY: 1.0,
x: 30,
y: khalidaClueY,
scaleX: 0.45,
scaleY: 0.45
});
var harpImg = LK.getAsset('Harp', {
anchorX: 0.0,
anchorY: 1.0,
x: 30 + 200 * 0.45 + 20 + 60,
y: khalidaClueY,
scaleX: 0.45,
scaleY: 0.45
});
var eqText4 = new Text2("=", {
size: 120,
fill: 0xFFFFFF
});
eqText4.anchor.set(0.5, 1.0);
eqText4.x = (khalidaImg.x + harpImg.x) / 2 + 30;
eqText4.y = khalidaClueY;
game.addChild(khalidaImg);
game.addChild(eqText4);
game.addChild(harpImg);
makeClueStrikeToggle([khalidaImg, eqText4, harpImg]);
// Add Khalida avatar > KJ asset as another clue under the saxophone clue (right column, below saxophone = 3)
var khalidaKJClueY = saxClueY + 120; // 120px below the saxophone clue
var drumClueY = khalidaClueY + 120; // 120px below the fourth clue
var drumImg = LK.getAsset('Drum', {
anchorX: 0.0,
anchorY: 1.0,
x: 30,
y: drumClueY,
scaleX: 0.45,
scaleY: 0.45
});
var dollsImg = LK.getAsset('Dolls', {
anchorX: 0.0,
anchorY: 1.0,
x: 30 + 200 * 0.45 + 20 + 60,
y: drumClueY,
scaleX: 0.45,
scaleY: 0.45
});
var ltText = new Text2("<", {
size: 120,
fill: 0xFFFFFF
});
ltText.anchor.set(0.5, 1.0);
ltText.x = (drumImg.x + dollsImg.x) / 2 + 30;
ltText.y = drumClueY;
game.addChild(drumImg);
game.addChild(ltText);
game.addChild(dollsImg);
makeClueStrikeToggle([drumImg, ltText, dollsImg]);
// Add harmony avatar < pizza asset as another clue under the saxophone clue (right column, below saxophone = 3)
var harmonyImg = LK.getAsset('Harmony', {
anchorX: 0.0,
anchorY: 1.0,
x: rightColumnX,
// right column, same x as above
y: khalidaKJClueY,
scaleX: 0.55,
scaleY: 0.55
});
var pizzaImgClue = LK.getAsset('Pizza', {
anchorX: 0.0,
anchorY: 1.0,
x: rightColumnX + 200 * 0.45 + 20 + 60,
y: khalidaKJClueY,
scaleX: 0.45,
scaleY: 0.45
});
var ltTextHarmony = new Text2("<", {
size: 120,
fill: 0xFFFFFF
});
ltTextHarmony.anchor.set(0.5, 1.0);
ltTextHarmony.x = (harmonyImg.x + pizzaImgClue.x) / 2 + 30;
ltTextHarmony.y = khalidaKJClueY;
game.addChild(harmonyImg);
game.addChild(ltTextHarmony);
game.addChild(pizzaImgClue);
makeClueStrikeToggle([harmonyImg, ltTextHarmony, pizzaImgClue]);
// Add drum avatar < harp avatar as another clue under the KJ Khalida clue
var drumHarpClueY = khalidaKJClueY + 120; // 120px below the KJ Khalida clue
var drumHarpImg = LK.getAsset('Drum', {
anchorX: 0.0,
anchorY: 1.0,
x: harmonyImg.x,
y: drumHarpClueY,
scaleX: 0.45,
scaleY: 0.45
});
var harpClueImg = LK.getAsset('Harp', {
anchorX: 0.0,
anchorY: 1.0,
x: harmonyImg.x + 200 * 0.45 + 20 + 60,
y: drumHarpClueY,
scaleX: 0.45,
scaleY: 0.45
});
var ltTextDrumHarp = new Text2("<", {
size: 120,
fill: 0xFFFFFF
});
ltTextDrumHarp.anchor.set(0.5, 1.0);
ltTextDrumHarp.x = (drumHarpImg.x + harpClueImg.x) / 2 + 30;
ltTextDrumHarp.y = drumHarpClueY;
game.addChild(drumHarpImg);
game.addChild(ltTextDrumHarp);
game.addChild(harpClueImg);
makeClueStrikeToggle([drumHarpImg, ltTextDrumHarp, harpClueImg]);
// Add harmony avatar > saxophone asset as another clue under the drum harp clue (right column, below drum < harp)
var harmonySaxClueY = drumHarpClueY + 120; // 120px below the drum harp clue
var harmonyAvatarImg = LK.getAsset('Harmony', {
anchorX: 0.0,
anchorY: 1.0,
x: harmonyImg.x,
y: harmonySaxClueY,
scaleX: 0.55,
scaleY: 0.55
});
var saxophoneAvatarImg = LK.getAsset('Saxophone', {
anchorX: 0.0,
anchorY: 1.0,
x: harmonyImg.x + 200 * 0.45 + 20 + 60,
y: harmonySaxClueY,
scaleX: 0.45,
scaleY: 0.45
});
var gtTextHarmonySax = new Text2(">", {
size: 120,
fill: 0xFFFFFF
});
gtTextHarmonySax.anchor.set(0.5, 1.0);
gtTextHarmonySax.x = (harmonyAvatarImg.x + saxophoneAvatarImg.x) / 2 + 30;
gtTextHarmonySax.y = harmonySaxClueY;
game.addChild(harmonyAvatarImg);
game.addChild(gtTextHarmonySax);
game.addChild(saxophoneAvatarImg);
makeClueStrikeToggle([harmonyAvatarImg, gtTextHarmonySax, saxophoneAvatarImg]);
// Add green tick to bottom right corner
var greenTick = LK.getAsset('Greentick', {
anchorX: 1.0,
anchorY: 1.0,
x: 2048 - 0,
//{7i} // moved right by 50px
y: 2732 - 50 - 600 - 35,
// moved up by 15px (previously 10, now 15)
scaleX: 0.8,
scaleY: 0.8
});
game.addChild(greenTick);
// Add info button to bottom left corner
var infoButton = LK.getAsset('Info', {
anchorX: 0.0,
anchorY: 1.0,
x: 0,
y: 2732 - 50 - 600 - 30,
scaleX: 1.5,
scaleY: 1.5
});
game.addChild(infoButton);
// Variable to track instructions screen
var instructionsScreen = null;
// Make info button clickable to show illustrated how-to-play guide
infoButton.down = function (x, y, obj) {
// If instructions screen is already showing, hide it
if (instructionsScreen && instructionsScreen.parent) {
instructionsScreen.parent.removeChild(instructionsScreen);
instructionsScreen = null;
return;
}
// Create instructions screen container
instructionsScreen = new Container();
// Add semi-transparent background
var instructionsBg = LK.getAsset('Street', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2,
scaleX: 20.48,
scaleY: 27.32,
alpha: 0.92
});
instructionsScreen.addChild(instructionsBg);
// Add "How to Play" asset to the top of the instructions page
var howToPlayAsset = LK.getAsset('Howtoplaybutton', {
anchorX: 0.5,
anchorY: 0,
x: 2048 / 2,
y: 80,
scaleX: 1.0,
scaleY: 1.0
});
instructionsScreen.addChild(howToPlayAsset);
// Add visual clue examples to help players understand the clue system
// Example 1: Equality clue (Sapphire = Chips)
var exampleSapphire = LK.getAsset('Sapphire', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2 - 200,
y: 800,
scaleX: 0.6,
scaleY: 0.6
});
instructionsScreen.addChild(exampleSapphire);
var exampleEquals = new Text2("=", {
size: 80,
fill: 0xFFFFFF
});
exampleEquals.anchor.set(0.5, 0.5);
exampleEquals.x = 2048 / 2;
exampleEquals.y = 800;
instructionsScreen.addChild(exampleEquals);
var exampleChips = LK.getAsset('Chips', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2 + 200,
y: 800,
scaleX: 0.6,
scaleY: 0.6
});
instructionsScreen.addChild(exampleChips);
// Example 2: Less than clue (Donut < Chips)
var exampleDonut = LK.getAsset('Donut', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2 - 200,
y: 950,
scaleX: 0.6,
scaleY: 0.6
});
instructionsScreen.addChild(exampleDonut);
var exampleLessThan = new Text2("<", {
size: 80,
fill: 0xFFFFFF
});
exampleLessThan.anchor.set(0.5, 0.5);
exampleLessThan.x = 2048 / 2;
exampleLessThan.y = 950;
instructionsScreen.addChild(exampleLessThan);
var exampleChips2 = LK.getAsset('Chips', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2 + 200,
y: 950,
scaleX: 0.6,
scaleY: 0.6
});
instructionsScreen.addChild(exampleChips2);
// Example 3: Greater than clue (Guitar > Cat)
var exampleGuitar = LK.getAsset('Gutair', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2 - 200,
y: 1100,
scaleX: 0.6,
scaleY: 0.6
});
instructionsScreen.addChild(exampleGuitar);
var exampleGreaterThan = new Text2(">", {
size: 80,
fill: 0xFFFFFF
});
exampleGreaterThan.anchor.set(0.5, 0.5);
exampleGreaterThan.x = 2048 / 2;
exampleGreaterThan.y = 1100;
instructionsScreen.addChild(exampleGreaterThan);
var exampleCat = LK.getAsset('Cat', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2 + 200,
y: 1100,
scaleX: 0.6,
scaleY: 0.6
});
instructionsScreen.addChild(exampleCat);
// Add step-by-step text instructions positioned below the visual examples
var instructionsText = new Text2("HOW TO PLAY THIS PUZZLE GAME\n\n" + "1. TAP ANY QUESTION MARK to cycle through available pictures\n" + "2. USE THE CLUES (examples shown above):\n" + " • = means 'equals' or 'matches'\n" + " • < means 'comes before' (left to right)\n" + " • > means 'comes after' (left to right)\n\n" + "3. STRIKE THROUGH CLUES by tapping them\n" + "4. CHECK YOUR ANSWER by tapping the green tick\n\n" + "Tap anywhere to close this guide.", {
size: 60,
fill: 0xffffff,
align: 'center',
font: "'Times New Roman Bold','Times New Roman','GillSans-Bold',Impact,'Arial Black',Tahoma"
});
instructionsText.anchor.set(0.5, 0.5);
instructionsText.x = 2048 / 2;
instructionsText.y = 2732 / 2 + 100 + 300;
instructionsScreen.addChild(instructionsText);
// Make the entire instructions screen clickable to close
instructionsScreen.down = function (x, y, obj) {
if (instructionsScreen && instructionsScreen.parent) {
instructionsScreen.parent.removeChild(instructionsScreen);
instructionsScreen = null;
}
};
// Add instructions screen to game
game.addChild(instructionsScreen);
};
// Helper to show/hide info button
function setInfoButtonVisible(visible) {
if (infoButton && infoButton.parent) {
infoButton.visible = !!visible;
}
}
// Function to update clues with strikethrough for solved items (picture clues only)
function updateCluesWithStrikethrough() {
// This function now only handles picture clue strikethrough effects
// The picture clues are already implemented with makeClueStrikeToggle
// No additional text-based clue processing needed
}
// Make green tick clickable to enter puzzle attempt
greenTick.down = function (x, y, obj) {
// Remove all clue assets from game when green tick is clicked
if (typeof allClueAssets === "undefined") allClueAssets = [];
// If not already collected, collect all clue assets for later restoration
if (allClueAssets.length === 0) {
// Collect all clue asset instances, including both videogame clue images
allClueAssets = [sapphireImg, friesImg, eqText, sapphireClueImg, ltTextSapphireVideogame, videogameClueImg_sapphire,
// sapphire < videogame
guitarImg, catImg, gtTextGuitarCat, donutImg, chipsImg, ltTextDonutChips, plushtoyImg, dogImg, eqTextPlushtoyDog, basketballImg, donut2Img, ltTextBasketballDonut, pjDogImg, dog2Img, eqTextPjDog, spaghettiImg, turtleImg, ltTextSpaghettiTurtle, frogImg, icecreamImg, ltTextFrogIcecream, fishImg, spaghetti2Img, eqTextFishSpaghetti, catClueImg, eqTextCatVideogame, videogameClueImg_cat,
// cat = videogame
khalidaClueImg, kjClueImg, gtTextKhalidaKJ, pjImg, fiveImg, eqText2, kjImg, oneImg, eqText3, saxImg, threeImg, eqTextSax, khalidaImg, harpImg, eqText4, drumImg, dollsImg, ltText, harmonyImg, pizzaImgClue, ltTextHarmony, drumHarpImg, harpClueImg, ltTextDrumHarp, harmonyAvatarImg, saxophoneAvatarImg, gtTextHarmonySax];
// Remove duplicates and nulls for safety
var seen = [];
var filtered = [];
for (var i = 0; i < allClueAssets.length; i++) {
var asset = allClueAssets[i];
if (asset && seen.indexOf(asset) === -1) {
seen.push(asset);
filtered.push(asset);
}
}
allClueAssets = filtered;
}
for (var i = 0; i < allClueAssets.length; i++) {
if (allClueAssets[i] && allClueAssets[i].parent) {
allClueAssets[i].parent.removeChild(allClueAssets[i]);
}
}
// Remove number image assets from game when green tick is clicked
if (typeof numberImages !== "undefined" && numberImages.length) {
for (var i = 0; i < numberImages.length; i++) {
if (numberImages[i] && numberImages[i].parent) numberImages[i].parent.removeChild(numberImages[i]);
}
}
if (puzzle && typeof puzzle.checkSolved === "function") {
// Run the check
puzzle.checkSolved();
// If solved, show endpuzzletwo scene
if (puzzle.isSolved) {
// Remove the puzzle and green tick from the game
if (puzzle.parent) puzzle.parent.removeChild(puzzle);
if (greenTick.parent) greenTick.parent.removeChild(greenTick);
// Hide info button when showing endpuzzletwo
setInfoButtonVisible(false);
// Show endpuzzletwo asset centered on screen
var endpuzzletwo = LK.getAsset('Endpuzzletwo', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2,
scaleX: 2.2,
scaleY: 2.2,
alpha: 0
});
game.addChild(endpuzzletwo);
// Fade in endpuzzletwo
tween(endpuzzletwo, {
alpha: 1
}, {
duration: 350,
easing: tween.cubicOut
});
// After 2 seconds, fade out and swap to correct scene with correct word under the correct image
LK.setTimeout(function () {
tween(endpuzzletwo, {
alpha: 0
}, {
duration: 350,
easing: tween.cubicIn,
onFinish: function onFinish() {
if (endpuzzletwo.parent) endpuzzletwo.parent.removeChild(endpuzzletwo);
// Show Correct scene (centered)
var correctScene = LK.getAsset('Correct', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2,
scaleX: 2.2,
scaleY: 2.2,
alpha: 0
});
game.addChild(correctScene);
// Fade in correctScene
tween(correctScene, {
alpha: 1
}, {
duration: 350,
easing: tween.cubicOut
});
// No winning image displayed - just show the correct word
// Show the correct word asset at the bottom of the screen
var correctWord = LK.getAsset('Correctword', {
anchorX: 0.5,
anchorY: 1.0,
x: 2048 / 2,
y: 2732 - 50,
scaleX: 2.2,
scaleY: 2.2,
alpha: 0
});
game.addChild(correctWord);
tween(correctWord, {
alpha: 1
}, {
duration: 350,
easing: tween.cubicOut
});
}
});
}, 2000);
} else {
// If not solved, show endgame1 scene
if (puzzle.parent) puzzle.parent.removeChild(puzzle);
if (greenTick.parent) greenTick.parent.removeChild(greenTick);
// Hide info button when showing endgame1
setInfoButtonVisible(false);
// Show endgame1 asset centered on screen
var endgame1 = LK.getAsset('Endpuzzleone', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2,
scaleX: 2.2,
scaleY: 2.2,
alpha: 0
});
game.addChild(endgame1);
tween(endgame1, {
alpha: 1
}, {
duration: 350,
easing: tween.cubicOut
});
// After 2 seconds, fade out and swap to incorrect scene with incorrect word under the incorrect image
LK.setTimeout(function () {
tween(endgame1, {
alpha: 0
}, {
duration: 350,
easing: tween.cubicIn,
onFinish: function onFinish() {
if (endgame1.parent) endgame1.parent.removeChild(endgame1);
// Show Incorrect scene (centered)
var incorrectScene = LK.getAsset('Incorrect', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2,
scaleX: 2.2,
scaleY: 2.2,
alpha: 0
});
game.addChild(incorrectScene);
tween(incorrectScene, {
alpha: 1
}, {
duration: 350,
easing: tween.cubicOut
});
// Find the first incorrect dot and its expected word
var targetSolution = {
0: 'Drum',
1: 'Harp',
2: 'Saxophone',
3: 'Flute',
4: 'Gutair',
5: 'Spaghetti',
6: 'Donut',
7: 'Chips',
8: 'Icecream',
9: 'Pizza',
10: 'Basketball',
11: 'Dolls',
12: 'Lego',
13: 'Videogame',
14: 'Plushtoy',
15: 'Fish',
16: 'Turtle',
17: 'Frog',
18: 'Cat',
19: 'Dog',
20: 'KJ',
21: 'Khalida',
22: 'Sapphire',
23: 'Harmony',
24: 'PJ'
};
var firstWrongIdx = -1;
var wrongActual = '';
var wrongExpected = '';
for (var i = 0; i < puzzle.dots.length; i++) {
var dot = puzzle.dots[i];
var expected = targetSolution[i];
var actual = 'Blank';
var row = dot.gridY;
// Get current image based on row and index
if (row === 0 && dot.instruments) {
actual = dot.instruments[dot.instrumentIndex];
} else if (row === 1 && dot.foodImages) {
actual = dot.foodImages[dot.foodIndex];
} else if (row === 2 && dot.toyImages) {
actual = dot.toyImages[dot.toyIndex];
} else if (row === 3 && dot.animalImages) {
actual = dot.animalImages[dot.animalIndex];
} else if (row === 4 && dot.specialInstruments) {
actual = dot.specialInstruments[dot.specialInstrumentIndex];
}
if (actual !== expected) {
firstWrongIdx = i;
wrongActual = actual;
wrongExpected = expected;
break;
}
}
// If found, show the incorrect image and word under it
if (firstWrongIdx !== -1) {
var wrongImg = null;
var imgY = 2732 / 2 + 100;
var wordY = imgY;
// Only show the image if it's not 'Blank'
if (wrongActual !== 'Blank') {
wrongImg = LK.getAsset(wrongActual, {
anchorX: 0.5,
anchorY: 1.0,
x: 2048 / 2,
y: imgY,
alpha: 0
});
game.addChild(wrongImg);
tween(wrongImg, {
alpha: 1
}, {
duration: 350,
easing: tween.cubicOut
});
wordY = 2732 / 2 + 120 + (wrongImg.height || 100); // 20px below image
} else {
// If blank, just show the word lower down
wordY = 2732 / 2 + 120;
}
// Show the incorrect word asset at the bottom of the screen
var incorrectWord = LK.getAsset('Incorrectword', {
anchorX: 0.5,
anchorY: 1.0,
x: 2048 / 2,
y: 2732 - 50,
// 50px padding from bottom
scaleX: 2.2,
scaleY: 2.2,
alpha: 0
});
game.addChild(incorrectWord);
tween(incorrectWord, {
alpha: 1
}, {
duration: 350,
easing: tween.cubicOut
});
// Add retry button below the incorrect image/word
var retryBtnY = 2732 - 50 - incorrectWord.height * 2.2 - 40; // 40px above incorrect word
var retryBtn = LK.getAsset('Retry', {
anchorX: 0.5,
anchorY: 1.0,
x: 2048 / 2,
y: retryBtnY,
scaleX: 1.8,
scaleY: 1.8,
alpha: 0
});
game.addChild(retryBtn);
tween(retryBtn, {
alpha: 1
}, {
duration: 350,
easing: tween.cubicOut
});
// Retry button handler: remove incorrect scene and restart puzzle
retryBtn.down = function (x, y, obj) {
// Fade out all incorrect scene assets, then remove and reset
var fadeOuts = [incorrectScene, wrongImg, incorrectWord, retryBtn];
var fadeCount = 0;
var fadeDone = function fadeDone() {
fadeCount++;
if (fadeCount === fadeOuts.length) {
// Remove all incorrect scene assets
if (incorrectScene && incorrectScene.parent) incorrectScene.parent.removeChild(incorrectScene);
if (wrongImg && wrongImg.parent) wrongImg.parent.removeChild(wrongImg);
if (incorrectWord && incorrectWord.parent) incorrectWord.parent.removeChild(incorrectWord);
if (retryBtn && retryBtn.parent) retryBtn.parent.removeChild(retryBtn);
// Reset all used image trackers so dots can be reused
usedInstruments = {};
usedSpecialInstruments = {};
usedAnimalImages = {};
usedFoodImages = {};
usedToyImages = {};
// Re-add puzzle and green tick
puzzle = new Puzzle();
game.addChild(puzzle);
game.addChild(greenTick);
// Re-add number image assets to the top of the screen
numberImages = [];
for (var i = 1; i <= 5; i++) {
var numImg = LK.getAsset(i + "", {
anchorX: 0.5,
anchorY: 0,
x: i * (2048 / 6),
y: 60,
scaleX: 0.7,
scaleY: 0.7
});
game.addChild(numImg);
numberImages.push(numImg);
}
// Restore all clue assets when retry is clicked
if (typeof allClueAssets !== "undefined" && allClueAssets.length) {
for (var i = 0; i < allClueAssets.length; i++) {
if (allClueAssets[i] && !allClueAssets[i].parent) {
game.addChild(allClueAssets[i]);
}
}
// Remove all strikethrough from clues when retry is clicked
for (var i = 0; i < allClueAssets.length; i++) {
if (allClueAssets[i]) allClueAssets[i].alpha = 1.0;
}
// Reset strikethrough state for all clues
for (var i = 0; i < clueStrikeStates.length; i++) {
clueStrikeStates[i] = false;
}
}
// Re-add info button after story asset
if (infoButton && infoButton.parent) {
infoButton.parent.removeChild(infoButton);
}
// Find the story asset in the puzzle and add infoButton after it
var storyAssetIdx = -1;
for (var i = 0; i < puzzle.children.length; i++) {
var child = puzzle.children[i];
if (child && child.assetId === 'Story') {
storyAssetIdx = i;
break;
}
}
if (storyAssetIdx !== -1) {
// Insert infoButton after story asset
if (puzzle.children.length > storyAssetIdx + 1) {
puzzle.addChildAt(infoButton, storyAssetIdx + 1);
} else {
puzzle.addChild(infoButton);
}
} else {
// Fallback: add to puzzle if not found
puzzle.addChild(infoButton);
}
// Show info button again after retry
setInfoButtonVisible(true);
}
};
for (var i = 0; i < fadeOuts.length; i++) {
if (fadeOuts[i]) {
tween(fadeOuts[i], {
alpha: 0
}, {
duration: 250,
easing: tween.cubicIn,
onFinish: fadeDone
});
} else {
fadeDone();
}
}
};
}
}
});
}, 2000);
}
}
};
// Update global references that might be needed
window.puzzle = puzzle;
window.greenTick = greenTick;
window.numberImages = numberImages;
window.allClueAssets = allClueAssets;
window.infoButton = infoButton;
}
// Initialize the game with title screen
var titleScreen = new TitleScreen();
game.addChild(titleScreen);
Add more vibrant colours to picture
Make this scene more modern like in the present
A 4x5 grid in professor Layton game style. In-Game asset. 2d. High contrast. No shadows
Remove man
Saxophone in professor Layton game style. In-Game asset. 2d. High contrast. No shadows
Harp in professor Layton game style. In-Game asset. 2d. High contrast. No shadows
Drum in professor Layton game style. In-Game asset. 2d. High contrast. No shadows
Flute in professor Layton game style. In-Game asset. 2d. High contrast. No shadows
Question mark professor Layton game style. In-Game asset. 2d. High contrast. No shadows
12yo blonde girl in professor Layton game style. In-Game asset. 2d. High contrast. No shadows
Cute little10yo girl brown hair in professor Layton game style. In-Game asset. 2d. High contrast. No shadows
Cute little 7yo girl with blonde curly hair. Professor Layton game style In-Game asset. 2d. High contrast. No shadows
15 yo boy with short scruffy blonde hair professor Layton game style. In-Game asset. 2d. High contrast. No shadows
18yo girl with short brown hair professor Layton game style. In-Game asset. 2d. High contrast. No shadows
Cat in professor Layton game style. In-Game asset. 2d. High contrast. No shadows
White dog with brown patch on eyes professor Layton game style. In-Game asset. 2d. High contrast. No shadows
Turtle in professor Layton game style. In-Game asset. 2d. High contrast. No shadows
Frog in professor Layton game style. In-Game asset. 2d. High contrast. No shadows
Goldfish in professor Layton game style. In-Game asset. 2d. High contrast. No shadows
Basketball ball professor Layton game style. In-Game asset. 2d. High contrast. No shadows
Lego bricks professor Layton game style. In-Game asset. 2d. High contrast. No shadows
Video game console professor Layton game style. In-Game asset. 2d. High contrast. No shadows
Teddy bear professor Layton game style. In-Game asset. 2d. High contrast. No shadows
These dolls in professor Layton game art style
Hot chips or fries in professor Layton game style artwork. In-Game asset. 2d. High contrast. No shadows
Bowl of spaghetti in professor Layton game style artwork. In-Game asset. 2d. High contrast. No shadows
Pizza in professor Layton game style artwork. In-Game asset. 2d. High contrast. No shadows
Chocolate donut in professor Layton game style artwork. In-Game asset. 2d. High contrast. No shadows
Ice cream cone in professor Layton game style artwork. In-Game asset. 2d. High contrast. No shadows
Make her crack a small smile
The word "correct" in professor Layton game style. In-Game asset. 2d. High contrast. No shadows
The word " incorrect" in professor Layton game style. In-Game asset. 2d. High contrast. No shadows
Green tick in professor Layton gamestyle. In-Game asset. 2d. High contrast. No shadows
Button with RETRY PUZZLE on it in professor Layton game style artwork In-Game asset. 2d. High contrast. No shadows
Information symbol in professor Layton game style artwork. In-Game asset. 2d. High contrast. No shadows
Number 1 button professor Layton game style artwork. In-Game asset. 2d. High contrast. No shadows
Number 2
Number 3
Number 4
Number 5
Remove clock
Make sure J and Y is not cut off
How to play button in professor Layton game style font. In-Game asset. 2d. High contrast. No shadows
Make robe hang lower so you can't see it's feet
Make it say play new puzzle
A 16:9 title banner