Upit | Learn about creating the game Powerpuff Girls: Bing's Halloween Adventure with gen AI
Play
game-community-background
game-pic

0

0

22d

Playit
Welcome to Toca show
#PowerpuffGirls
#BingBunny
#Halloween
#InteractiveStory
#KidsGames

Creation History

Code edit (1 edits merged)

Please save this source code

User prompt

Powerpuff Girls: Bing's Halloween Adventure

Initial prompt

Toca show (2001). The powerpuff girls have a tv to watch. Tap on the green play or continue or again button to make the tv come to life or continue the story or watch a story again. It will be a story movie called “Bing bunny: Halloween Bing”. They be sula being lost with her torch lamp scene at scene 1, pando the ghost scene at scene 2, it’s only pando scene at scene 3, coco the vampire in the bushes scene at scene 4, it’s only coco scene at scene 5, Bing the witch scene at scene 6, Bing witch making a potion from the cauldron in the kitchen scene at scene 7, CANDY falling from the cauldron scene at scene 8 for end

/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");

/**** 
* Classes
****/ 
var Scene = Container.expand(function (sceneNumber) {
	var self = Container.call(this);
	self.sceneNumber = sceneNumber;
	self.isPlaying = false;
	self.createScene = function () {
		switch (self.sceneNumber) {
			case 1:
				self.createScene1();
				break;
			case 2:
				self.createScene2();
				break;
			case 3:
				self.createScene3();
				break;
			case 4:
				self.createScene4();
				break;
			case 5:
				self.createScene5();
				break;
			case 6:
				self.createScene6();
				break;
			case 7:
				self.createScene7();
				break;
			case 8:
				self.createScene8();
				break;
		}
	};
	self.createScene1 = function () {
		var sula = self.attachAsset('sula', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: 1024,
			y: 1600
		});
		var torch = self.attachAsset('torchLamp', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: 1100,
			y: 1450
		});
		self.playAnimation = function () {
			if (self.isPlaying) return;
			self.isPlaying = true;
			// Sula walking animation
			tween(sula, {
				x: 800,
				y: 1500
			}, {
				duration: 2000,
				easing: tween.easeInOut
			});
			tween(torch, {
				x: 880,
				y: 1350
			}, {
				duration: 2000,
				easing: tween.easeInOut
			});
			// Torch flickering
			var _flickerTorch = function flickerTorch() {
				tween(torch, {
					alpha: 0.5
				}, {
					duration: 300,
					onFinish: function onFinish() {
						tween(torch, {
							alpha: 1
						}, {
							duration: 300,
							onFinish: _flickerTorch
						});
					}
				});
			};
			_flickerTorch();
		};
	};
	self.createScene2 = function () {
		var pando = self.attachAsset('pando', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: 1024,
			y: 1600,
			alpha: 0.8
		});
		self.playAnimation = function () {
			if (self.isPlaying) return;
			self.isPlaying = true;
			// Ghost appearing animation
			tween(pando, {
				alpha: 0.3
			}, {
				duration: 1000,
				onFinish: function onFinish() {
					tween(pando, {
						alpha: 0.8
					}, {
						duration: 1000
					});
				}
			});
			// Floating motion
			var _floatUp = function floatUp() {
				tween(pando, {
					y: 1550
				}, {
					duration: 1500,
					easing: tween.easeInOut,
					onFinish: function onFinish() {
						tween(pando, {
							y: 1650
						}, {
							duration: 1500,
							easing: tween.easeInOut,
							onFinish: _floatUp
						});
					}
				});
			};
			_floatUp();
		};
	};
	self.createScene3 = function () {
		var pando = self.attachAsset('pando', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: 1024,
			y: 1400,
			alpha: 0.8,
			scaleX: 1.3,
			scaleY: 1.3
		});
		self.playAnimation = function () {
			if (self.isPlaying) return;
			self.isPlaying = true;
			// Ghost spotlight scene
			tween(pando, {
				scaleX: 1.5,
				scaleY: 1.5
			}, {
				duration: 1000,
				easing: tween.easeOut
			});
			tween(pando, {
				alpha: 0.5
			}, {
				duration: 800,
				onFinish: function onFinish() {
					tween(pando, {
						alpha: 0.9
					}, {
						duration: 800
					});
				}
			});
		};
	};
	self.createScene4 = function () {
		var bush = self.attachAsset('bush', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: 1024,
			y: 1700
		});
		var coco = self.attachAsset('coco', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: 1024,
			y: 1650,
			alpha: 0.3
		});
		self.playAnimation = function () {
			if (self.isPlaying) return;
			self.isPlaying = true;
			// Coco hiding and peeking
			tween(coco, {
				alpha: 0.8
			}, {
				duration: 1500,
				onFinish: function onFinish() {
					tween(coco, {
						alpha: 0.2
					}, {
						duration: 1000,
						onFinish: function onFinish() {
							tween(coco, {
								alpha: 0.8
							}, {
								duration: 1000
							});
						}
					});
				}
			});
		};
	};
	self.createScene5 = function () {
		var coco = self.attachAsset('coco', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: 1024,
			y: 1400,
			scaleX: 1.4,
			scaleY: 1.4
		});
		self.playAnimation = function () {
			if (self.isPlaying) return;
			self.isPlaying = true;
			// Vampire spotlight scene
			tween(coco, {
				scaleX: 1.6,
				scaleY: 1.6
			}, {
				duration: 1200,
				easing: tween.bounceOut
			});
			// Vampire cape flutter
			var _flutter = function flutter() {
				tween(coco, {
					scaleX: 1.7
				}, {
					duration: 400,
					onFinish: function onFinish() {
						tween(coco, {
							scaleX: 1.5
						}, {
							duration: 400,
							onFinish: _flutter
						});
					}
				});
			};
			_flutter();
		};
	};
	self.createScene6 = function () {
		var bing = self.attachAsset('bing', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: 1024,
			y: 1600
		});
		var hat = self.attachAsset('witchHat', {
			anchorX: 0.5,
			anchorY: 1,
			x: 1024,
			y: 1450
		});
		self.playAnimation = function () {
			if (self.isPlaying) return;
			self.isPlaying = true;
			// Bing the witch introduction
			tween(bing, {
				scaleX: 1.2,
				scaleY: 1.2
			}, {
				duration: 1000,
				easing: tween.bounceOut
			});
			tween(hat, {
				rotation: 0.2
			}, {
				duration: 800,
				onFinish: function onFinish() {
					tween(hat, {
						rotation: -0.2
					}, {
						duration: 800,
						onFinish: function onFinish() {
							tween(hat, {
								rotation: 0
							}, {
								duration: 400
							});
						}
					});
				}
			});
		};
	};
	self.createScene7 = function () {
		var cauldron = self.attachAsset('cauldron', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: 1024,
			y: 1700
		});
		var potion = self.attachAsset('potion', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: 1024,
			y: 1650,
			alpha: 0.7
		});
		var bing = self.attachAsset('bing', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: 1024,
			y: 1400,
			scaleX: 0.8,
			scaleY: 0.8
		});
		var hat = self.attachAsset('witchHat', {
			anchorX: 0.5,
			anchorY: 1,
			x: 1024,
			y: 1280
		});
		self.playAnimation = function () {
			if (self.isPlaying) return;
			self.isPlaying = true;
			// Brewing animation
			var _brew = function brew() {
				tween(potion, {
					alpha: 0.3
				}, {
					duration: 600,
					onFinish: function onFinish() {
						tween(potion, {
							alpha: 0.9
						}, {
							duration: 600,
							onFinish: _brew
						});
					}
				});
			};
			_brew();
			// Stirring motion
			tween(bing, {
				x: 1050
			}, {
				duration: 800,
				onFinish: function onFinish() {
					tween(bing, {
						x: 1024
					}, {
						duration: 800
					});
				}
			});
		};
	};
	self.createScene8 = function () {
		var cauldron = self.attachAsset('cauldron', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: 1024,
			y: 1700
		});
		self.candies = [];
		self.playAnimation = function () {
			if (self.isPlaying) return;
			self.isPlaying = true;
			LK.getSound('candyFall').play();
			// Create falling candy
			for (var i = 0; i < 20; i++) {
				var candy = self.attachAsset('candy', {
					anchorX: 0.5,
					anchorY: 0.5,
					x: 800 + Math.random() * 500,
					y: 800 + Math.random() * 200
				});
				self.candies.push(candy);
				// Animate candy falling
				tween(candy, {
					y: candy.y + 800 + Math.random() * 400
				}, {
					duration: 2000 + Math.random() * 1000,
					easing: tween.easeIn
				});
				// Rotate candy
				tween(candy, {
					rotation: Math.PI * 2
				}, {
					duration: 1000 + Math.random() * 500
				});
			}
		};
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x87ceeb
});

