Code edit (1 edits merged)
Please save this source code
User prompt
Powerpuff Girls Dress Up Adventure
Initial prompt
Powerpuff girls: dress up. Tap on level 1 baker, or level 2 maid, or level 3 partier, or level 4 Santa, or level 5 worker to start. Drag the clothes onto 3 powerpuff girls, tap on their tummies to make them talk to make the text go poof.
/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ var ClothingItem = Container.expand(function (assetId, offsetX, offsetY) { var self = Container.call(this); self.assetId = assetId; self.offsetX = offsetX || 0; self.offsetY = offsetY || 0; self.isBeingDragged = false; self.originalX = 0; self.originalY = 0; self.targetGirl = null; var graphic = self.attachAsset(assetId, { anchorX: 0.5, anchorY: 0.5 }); self.down = function (x, y, obj) { self.isBeingDragged = true; self.originalX = self.x; self.originalY = self.y; // Bring to front if (self.parent) { self.parent.removeChild(self); self.parent.addChild(self); } }; self.setOriginalPosition = function (x, y) { self.originalX = x; self.originalY = y; self.x = x; self.y = y; }; return self; }); var PowerpuffGirl = Container.expand(function (name, color, x, y) { var self = Container.call(this); self.name = name; self.girlColor = color; // Create base character var baseShape = self.attachAsset(name + '_base', { anchorX: 0.5, anchorY: 0.5 }); // Position the girl self.x = x; self.y = y; // Storage for worn items self.wornItems = []; // Tummy tap area (invisible) self.tummyArea = { x: -50, y: 50, width: 100, height: 100 }; self.down = function (x, y, obj) { // Check if tap is in tummy area var localPos = self.toLocal({ x: x, y: y }); if (localPos.x >= self.tummyArea.x && localPos.x <= self.tummyArea.x + self.tummyArea.width && localPos.y >= self.tummyArea.y && localPos.y <= self.tummyArea.y + self.tummyArea.height) { self.speak(); } }; self.speak = function () { // Play voice sound LK.getSound(self.name + '_voice').play(); // Show text bubble var phrases = ["I look amazing!", "This outfit is perfect!", "I love this style!", "Super cute!", "Fashion forward!"]; var randomPhrase = phrases[Math.floor(Math.random() * phrases.length)]; self.showTextBubble(randomPhrase); }; self.showTextBubble = function (text) { var bubble = new Text2(text, { size: 40, fill: 0x000000 }); bubble.anchor.set(0.5, 0.5); bubble.x = 0; bubble.y = -250; bubble.alpha = 0; self.addChild(bubble); // Animate in tween(bubble, { alpha: 1, scaleX: 1.2, scaleY: 1.2 }, { duration: 300, easing: tween.easeOut }); // Animate out and remove LK.setTimeout(function () { tween(bubble, { alpha: 0, scaleX: 0.8, scaleY: 0.8, y: -300 }, { duration: 500, easing: tween.easeIn, onFinish: function onFinish() { bubble.destroy(); } }); }, 1500); }; self.addClothing = function (clothingItem) { self.wornItems.push(clothingItem); self.addChild(clothingItem); }; return self; }); var ThemeButton = Container.expand(function (assetId, themeName, x, y) { var self = Container.call(this); self.themeName = themeName; self.isSelected = false; var buttonShape = self.attachAsset(assetId, { anchorX: 0.5, anchorY: 0.5 }); var label = new Text2(themeName.toUpperCase(), { size: 30, fill: 0x000000 }); label.anchor.set(0.5, 0.5); self.addChild(label); self.x = x; self.y = y; self.down = function (x, y, obj) { currentTheme = self.themeName; updateSelectedTheme(); showThemeClothing(self.themeName); }; self.setSelected = function (selected) { self.isSelected = selected; if (selected) { buttonShape.alpha = 1.0; tween(self, { scaleX: 1.1, scaleY: 1.1 }, { duration: 200 }); } else { buttonShape.alpha = 0.7; tween(self, { scaleX: 1.0, scaleY: 1.0 }, { duration: 200 }); } }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x87ceeb }); /**** * Game Code ****/ // Sound effects // Worker outfit pieces // Santa outfit pieces // Party outfit pieces // Maid outfit pieces // Baker outfit pieces // Theme buttons // Character assets // Game state var currentTheme = 'baker'; var draggedItem = null; var girls = []; var themeButtons = []; var clothingItems = []; // Create the three Powerpuff Girls var blossom = game.addChild(new PowerpuffGirl('blossom', 0xffc0cb, 500, 1400)); var bubbles = game.addChild(new PowerpuffGirl('bubbles', 0x87ceeb, 1024, 1400)); var buttercup = game.addChild(new PowerpuffGirl('buttercup', 0x90ee90, 1548, 1400)); girls.push(blossom, bubbles, buttercup); // Create theme buttons var buttonY = 200; var buttonSpacing = 220; var startX = 324; var bakerBtn = game.addChild(new ThemeButton('baker_btn', 'baker', startX, buttonY)); var maidBtn = game.addChild(new ThemeButton('maid_btn', 'maid', startX + buttonSpacing, buttonY)); var partyBtn = game.addChild(new ThemeButton('party_btn', 'party', startX + buttonSpacing * 2, buttonY)); var santaBtn = game.addChild(new ThemeButton('santa_btn', 'santa', startX + buttonSpacing * 3, buttonY)); var workerBtn = game.addChild(new ThemeButton('worker_btn', 'worker', startX + buttonSpacing * 4, buttonY)); themeButtons.push(bakerBtn, maidBtn, partyBtn, santaBtn, workerBtn); // Theme clothing definitions var themeClothing = { 'baker': [{ asset: 'baker_hat', x: 200, y: 500, offsetX: 0, offsetY: -150 }, { asset: 'baker_apron', x: 400, y: 500, offsetX: 0, offsetY: 50 }, { asset: 'baker_shirt', x: 600, y: 500, offsetX: 0, offsetY: 0 }], 'maid': [{ asset: 'maid_headband', x: 200, y: 500, offsetX: 0, offsetY: -120 }, { asset: 'maid_dress', x: 400, y: 500, offsetX: 0, offsetY: 50 }, { asset: 'maid_collar', x: 600, y: 500, offsetX: 0, offsetY: -50 }], 'party': [{ asset: 'party_crown', x: 200, y: 500, offsetX: 0, offsetY: -140 }, { asset: 'party_dress', x: 400, y: 500, offsetX: 0, offsetY: 60 }, { asset: 'party_necklace', x: 600, y: 500, offsetX: 0, offsetY: -40 }], 'santa': [{ asset: 'santa_hat', x: 200, y: 500, offsetX: 0, offsetY: -130 }, { asset: 'santa_coat', x: 400, y: 500, offsetX: 0, offsetY: 50 }, { asset: 'santa_belt', x: 600, y: 500, offsetX: 0, offsetY: 30 }], 'worker': [{ asset: 'worker_helmet', x: 200, y: 500, offsetX: 0, offsetY: -140 }, { asset: 'worker_vest', x: 400, y: 500, offsetX: 0, offsetY: 20 }, { asset: 'worker_tools', x: 600, y: 500, offsetX: 60, offsetY: 80 }] }; function updateSelectedTheme() { for (var i = 0; i < themeButtons.length; i++) { themeButtons[i].setSelected(themeButtons[i].themeName === currentTheme); } } function clearClothingItems() { for (var i = clothingItems.length - 1; i >= 0; i--) { clothingItems[i].destroy(); } clothingItems = []; } function showThemeClothing(theme) { clearClothingItems(); var items = themeClothing[theme]; if (!items) return; for (var i = 0; i < items.length; i++) { var itemData = items[i]; var clothingItem = game.addChild(new ClothingItem(itemData.asset, itemData.offsetX, itemData.offsetY)); clothingItem.setOriginalPosition(itemData.x, itemData.y); clothingItems.push(clothingItem); } } function handleMove(x, y, obj) { if (draggedItem) { draggedItem.x = x; draggedItem.y = y; } } function findNearestGirl(item) { var closestGirl = null; var closestDistance = Infinity; for (var i = 0; i < girls.length; i++) { var girl = girls[i]; var dx = item.x - girl.x; var dy = item.y - girl.y; var distance = Math.sqrt(dx * dx + dy * dy); if (distance < closestDistance && distance < 200) { closestDistance = distance; closestGirl = girl; } } return closestGirl; } // Game event handlers game.move = handleMove; game.down = function (x, y, obj) { // Check if clicking on a clothing item for (var i = 0; i < clothingItems.length; i++) { var item = clothingItems[i]; if (item.intersects({ x: x, y: y, width: 1, height: 1 })) { if (item.isBeingDragged) { draggedItem = item; handleMove(x, y, obj); break; } } } }; game.up = function (x, y, obj) { if (draggedItem) { var nearestGirl = findNearestGirl(draggedItem); if (nearestGirl) { // Snap to girl and play sound LK.getSound('dress_up').play(); // Position relative to girl var newClothing = game.addChild(new ClothingItem(draggedItem.assetId, draggedItem.offsetX, draggedItem.offsetY)); newClothing.x = nearestGirl.x + draggedItem.offsetX; newClothing.y = nearestGirl.y + draggedItem.offsetY; // Add to girl's worn items nearestGirl.addClothing(newClothing); // Reset original item position draggedItem.x = draggedItem.originalX; draggedItem.y = draggedItem.originalY; } else { // Return to original position tween(draggedItem, { x: draggedItem.originalX, y: draggedItem.originalY }, { duration: 300, easing: tween.easeOut }); } draggedItem = null; } }; // Initialize with baker theme updateSelectedTheme(); showThemeClothing(currentTheme); // Add title var titleText = new Text2('POWERPUFF GIRLS DRESS UP', { size: 80, fill: 0xFFFFFF }); titleText.anchor.set(0.5, 0.5); titleText.x = 1024; titleText.y = 100; game.addChild(titleText); // Add instructions var instructionText = new Text2('Tap themes, drag clothes, tap tummies!', { size: 40, fill: 0xFFFFFF }); instructionText.anchor.set(0.5, 0.5); instructionText.x = 1024; instructionText.y = 320; game.addChild(instructionText);
===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,412 @@
-/****
+/****
+* Plugins
+****/
+var tween = LK.import("@upit/tween.v1");
+
+/****
+* Classes
+****/
+var ClothingItem = Container.expand(function (assetId, offsetX, offsetY) {
+ var self = Container.call(this);
+ self.assetId = assetId;
+ self.offsetX = offsetX || 0;
+ self.offsetY = offsetY || 0;
+ self.isBeingDragged = false;
+ self.originalX = 0;
+ self.originalY = 0;
+ self.targetGirl = null;
+ var graphic = self.attachAsset(assetId, {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ self.down = function (x, y, obj) {
+ self.isBeingDragged = true;
+ self.originalX = self.x;
+ self.originalY = self.y;
+ // Bring to front
+ if (self.parent) {
+ self.parent.removeChild(self);
+ self.parent.addChild(self);
+ }
+ };
+ self.setOriginalPosition = function (x, y) {
+ self.originalX = x;
+ self.originalY = y;
+ self.x = x;
+ self.y = y;
+ };
+ return self;
+});
+var PowerpuffGirl = Container.expand(function (name, color, x, y) {
+ var self = Container.call(this);
+ self.name = name;
+ self.girlColor = color;
+ // Create base character
+ var baseShape = self.attachAsset(name + '_base', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ // Position the girl
+ self.x = x;
+ self.y = y;
+ // Storage for worn items
+ self.wornItems = [];
+ // Tummy tap area (invisible)
+ self.tummyArea = {
+ x: -50,
+ y: 50,
+ width: 100,
+ height: 100
+ };
+ self.down = function (x, y, obj) {
+ // Check if tap is in tummy area
+ var localPos = self.toLocal({
+ x: x,
+ y: y
+ });
+ if (localPos.x >= self.tummyArea.x && localPos.x <= self.tummyArea.x + self.tummyArea.width && localPos.y >= self.tummyArea.y && localPos.y <= self.tummyArea.y + self.tummyArea.height) {
+ self.speak();
+ }
+ };
+ self.speak = function () {
+ // Play voice sound
+ LK.getSound(self.name + '_voice').play();
+ // Show text bubble
+ var phrases = ["I look amazing!", "This outfit is perfect!", "I love this style!", "Super cute!", "Fashion forward!"];
+ var randomPhrase = phrases[Math.floor(Math.random() * phrases.length)];
+ self.showTextBubble(randomPhrase);
+ };
+ self.showTextBubble = function (text) {
+ var bubble = new Text2(text, {
+ size: 40,
+ fill: 0x000000
+ });
+ bubble.anchor.set(0.5, 0.5);
+ bubble.x = 0;
+ bubble.y = -250;
+ bubble.alpha = 0;
+ self.addChild(bubble);
+ // Animate in
+ tween(bubble, {
+ alpha: 1,
+ scaleX: 1.2,
+ scaleY: 1.2
+ }, {
+ duration: 300,
+ easing: tween.easeOut
+ });
+ // Animate out and remove
+ LK.setTimeout(function () {
+ tween(bubble, {
+ alpha: 0,
+ scaleX: 0.8,
+ scaleY: 0.8,
+ y: -300
+ }, {
+ duration: 500,
+ easing: tween.easeIn,
+ onFinish: function onFinish() {
+ bubble.destroy();
+ }
+ });
+ }, 1500);
+ };
+ self.addClothing = function (clothingItem) {
+ self.wornItems.push(clothingItem);
+ self.addChild(clothingItem);
+ };
+ return self;
+});
+var ThemeButton = Container.expand(function (assetId, themeName, x, y) {
+ var self = Container.call(this);
+ self.themeName = themeName;
+ self.isSelected = false;
+ var buttonShape = self.attachAsset(assetId, {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ var label = new Text2(themeName.toUpperCase(), {
+ size: 30,
+ fill: 0x000000
+ });
+ label.anchor.set(0.5, 0.5);
+ self.addChild(label);
+ self.x = x;
+ self.y = y;
+ self.down = function (x, y, obj) {
+ currentTheme = self.themeName;
+ updateSelectedTheme();
+ showThemeClothing(self.themeName);
+ };
+ self.setSelected = function (selected) {
+ self.isSelected = selected;
+ if (selected) {
+ buttonShape.alpha = 1.0;
+ tween(self, {
+ scaleX: 1.1,
+ scaleY: 1.1
+ }, {
+ duration: 200
+ });
+ } else {
+ buttonShape.alpha = 0.7;
+ tween(self, {
+ scaleX: 1.0,
+ scaleY: 1.0
+ }, {
+ duration: 200
+ });
+ }
+ };
+ return self;
+});
+
+/****
* Initialize Game
-****/
+****/
var game = new LK.Game({
- backgroundColor: 0x000000
-});
\ No newline at end of file
+ backgroundColor: 0x87ceeb
+});
+
+/****
+* Game Code
+****/
+// Sound effects
+// Worker outfit pieces
+// Santa outfit pieces
+// Party outfit pieces
+// Maid outfit pieces
+// Baker outfit pieces
+// Theme buttons
+// Character assets
+// Game state
+var currentTheme = 'baker';
+var draggedItem = null;
+var girls = [];
+var themeButtons = [];
+var clothingItems = [];
+// Create the three Powerpuff Girls
+var blossom = game.addChild(new PowerpuffGirl('blossom', 0xffc0cb, 500, 1400));
+var bubbles = game.addChild(new PowerpuffGirl('bubbles', 0x87ceeb, 1024, 1400));
+var buttercup = game.addChild(new PowerpuffGirl('buttercup', 0x90ee90, 1548, 1400));
+girls.push(blossom, bubbles, buttercup);
+// Create theme buttons
+var buttonY = 200;
+var buttonSpacing = 220;
+var startX = 324;
+var bakerBtn = game.addChild(new ThemeButton('baker_btn', 'baker', startX, buttonY));
+var maidBtn = game.addChild(new ThemeButton('maid_btn', 'maid', startX + buttonSpacing, buttonY));
+var partyBtn = game.addChild(new ThemeButton('party_btn', 'party', startX + buttonSpacing * 2, buttonY));
+var santaBtn = game.addChild(new ThemeButton('santa_btn', 'santa', startX + buttonSpacing * 3, buttonY));
+var workerBtn = game.addChild(new ThemeButton('worker_btn', 'worker', startX + buttonSpacing * 4, buttonY));
+themeButtons.push(bakerBtn, maidBtn, partyBtn, santaBtn, workerBtn);
+// Theme clothing definitions
+var themeClothing = {
+ 'baker': [{
+ asset: 'baker_hat',
+ x: 200,
+ y: 500,
+ offsetX: 0,
+ offsetY: -150
+ }, {
+ asset: 'baker_apron',
+ x: 400,
+ y: 500,
+ offsetX: 0,
+ offsetY: 50
+ }, {
+ asset: 'baker_shirt',
+ x: 600,
+ y: 500,
+ offsetX: 0,
+ offsetY: 0
+ }],
+ 'maid': [{
+ asset: 'maid_headband',
+ x: 200,
+ y: 500,
+ offsetX: 0,
+ offsetY: -120
+ }, {
+ asset: 'maid_dress',
+ x: 400,
+ y: 500,
+ offsetX: 0,
+ offsetY: 50
+ }, {
+ asset: 'maid_collar',
+ x: 600,
+ y: 500,
+ offsetX: 0,
+ offsetY: -50
+ }],
+ 'party': [{
+ asset: 'party_crown',
+ x: 200,
+ y: 500,
+ offsetX: 0,
+ offsetY: -140
+ }, {
+ asset: 'party_dress',
+ x: 400,
+ y: 500,
+ offsetX: 0,
+ offsetY: 60
+ }, {
+ asset: 'party_necklace',
+ x: 600,
+ y: 500,
+ offsetX: 0,
+ offsetY: -40
+ }],
+ 'santa': [{
+ asset: 'santa_hat',
+ x: 200,
+ y: 500,
+ offsetX: 0,
+ offsetY: -130
+ }, {
+ asset: 'santa_coat',
+ x: 400,
+ y: 500,
+ offsetX: 0,
+ offsetY: 50
+ }, {
+ asset: 'santa_belt',
+ x: 600,
+ y: 500,
+ offsetX: 0,
+ offsetY: 30
+ }],
+ 'worker': [{
+ asset: 'worker_helmet',
+ x: 200,
+ y: 500,
+ offsetX: 0,
+ offsetY: -140
+ }, {
+ asset: 'worker_vest',
+ x: 400,
+ y: 500,
+ offsetX: 0,
+ offsetY: 20
+ }, {
+ asset: 'worker_tools',
+ x: 600,
+ y: 500,
+ offsetX: 60,
+ offsetY: 80
+ }]
+};
+function updateSelectedTheme() {
+ for (var i = 0; i < themeButtons.length; i++) {
+ themeButtons[i].setSelected(themeButtons[i].themeName === currentTheme);
+ }
+}
+function clearClothingItems() {
+ for (var i = clothingItems.length - 1; i >= 0; i--) {
+ clothingItems[i].destroy();
+ }
+ clothingItems = [];
+}
+function showThemeClothing(theme) {
+ clearClothingItems();
+ var items = themeClothing[theme];
+ if (!items) return;
+ for (var i = 0; i < items.length; i++) {
+ var itemData = items[i];
+ var clothingItem = game.addChild(new ClothingItem(itemData.asset, itemData.offsetX, itemData.offsetY));
+ clothingItem.setOriginalPosition(itemData.x, itemData.y);
+ clothingItems.push(clothingItem);
+ }
+}
+function handleMove(x, y, obj) {
+ if (draggedItem) {
+ draggedItem.x = x;
+ draggedItem.y = y;
+ }
+}
+function findNearestGirl(item) {
+ var closestGirl = null;
+ var closestDistance = Infinity;
+ for (var i = 0; i < girls.length; i++) {
+ var girl = girls[i];
+ var dx = item.x - girl.x;
+ var dy = item.y - girl.y;
+ var distance = Math.sqrt(dx * dx + dy * dy);
+ if (distance < closestDistance && distance < 200) {
+ closestDistance = distance;
+ closestGirl = girl;
+ }
+ }
+ return closestGirl;
+}
+// Game event handlers
+game.move = handleMove;
+game.down = function (x, y, obj) {
+ // Check if clicking on a clothing item
+ for (var i = 0; i < clothingItems.length; i++) {
+ var item = clothingItems[i];
+ if (item.intersects({
+ x: x,
+ y: y,
+ width: 1,
+ height: 1
+ })) {
+ if (item.isBeingDragged) {
+ draggedItem = item;
+ handleMove(x, y, obj);
+ break;
+ }
+ }
+ }
+};
+game.up = function (x, y, obj) {
+ if (draggedItem) {
+ var nearestGirl = findNearestGirl(draggedItem);
+ if (nearestGirl) {
+ // Snap to girl and play sound
+ LK.getSound('dress_up').play();
+ // Position relative to girl
+ var newClothing = game.addChild(new ClothingItem(draggedItem.assetId, draggedItem.offsetX, draggedItem.offsetY));
+ newClothing.x = nearestGirl.x + draggedItem.offsetX;
+ newClothing.y = nearestGirl.y + draggedItem.offsetY;
+ // Add to girl's worn items
+ nearestGirl.addClothing(newClothing);
+ // Reset original item position
+ draggedItem.x = draggedItem.originalX;
+ draggedItem.y = draggedItem.originalY;
+ } else {
+ // Return to original position
+ tween(draggedItem, {
+ x: draggedItem.originalX,
+ y: draggedItem.originalY
+ }, {
+ duration: 300,
+ easing: tween.easeOut
+ });
+ }
+ draggedItem = null;
+ }
+};
+// Initialize with baker theme
+updateSelectedTheme();
+showThemeClothing(currentTheme);
+// Add title
+var titleText = new Text2('POWERPUFF GIRLS DRESS UP', {
+ size: 80,
+ fill: 0xFFFFFF
+});
+titleText.anchor.set(0.5, 0.5);
+titleText.x = 1024;
+titleText.y = 100;
+game.addChild(titleText);
+// Add instructions
+var instructionText = new Text2('Tap themes, drag clothes, tap tummies!', {
+ size: 40,
+ fill: 0xFFFFFF
+});
+instructionText.anchor.set(0.5, 0.5);
+instructionText.x = 1024;
+instructionText.y = 320;
+game.addChild(instructionText);
\ No newline at end of file