Code edit (1 edits merged)
Please save this source code
User prompt
Color Scratch Adventure
Initial prompt
Toca colors (2002). The powerpuff girls have a book 📕. Tap to scratch the page of the text inside says “yellow,” “blue,” “red,” “green,” “purple,” “orange,” “white,” and “black.” Yellow like wellies, blue like sky, red like apples, green like dino, purple like grapes, orange like pumpkin, white like snow like Elsa, and black like spiders.
/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ var ColorPage = Container.expand(function () { var self = Container.call(this); self.colorData = null; self.backgroundImage = null; self.colorText = null; self.scratchOverlay = null; self.isCompleted = false; self.setupPage = function (colorInfo) { self.colorData = colorInfo; // Create background image self.backgroundImage = self.addChild(LK.getAsset(colorInfo.assetId, { anchorX: 0.5, anchorY: 0.5 })); self.backgroundImage.x = 1024; self.backgroundImage.y = 1366; // Create color text self.colorText = new Text2(colorInfo.text, { size: 120, fill: 0xFFFFFF }); self.colorText.anchor.set(0.5, 0.5); self.colorText.x = 1024; self.colorText.y = 200; self.addChild(self.colorText); // Create scratch overlay self.scratchOverlay = self.addChild(new ScratchOverlay()); self.scratchOverlay.x = 124; self.scratchOverlay.y = 666; self.scratchOverlay.createOverlayGrid(); self.isCompleted = false; }; self.handleScratch = function (x, y) { if (self.isCompleted) return false; var localX = x - self.scratchOverlay.x; var localY = y - self.scratchOverlay.y; var removedCount = self.scratchOverlay.scratchAt(localX, localY); if (removedCount > 0) { LK.getSound('scratch').play(); var revealedPercentage = self.scratchOverlay.getRevealedPercentage(); if (revealedPercentage >= 0.6) { self.completePage(); return true; } } return false; }; self.completePage = function () { self.isCompleted = true; // Remove remaining overlay pieces with animation for (var i = 0; i < self.scratchOverlay.overlayPieces.length; i++) { var piece = self.scratchOverlay.overlayPieces[i]; if (piece.isVisible) { tween(piece, { alpha: 0 }, { duration: 300, easing: tween.easeOut }); } } }; self.resetPage = function () { self.scratchOverlay.resetOverlay(); self.isCompleted = false; }; return self; }); var ScratchOverlay = Container.expand(function () { var self = Container.call(this); // Array to store all gray overlay pieces self.overlayPieces = []; // Create a grid of gray overlay pieces self.createOverlayGrid = function () { var pieceSize = 150; var rows = Math.ceil(1400 / pieceSize); var cols = Math.ceil(1800 / pieceSize); for (var row = 0; row < rows; row++) { for (var col = 0; col < cols; col++) { var overlay = self.addChild(LK.getAsset('grayOverlay', { anchorX: 0.5, anchorY: 0.5, scaleX: 1, scaleY: 1 })); overlay.x = col * pieceSize + pieceSize / 2; overlay.y = row * pieceSize + pieceSize / 2; overlay.isVisible = true; self.overlayPieces.push(overlay); } } }; // Remove overlay pieces in a circular area around the tap self.scratchAt = function (x, y) { var scratchRadius = 120; var removedCount = 0; for (var i = 0; i < self.overlayPieces.length; i++) { var piece = self.overlayPieces[i]; if (piece.isVisible) { var distance = Math.sqrt(Math.pow(piece.x - x, 2) + Math.pow(piece.y - y, 2)); if (distance <= scratchRadius) { piece.alpha = 0; piece.isVisible = false; removedCount++; } } } return removedCount; }; // Check if enough area has been revealed self.getRevealedPercentage = function () { var totalPieces = self.overlayPieces.length; var hiddenPieces = 0; for (var i = 0; i < self.overlayPieces.length; i++) { if (self.overlayPieces[i].isVisible) { hiddenPieces++; } } return (totalPieces - hiddenPieces) / totalPieces; }; // Reset overlay for next page self.resetOverlay = function () { for (var i = 0; i < self.overlayPieces.length; i++) { self.overlayPieces[i].alpha = 1; self.overlayPieces[i].isVisible = true; } }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x2C3E50 }); /**** * Game Code ****/ // Scratch sound effect // Colorful background images for each color theme // Gray overlay shape for scratch-off effect // Color themes data var colorThemes = [{ text: "YELLOW", assetId: "yellowWellies" }, { text: "BLUE", assetId: "blueSky" }, { text: "RED", assetId: "redApples" }, { text: "GREEN", assetId: "greenDinosaur" }, { text: "PURPLE", assetId: "purpleGrapes" }, { text: "ORANGE", assetId: "orangePumpkin" }, { text: "WHITE", assetId: "whiteSnow" }, { text: "BLACK", assetId: "blackSpiders" }]; var currentPageIndex = 0; var currentPage = null; var completionDelay = 0; var isTransitioning = false; // Initialize first page function setupNewPage() { if (currentPage) { game.removeChild(currentPage); } currentPage = game.addChild(new ColorPage()); currentPage.setupPage(colorThemes[currentPageIndex]); isTransitioning = false; completionDelay = 0; } // Handle tap events game.down = function (x, y, obj) { if (isTransitioning) return; if (currentPage && !currentPage.isCompleted) { var pageCompleted = currentPage.handleScratch(x, y); if (pageCompleted) { completionDelay = 120; // 2 seconds at 60fps isTransitioning = true; } } }; // Start with first page setupNewPage(); // Main game loop game.update = function () { if (completionDelay > 0) { completionDelay--; if (completionDelay <= 0) { // Move to next page currentPageIndex = (currentPageIndex + 1) % colorThemes.length; setupNewPage(); } } };
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var ColorPage = Container.expand(function () {
var self = Container.call(this);
self.colorData = null;
self.backgroundImage = null;
self.colorText = null;
self.scratchOverlay = null;
self.isCompleted = false;
self.setupPage = function (colorInfo) {
self.colorData = colorInfo;
// Create background image
self.backgroundImage = self.addChild(LK.getAsset(colorInfo.assetId, {
anchorX: 0.5,
anchorY: 0.5
}));
self.backgroundImage.x = 1024;
self.backgroundImage.y = 1366;
// Create color text
self.colorText = new Text2(colorInfo.text, {
size: 120,
fill: 0xFFFFFF
});
self.colorText.anchor.set(0.5, 0.5);
self.colorText.x = 1024;
self.colorText.y = 200;
self.addChild(self.colorText);
// Create scratch overlay
self.scratchOverlay = self.addChild(new ScratchOverlay());
self.scratchOverlay.x = 124;
self.scratchOverlay.y = 666;
self.scratchOverlay.createOverlayGrid();
self.isCompleted = false;
};
self.handleScratch = function (x, y) {
if (self.isCompleted) return false;
var localX = x - self.scratchOverlay.x;
var localY = y - self.scratchOverlay.y;
var removedCount = self.scratchOverlay.scratchAt(localX, localY);
if (removedCount > 0) {
LK.getSound('scratch').play();
var revealedPercentage = self.scratchOverlay.getRevealedPercentage();
if (revealedPercentage >= 0.6) {
self.completePage();
return true;
}
}
return false;
};
self.completePage = function () {
self.isCompleted = true;
// Remove remaining overlay pieces with animation
for (var i = 0; i < self.scratchOverlay.overlayPieces.length; i++) {
var piece = self.scratchOverlay.overlayPieces[i];
if (piece.isVisible) {
tween(piece, {
alpha: 0
}, {
duration: 300,
easing: tween.easeOut
});
}
}
};
self.resetPage = function () {
self.scratchOverlay.resetOverlay();
self.isCompleted = false;
};
return self;
});
var ScratchOverlay = Container.expand(function () {
var self = Container.call(this);
// Array to store all gray overlay pieces
self.overlayPieces = [];
// Create a grid of gray overlay pieces
self.createOverlayGrid = function () {
var pieceSize = 150;
var rows = Math.ceil(1400 / pieceSize);
var cols = Math.ceil(1800 / pieceSize);
for (var row = 0; row < rows; row++) {
for (var col = 0; col < cols; col++) {
var overlay = self.addChild(LK.getAsset('grayOverlay', {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 1,
scaleY: 1
}));
overlay.x = col * pieceSize + pieceSize / 2;
overlay.y = row * pieceSize + pieceSize / 2;
overlay.isVisible = true;
self.overlayPieces.push(overlay);
}
}
};
// Remove overlay pieces in a circular area around the tap
self.scratchAt = function (x, y) {
var scratchRadius = 120;
var removedCount = 0;
for (var i = 0; i < self.overlayPieces.length; i++) {
var piece = self.overlayPieces[i];
if (piece.isVisible) {
var distance = Math.sqrt(Math.pow(piece.x - x, 2) + Math.pow(piece.y - y, 2));
if (distance <= scratchRadius) {
piece.alpha = 0;
piece.isVisible = false;
removedCount++;
}
}
}
return removedCount;
};
// Check if enough area has been revealed
self.getRevealedPercentage = function () {
var totalPieces = self.overlayPieces.length;
var hiddenPieces = 0;
for (var i = 0; i < self.overlayPieces.length; i++) {
if (self.overlayPieces[i].isVisible) {
hiddenPieces++;
}
}
return (totalPieces - hiddenPieces) / totalPieces;
};
// Reset overlay for next page
self.resetOverlay = function () {
for (var i = 0; i < self.overlayPieces.length; i++) {
self.overlayPieces[i].alpha = 1;
self.overlayPieces[i].isVisible = true;
}
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x2C3E50
});
/****
* Game Code
****/
// Scratch sound effect
// Colorful background images for each color theme
// Gray overlay shape for scratch-off effect
// Color themes data
var colorThemes = [{
text: "YELLOW",
assetId: "yellowWellies"
}, {
text: "BLUE",
assetId: "blueSky"
}, {
text: "RED",
assetId: "redApples"
}, {
text: "GREEN",
assetId: "greenDinosaur"
}, {
text: "PURPLE",
assetId: "purpleGrapes"
}, {
text: "ORANGE",
assetId: "orangePumpkin"
}, {
text: "WHITE",
assetId: "whiteSnow"
}, {
text: "BLACK",
assetId: "blackSpiders"
}];
var currentPageIndex = 0;
var currentPage = null;
var completionDelay = 0;
var isTransitioning = false;
// Initialize first page
function setupNewPage() {
if (currentPage) {
game.removeChild(currentPage);
}
currentPage = game.addChild(new ColorPage());
currentPage.setupPage(colorThemes[currentPageIndex]);
isTransitioning = false;
completionDelay = 0;
}
// Handle tap events
game.down = function (x, y, obj) {
if (isTransitioning) return;
if (currentPage && !currentPage.isCompleted) {
var pageCompleted = currentPage.handleScratch(x, y);
if (pageCompleted) {
completionDelay = 120; // 2 seconds at 60fps
isTransitioning = true;
}
}
};
// Start with first page
setupNewPage();
// Main game loop
game.update = function () {
if (completionDelay > 0) {
completionDelay--;
if (completionDelay <= 0) {
// Move to next page
currentPageIndex = (currentPageIndex + 1) % colorThemes.length;
setupNewPage();
}
}
};