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