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