/**** 
* Game Code
****/ 
// Bing characters
// Character shapes
var currentScene = 0;
var scenes = [];
var isWatchingTV = true;
var showingStory = false;
// Create TV setup
var tvFrame = game.attachAsset('tvFrame', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 1024,
	y: 1200
});
var tvScreen = game.attachAsset('tvScreen', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 1024,
	y: 1200
});
// Create Powerpuff Girls watching TV
var girl1 = game.attachAsset('powerpuffGirl1', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 700,
	y: 2100
});
var girl2 = game.attachAsset('powerpuffGirl2', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 1024,
	y: 2150
});
var girl3 = game.attachAsset('powerpuffGirl3', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 1350,
	y: 2100
});
// Create play button
var playButton = game.attachAsset('playButton', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 1024,
	y: 1200
});
// Create continue and again buttons (initially hidden)
var continueButton = game.attachAsset('continueButton', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 900,
	y: 2400,
	alpha: 0
});
var againButton = game.attachAsset('againButton', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 1150,
	y: 2400,
	alpha: 0
});
// Button text
var playText = new Text2('▶', {
	size: 80,
	fill: 0xFFFFFF
});
playText.anchor.set(0.5, 0.5);
playText.x = 1024;
playText.y = 1200;
game.addChild(playText);
var continueText = new Text2('Continue', {
	size: 40,
	fill: 0xFFFFFF
});
continueText.anchor.set(0.5, 0.5);
continueText.x = 900;
continueText.y = 2400;
continueText.alpha = 0;
game.addChild(continueText);
var againText = new Text2('Again', {
	size: 40,
	fill: 0xFFFFFF
});
againText.anchor.set(0.5, 0.5);
againText.x = 1150;
againText.y = 2400;
againText.alpha = 0;
game.addChild(againText);
// Scene title
var sceneTitle = new Text2('', {
	size: 60,
	fill: 0xFFFFFF
});
sceneTitle.anchor.set(0.5, 0.5);
sceneTitle.x = 1024;
sceneTitle.y = 500;
sceneTitle.alpha = 0;
game.addChild(sceneTitle);
// Initialize all scenes
for (var i = 1; i <= 8; i++) {
	scenes.push(new Scene(i));
}
var sceneTitles = ["Scene 1: Sula's Lost Adventure", "Scene 2: Pando the Ghost Appears", "Scene 3: Pando's Ghostly Spotlight", "Scene 4: Coco Hides in the Bushes", "Scene 5: Coco's Vampire Reveal", "Scene 6: Meet Bing the Witch", "Scene 7: Brewing the Magic Potion", "Scene 8: Magical Candy Rain!"];
function startScene(sceneNumber) {
	// Clear previous scene
	if (currentScene > 0) {
		game.removeChild(scenes[currentScene - 1]);
	}
	currentScene = sceneNumber;
	showingStory = true;
	// Hide TV elements
	tvFrame.alpha = 0;
	tvScreen.alpha = 0;
	playButton.alpha = 0;
	playText.alpha = 0;
	girl1.alpha = 0;
	girl2.alpha = 0;
	girl3.alpha = 0;
	// Show scene title
	sceneTitle.setText(sceneTitles[sceneNumber - 1]);
	sceneTitle.alpha = 1;
	// Add and create current scene
	var scene = scenes[sceneNumber - 1];
	game.addChild(scene);
	scene.createScene();
	// Start scene animation after brief delay
	LK.setTimeout(function () {
		scene.playAnimation();
		LK.getSound('sceneTransition').play();
	}, 500);
	// Show control buttons after scene plays
	LK.setTimeout(function () {
		showControlButtons();
	}, 3000);
}
function showControlButtons() {
	if (currentScene < 8) {
		// Show continue button
		tween(continueButton, {
			alpha: 1
		}, {
			duration: 500
		});
		tween(continueText, {
			alpha: 1
		}, {
			duration: 500
		});
	}
	// Show again button
	tween(againButton, {
		alpha: 1
	}, {
		duration: 500
	});
	tween(againText, {
		alpha: 1
	}, {
		duration: 500
	});
}
function hideControlButtons() {
	tween(continueButton, {
		alpha: 0
	}, {
		duration: 300
	});
	tween(continueText, {
		alpha: 0
	}, {
		duration: 300
	});
	tween(againButton, {
		alpha: 0
	}, {
		duration: 300
	});
	tween(againText, {
		alpha: 0
	}, {
		duration: 300
	});
	tween(sceneTitle, {
		alpha: 0
	}, {
		duration: 300
	});
}
function returnToTV() {
	// Hide current scene
	if (currentScene > 0) {
		game.removeChild(scenes[currentScene - 1]);
	}
	hideControlButtons();
	// Show TV elements
	tvFrame.alpha = 1;
	tvScreen.alpha = 1;
	playButton.alpha = 1;
	playText.alpha = 1;
	girl1.alpha = 1;
	girl2.alpha = 1;
	girl3.alpha = 1;
	currentScene = 0;
	showingStory = false;
	isWatchingTV = true;
}
// Event handlers
playButton.down = function (x, y, obj) {
	if (isWatchingTV) {
		LK.getSound('buttonClick').play();
		isWatchingTV = false;
		startScene(1);
	}
};
continueButton.down = function (x, y, obj) {
	if (showingStory && currentScene < 8) {
		LK.getSound('buttonClick').play();
		hideControlButtons();
		startScene(currentScene + 1);
	}
};
againButton.down = function (x, y, obj) {
	if (showingStory) {
		LK.getSound('buttonClick').play();
		if (currentScene === 8) {
			// Return to TV after final scene
			returnToTV();
		} else {
			// Replay current scene
			hideControlButtons();
			startScene(currentScene);
		}
	}
};
// Girls watching animation
var girlsWatching = function girlsWatching() {
	if (isWatchingTV) {
		tween(girl1, {
			y: 2080
		}, {
			duration: 2000,
			easing: tween.easeInOut,
			onFinish: function onFinish() {
				tween(girl1, {
					y: 2100
				}, {
					duration: 2000,
					easing: tween.easeInOut
				});
			}
		});
		tween(girl2, {
			y: 2130
		}, {
			duration: 2500,
			easing: tween.easeInOut,
			onFinish: function onFinish() {
				tween(girl2, {
					y: 2150
				}, {
					duration: 2500,
					easing: tween.easeInOut
				});
			}
		});
		tween(girl3, {
			y: 2080
		}, {
			duration: 1800,
			easing: tween.easeInOut,
			onFinish: function onFinish() {
				tween(girl3, {
					y: 2100
				}, {
					duration: 1800,
					easing: tween.easeInOut
				});
			}
		});
	}
};
// Start girls watching animation
girlsWatching();
// Keep girls animated
LK.setInterval(function () {
	if (isWatchingTV) {
		girlsWatching();
	}
}, 4000);
Showing 1 to 3 of 3
1

Used plugins

@upit/tween
Home
Discover
Play
Profile