Upit | Learn about creating the game PetalPop: Year of the Bee with gen AI

/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ var BasicFlower = Container.expand(function () { var self = Container.call(this); var flowerGraphics = self.attachAsset('BasicFlower', { anchorX: 0.5, anchorY: 0.5 }); self.hasActivePollen = false; self.fairyParticles = []; self.FAIRY_COUNT = 3; self.update = function () { var scaleFactor = 1 + Math.sin(LK.ticks * 0.1) * 0.05; flowerGraphics.scale.x = scaleFactor; flowerGraphics.scale.y = scaleFactor; flowerGraphics.rotation = Math.sin(LK.ticks * 0.1) * 0.05; }; self.bloom = function () { // Scale animation self.scale.set(0.3, 0.3); tween(self.scale, { x: 1, y: 1 }, { duration: 1000 }); // Create burst particles self.createPollenBurst(self.x, self.y); // Initialize with active pollen self.hasActivePollen = true; // Create fairy particles for (var i = 0; i < self.FAIRY_COUNT; i++) { var fairy = new PollenParticle().init('fairy'); self.addChild(fairy); self.fairyParticles.push(fairy); } }; self.createPollenBurst = function (x, y) { for (var i = 0; i < 12; i++) { var particle = new PollenParticle().init('burst'); var angle = i / 12 * Math.PI * 2; particle.x = x; particle.y = y; particle.vx = Math.cos(angle) * 3; particle.vy = Math.sin(angle) * 3; if (self.parent) { self.parent.addChild(particle); } } }; self.usePollen = function () { if (!self.hasActivePollen) { return; } self.hasActivePollen = false; // Remove fairy particles self.fairyParticles.forEach(function (fairy) { self.removeChild(fairy); }); self.fairyParticles = []; // Clear animation tween(self, { alpha: 0, scale: 0.1 }, { duration: 1000, onFinish: function onFinish() { if (self.parent) { var gridPos = garden.worldToGrid(self.x, self.y); garden.grid[gridPos.y][gridPos.x] = null; self.parent.removeChild(self); } } }); }; }); // Bud class var Bud = Container.expand(function () { var self = Container.call(this); var budGraphics = self.attachAsset('Bud', { anchorX: 0.5, anchorY: 0.5 }); // Simple periodic animation self.update = function () { self.rotation = Math.sin(LK.ticks * 0.05) * 0.1; }; }); // Add BudSpawner to handle progressive difficulty var BudSpawner = Container.expand(function () { var self = Container.call(this); self.garden = null; self.gameTime = 0; self.init = function (garden) { self.garden = garden; self.gameTime = 0; }; self.getSpawnRate = function () { if (self.gameTime < 30) { // Early game return Math.random() * 1000 + 3000; // 3-4s } else if (self.gameTime < 90) { // Mid game return Math.random() * 1000 + 2000; // 2-3s } else { // Late game return Math.random() * 1000 + 1000; // 1-2s } }; self.findEmptySpot = function () { var validSpots = []; for (var i = 0; i < self.garden.rows; i++) { for (var j = 0; j < self.garden.cols; j++) { if (!self.garden.grid[i][j]) { validSpots.push({ x: i, y: j }); } } } if (validSpots.length > 0) { return validSpots[Math.floor(Math.random() * validSpots.length)]; } return null; }; self.update = function () { self.gameTime = LK.ticks / 60; // Convert ticks to seconds if (LK.ticks % Math.floor(self.getSpawnRate() / (1000 / 60)) === 0) { var spot = self.findEmptySpot(); if (spot) { var bud = new Bud(); bud.x = spot.y * self.garden.cellSize + self.garden.cellSize / 2; bud.y = spot.x * self.garden.cellSize + self.garden.cellSize / 2; bud.isBud = true; bud.isFlower = false; bud.scale.set(0, 0); // Start invisible for growth animation // Add growth animation tween(bud.scale, { x: 1, y: 1 }, { duration: 1000 }); self.garden.grid[spot.x][spot.y] = bud; self.garden.addChild(bud); } } }; }); // Simplified FlowerManager - mainly for flower conversion and management var FlowerManager = Container.expand(function () { var self = Container.call(this); // Convert a bud to a flower self.convertBudToFlower = function (bud, garden) { var gridPos = { x: Math.floor((bud.y - garden.y) / garden.cellSize), y: Math.floor((bud.x - garden.x) / garden.cellSize) }; var newFlower = new BasicFlower(); newFlower.x = bud.x; newFlower.y = bud.y; newFlower.isFlower = true; garden.removeChild(bud); garden.grid[gridPos.x][gridPos.y] = newFlower; garden.addChild(newFlower); // When a flower blooms: createPollenBurst(newFlower.x, newFlower.y); return newFlower; }; // Empty touch handler as we're using the new trail system self.handleTouch = function () {}; }); //<Assets used in the game will automatically appear here> // Garden class to manage the grid of soil var Garden = Container.expand(function () { var self = Container.call(this); self.grid = []; self.rows = 9; self.cols = 9; self.cellSize = 200; self.init = function () { // Center the grid on screen self.x = (2048 - self.cols * self.cellSize) / 2; self.y = (2732 - self.rows * self.cellSize) / 2 + 2732 * 0.12 - 400; // Initialize empty grid for (var i = 0; i < self.rows; i++) { self.grid[i] = []; for (var j = 0; j < self.cols; j++) { self.grid[i][j] = null; } } // Add center flower var centerFlower = new BasicFlower(); var centerRow = Math.floor(self.rows / 2); var centerCol = Math.floor(self.cols / 2); centerFlower.x = centerCol * self.cellSize + self.cellSize / 2; centerFlower.y = centerRow * self.cellSize + self.cellSize / 2; centerFlower.isFlower = true; self.grid[centerRow][centerCol] = centerFlower; self.addChild(centerFlower); }; // Helper method to convert grid position to world position self.gridToWorld = function (gridX, gridY) { return { x: self.x + gridX * self.cellSize + self.cellSize / 2, y: self.y + gridY * self.cellSize + self.cellSize / 2 }; }; // Helper method to convert world position to grid position self.worldToGrid = function (worldX, worldY) { var localX = worldX - self.x; var localY = worldY - self.y; return { x: Math.floor(localX / self.cellSize), y: Math.floor(localY / self.cellSize) }; }; }); // GardenBackground class var GardenBackground = Container.expand(function () { var self = Container.call(this); var gardenBackground = LK.getAsset('GardenBackground', { anchorX: 0.5, anchorY: 0.5, scaleX: 1.02, scaleY: 1.02, x: 2048 / 2, y: 2732 / 2 }); self.addChild(gardenBackground); }); // PollenParticle class var PollenParticle = Container.expand(function () { var self = Container.call(this); // Particle properties self.velocity = { x: 0, y: 0 }; self.lifespan = 1; // Goes from 1 to 0 self.decayRate = 0.02; // How fast the particle fades self.type = 'trail'; // Can be 'trail' or 'burst' // Create the visual element var pollenGraphics = self.attachAsset('PollenSparkle', { anchorX: 0.5, anchorY: 0.5 }); // Initialize with random properties for more organic feel self.init = function (type) { self.type = type || 'trail'; // Set initial scale based on type if (self.type === 'trail') { self.scale.set(0.7 + Math.random() * 0.3); // Larger for trail self.decayRate = 0.03; // Faster decay for trail // Slight random velocity for trail movement self.velocity = { x: (Math.random() - 0.5) * 2, y: (Math.random() - 0.5) * 2 }; } else if (self.type === 'burst') { self.scale.set(0.5 + Math.random() * 0.3); // Smaller initial size for bursts self.decayRate = 0.01; // Slower decay for longer travel // Radial burst velocity var angle = Math.random() * Math.PI * 2; var speed = 3 + Math.random() * 5; // Increased speed for further travel self.velocity = { x: Math.cos(angle) * speed, y: Math.sin(angle) * speed }; } else if (self.type === 'fairy') { self.lifespan = undefined; // Don't fade out self.startAngle = Math.random() * Math.PI * 2; // Random start position self.update = function () { var time = LK.ticks * 0.02; var radius = 30; // Orbit motion self.x = Math.cos(time + self.startAngle) * radius; self.y = Math.sin(time + self.startAngle) * radius; // Add bobbing self.y += Math.sin(time * 2 + self.startAngle) * 10; }; } // Random rotation speed self.rotationSpeed = (Math.random() - 0.5) * 0.2; // Random starting rotation self.rotation = Math.random() * Math.PI * 2; // Full opacity to start self.alpha = 1; return self; }; self.update = function () { // Update position based on velocity self.x += self.velocity.x; self.y += self.velocity.y; // Add rotation self.rotation += self.rotationSpeed; // Slow down velocity over time self.velocity.x *= 0.95; self.velocity.y *= 0.95; // Update lifespan and alpha self.lifespan -= self.decayRate; self.alpha = self.lifespan; // Scale slightly varies with life var scalePulse = 1 + Math.sin(LK.ticks * 0.2) * 0.1; pollenGraphics.scale.set(scalePulse * self.scale.x); // Remove when lifecycle complete if (self.lifespan <= 0) { self.destroy(); } }; }); // First, let's add a PollenTrail class to handle the dragging mechanic var PollenTrail = Container.expand(function () { var self = Container.call(this); self.points = []; self.active = false; self.trailStartTime = 0; // Add this to track when trail started self.startTime = 0; self.TRAIL_DURATION = 2500; // 2.5s as specified self.currentGarden = null; // Store reference to garden self.TRAIL_DURATION = 2500; // 2.5 seconds in milliseconds self.MAX_SPEED = 15; // Adjust this value for proper feel self.startTrail = function (x, y, garden) { self.active = true; self.points = [{ x: x, y: y, time: Date.now() }]; self.startTime = Date.now(); self.trailStartTime = Date.now(); // Record start time self.currentGarden = garden; // Store garden reference self.lastPoint = { x: x, y: y }; }; self.updateTrail = function (x, y) { if (!self.active) { return; } // Enforce maximum speed var dx = x - self.lastPoint.x; var dy = y - self.lastPoint.y; var distance = Math.sqrt(dx * dx + dy * dy); if (distance > self.MAX_SPEED) { var ratio = self.MAX_SPEED / distance; x = self.lastPoint.x + dx * ratio; y = self.lastPoint.y + dy * ratio; } self.points.push({ x: x, y: y, time: Date.now() }); self.lastPoint = { x: x, y: y }; // Create particle effect along trail var particle = new PollenParticle().init('trail'); particle.x = x; particle.y = y; game.addChild(particle); }; // Add the burst effect function self.createPollenBurst = function (x, y) { for (var i = 0; i < 12; i++) { var particle = new PollenParticle().init('burst'); var angle = i / 12 * Math.PI * 2; var distance = 30; particle.x = x + Math.cos(angle) * distance; particle.y = y + Math.sin(angle) * distance; // Give particles outward velocity particle.vx = Math.cos(angle) * 3; particle.vy = Math.sin(angle) * 3; game.addChild(particle); } }; self.endTrail = function () { if (!self.active) { return; } // Find affected buds var affectedBuds = []; var checkedPositions = {}; self.points.forEach(function (point) { var localPos = garden.toLocal({ x: point.x, y: point.y }, game); var gridX = Math.floor(localPos.x / garden.cellSize); var gridY = Math.floor(localPos.y / garden.cellSize); var posKey = gridX + ',' + gridY; if (!checkedPositions[posKey] && gridX >= 0 && gridX < garden.cols && gridY >= 0 && gridY < garden.rows) { checkedPositions[posKey] = true; var gridItem = garden.grid[gridY][gridX]; if (gridItem && gridItem.isBud && !gridItem.isFlower) { affectedBuds.push({ bud: gridItem, gridX: gridX, gridY: gridY }); } } }); // Convert buds to flowers if we have at least 2 if (affectedBuds.length >= 2) { affectedBuds.forEach(function (budInfo) { // Remove the bud garden.removeChild(budInfo.bud); // Create new flower var newFlower = new BasicFlower(); newFlower.x = budInfo.bud.x; newFlower.y = budInfo.bud.y; newFlower.isFlower = true; // Add to garden first so parent is set garden.grid[budInfo.gridY][budInfo.gridX] = newFlower; garden.addChild(newFlower); // Call bloom after adding to garden newFlower.bloom(); }); } self.active = false; self.points = []; }; self.update = function () { // Add time check to update if (self.active && self.currentGarden) { var currentTime = Date.now(); if (currentTime - self.trailStartTime >= self.TRAIL_DURATION) { // Time's up - end the trail self.endTrail(); } } // Remove points older than TRAIL_DURATION var currentTime = Date.now(); self.points = self.points.filter(function (point) { return currentTime - point.time < self.TRAIL_DURATION; }); // Update all children particles for (var i = self.children.length - 1; i >= 0; i--) { var particle = self.children[i]; if (particle && particle.update) { particle.update(); } } }; }); // Add ScoreManager to handle chain reactions and scoring var ScoreManager = Container.expand(function () { var self = Container.call(this); self.currentScore = 0; self.currentChain = 0; self.chainMultiplier = 1; self.addToChain = function () { self.currentChain++; self.chainMultiplier = Math.min(1 + self.currentChain * 0.5, 5); // Cap at 5x self.addScore(100 * self.chainMultiplier); }; self.resetChain = function () { self.currentChain = 0; self.chainMultiplier = 1; }; self.addScore = function (points) { self.currentScore += Math.floor(points); // Update score display if (game.scoreDisplay) { game.scoreDisplay.text = self.currentScore.toString(); } }; }); // Level display class var LevelDisplay = Text2.expand(function () { var self = Text2.call(this, 'Level 1', { size: 150, fill: 0xFFFFFF }); }); // Score display class var ScoreDisplay = Text2.expand(function () { var self = Text2.call(this, '0', { size: 150, fill: 0xFFFFFF }); }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 //Init game with black background }); /**** * Game Code ****/ // Declare and initialize flowerManager in global scope var flowerManager = new FlowerManager(); var titleScreen = new Container(); var background = LK.getAsset('titlebackground', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, y: 2732 / 2 }); titleScreen.addChild(background); var logo = LK.getAsset('logo', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, y: 2732 / 2 }); titleScreen.addChild(logo); var playButton = LK.getAsset('playButton', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, y: 2732 / 2 + 200 }); titleScreen.addChild(playButton); var tutorialButton = LK.getAsset('tutorialButton', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, y: 2732 / 2 + 400 }); titleScreen.addChild(tutorialButton); game.addChild(titleScreen); playButton.down = function (x, y, obj) { game.removeChild(titleScreen); var gardenBackground = new GardenBackground(); game.addChild(gardenBackground); garden = new Garden(); garden.init(); game.addChild(garden); var flowerManager = new FlowerManager(); game.flowerManager = flowerManager; var pollenTrail = new PollenTrail(); game.addChild(pollenTrail); // Ensure pollen particles are rendered on top by adding them last game.setChildIndex(pollenTrail, game.children.length - 1); // Initialize bud spawner var budSpawner = new BudSpawner(); budSpawner.init(garden); game.addChild(budSpawner); // Touch handlers game.down = function (x, y, obj) { // Convert global coordinates to garden's local space var localPos = garden.toLocal({ x: x, y: y }, game); // Calculate grid position var gridX = Math.floor(localPos.x / garden.cellSize); var gridY = Math.floor(localPos.y / garden.cellSize); if (gridX >= 0 && gridX < garden.cols && gridY >= 0 && gridY < garden.rows) { var touchedFlower = garden.grid[gridY][gridX]; if (touchedFlower && touchedFlower.isFlower) { pollenTrail.startTrail(x, y, garden); } } }; game.move = function (x, y, obj) { if (pollenTrail && pollenTrail.active) { pollenTrail.updateTrail(x, y); } }; game.up = function (x, y, obj) { if (pollenTrail && pollenTrail.active) { pollenTrail.endTrail(); } }; // Initialize score display var scoreDisplay = new ScoreDisplay(); scoreDisplay.anchor.set(0.5, 0); LK.gui.top.addChild(scoreDisplay); game.scoreDisplay = scoreDisplay; // Add the main update loop game.update = function () { // Update spawning system if (budSpawner) { budSpawner.update(); } // Update trail system if (pollenTrail) { pollenTrail.update(); } // Update garden elements if (garden) { // Update all flowers and buds in the grid for (var i = 0; i < garden.rows; i++) { for (var j = 0; j < garden.cols; j++) { var gridItem = garden.grid[i][j]; if (gridItem && gridItem.update) { gridItem.update(); } } } } // Update all children that have update methods for (var i = 0; i < game.children.length; i++) { var child = game.children[i]; if (child && child.update) { child.update(); } } // Update all particles if (game.particlesToUpdate) { for (var i = game.particlesToUpdate.length - 1; i >= 0; i--) { var particle = game.particlesToUpdate[i]; if (particle && particle.update) { particle.update(); } } } }; }; tutorialButton.down = function (x, y, obj) { // Open tutorial }; // Removed duplicate playPollenPatternAnimation method

===================================================================
--- original.js
+++ change.js
@@ -5,50 +5,81 @@
 
 /**** 
 * Classes
 ****/ 
-// BasicFlower class
 var BasicFlower = Container.expand(function () {
 	var self = Container.call(this);
 	var flowerGraphics = self.attachAsset('BasicFlower', {
 		anchorX: 0.5,
 		anchorY: 0.5
 	});
-	// Only keep breathing animation
+	self.hasActivePollen = false;
+	self.fairyParticles = [];
+	self.FAIRY_COUNT = 3;
 	self.update = function () {
 		var scaleFactor = 1 + Math.sin(LK.ticks * 0.1) * 0.05;
 		flowerGraphics.scale.x = scaleFactor;
 		flowerGraphics.scale.y = scaleFactor;
 		flowerGraphics.rotation = Math.sin(LK.ticks * 0.1) * 0.05;
 	};
 	self.bloom = function () {
-		// Start small
+		// Scale animation
 		self.scale.set(0.3, 0.3);
-		// Add bloom animation
 		tween(self.scale, {
 			x: 1,
 			y: 1
 		}, {
 			duration: 1000
 		});
-		// Create bloom effect
-		self.createBloomEffect();
+		// Create burst particles
+		self.createPollenBurst(self.x, self.y);
+		// Initialize with active pollen
+		self.hasActivePollen = true;
+		// Create fairy particles
+		for (var i = 0; i < self.FAIRY_COUNT; i++) {
+			var fairy = new PollenParticle().init('fairy');
+			self.addChild(fairy);
+			self.fairyParticles.push(fairy);
+		}
 	};
-	self.createBloomEffect = function () {
+	self.createPollenBurst = function (x, y) {
 		for (var i = 0; i < 12; i++) {
-			var particle = new PollenParticle().init('burst'); // Add the init call
+			var particle = new PollenParticle().init('burst');
 			var angle = i / 12 * Math.PI * 2;
-			// Position relative to flower
-			particle.x = self.x;
-			particle.y = self.y;
-			// Set velocities - make them move outward from center
-			particle.vx = Math.cos(angle) * 5; // Increased speed for visibility
-			particle.vy = Math.sin(angle) * 5;
+			particle.x = x;
+			particle.y = y;
+			particle.vx = Math.cos(angle) * 3;
+			particle.vy = Math.sin(angle) * 3;
 			if (self.parent) {
 				self.parent.addChild(particle);
 			}
 		}
 	};
+	self.usePollen = function () {
+		if (!self.hasActivePollen) {
+			return;
+		}
+		self.hasActivePollen = false;
+		// Remove fairy particles
+		self.fairyParticles.forEach(function (fairy) {
+			self.removeChild(fairy);
+		});
+		self.fairyParticles = [];
+		// Clear animation
+		tween(self, {
+			alpha: 0,
+			scale: 0.1
+		}, {
+			duration: 1000,
+			onFinish: function onFinish() {
+				if (self.parent) {
+					var gridPos = garden.worldToGrid(self.x, self.y);
+					garden.grid[gridPos.y][gridPos.x] = null;
+					self.parent.removeChild(self);
+				}
+			}
+		});
+	};
 });
 // Bud class
 var Bud = Container.expand(function () {
 	var self = Container.call(this);

Creation History

Images

Sounds & Music