Upit | Learn about creating the game Bubble Blower Tycoon with gen AI

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

/**** 
* Classes
****/ 
// Bubble class to represent each bubble in the game
var Bubble = Container.expand(function () {
	var self = Container.call(this);
	self.lastPopTime = 0; // Add timestamp tracking
	var sprite = self.attachAsset('bubble', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.size = 100;
	// Subtle size-based variance plus small random factor
	var speedMultiplier = 120 / self.size * (0.9 + Math.random() * 0.2); // Just 10% variance
	self.floatSpeed = 50 * speedMultiplier / 60;
	self.driftX = (Math.random() * 20 - 10) / 60; // Normal drift variance
	self.verticalVelocity = 0;
	self.down = function (e) {
		// Add cooldown check (100ms)
		var currentTime = Date.now();
		if (currentTime - self.lastPopTime < 100) {
			return true; // Ignore clicks too close together
		}
		self.lastPopTime = currentTime;
		var index = game.bubbles.indexOf(self);
		if (index > -1) {
			game.bubbles.splice(index, 1);
		}
		var points = self.getBP();
		game.addBP(points);
		if (self.size > 60 && !self.justSplit) {
			var newSize = self.size * 0.6;
			for (var i = 0; i < 2; i++) {
				spawnSplitBubble(self.x, self.y, newSize, i === 0 ? -1 : 1);
			}
		}
		self.destroy();
		return true; // Stop event propagation
	};
	self.getBP = function () {
		return Math.floor(Math.pow(self.size, 2) * 0.1);
	};
	self.update = function () {
		self.justSplit = false; // Clear the flag after first update
		// Add gravity effect
		if (self.verticalVelocity < self.floatSpeed) {
			self.verticalVelocity += 0.1; // Gradually transition to floating
		}
		self.y -= self.verticalVelocity;
		// Gradually reduce horizontal speed after split
		if (Math.abs(self.driftX) > (Math.random() * 20 - 10) / 60) {
			self.driftX *= 0.98; // Slowly return to normal drift speed
		}
		self.x += self.driftX;
		// Bounce off edges
		if (self.x < self.size) {
			self.x = self.size;
			self.driftX = Math.abs(self.driftX);
		} else if (self.x > game.width - self.size) {
			self.x = game.width - self.size;
			self.driftX = -Math.abs(self.driftX);
		}
		var scale = self.size / sprite.width;
		sprite.scaleX = scale;
		sprite.scaleY = scale;
	};
	return self;
});
// Pufferfish mask that follows face
var pufferMask = Container.expand(function () {
	var self = Container.call(this);
	var sprite = self.attachAsset('pufferfish', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var targetX = 0;
	var targetY = 0;
	var smoothingFactor = 0.12;
	var prevX = null;
	var prevY = null;
	var targetRotation = 0;
	var rotationSmoothingFactor = 0.1;
	var targetTilt = 0;
	var tiltSmoothingFactor = 0.09; // Reduced from 0.08 for smoother movement
	var tiltScaleFactor = 0.09; // Reduced from 0.15 for less tilt
	var scaleHistory = new Array(5).fill(0); // Keep last 5 scale values
	var scaleIndex = 0;
	var baseScale = 1;
	var minScale = 0.1;
	var maxScale = 3;
	self.update = function () {
		// Adjust scale based on face size
		if (facekit.leftEye && facekit.rightEye && facekit.mouthCenter) {
			var eyeDistance = Math.abs(facekit.rightEye.x - facekit.leftEye.x);
			var newScale = eyeDistance / 500;
			// Update rolling average
			scaleHistory[scaleIndex] = newScale;
			scaleIndex = (scaleIndex + 1) % scaleHistory.length;
			// Calculate average scale
			var avgScale = scaleHistory.reduce(function (a, b) {
				return a + b;
			}, 0) / scaleHistory.length;
			// More gentle smoothing
			sprite.scaleX = sprite.scaleX * 0.85 + avgScale * 0.15;
			sprite.scaleY = sprite.scaleY * 0.85 + avgScale * 0.15;
		}
		// Follow nose position for main face tracking
		if (facekit.noseTip) {
			targetX = facekit.noseTip.x;
			targetY = facekit.noseTip.y;
			// Initialize previous positions if not set
			if (prevX === null) {
				prevX = targetX;
				prevY = targetY;
			}
			// Weighted average between previous and target position
			var newX = prevX * (1 - smoothingFactor) + targetX * smoothingFactor;
			var newY = prevY * (1 - smoothingFactor) + targetY * smoothingFactor;
			self.x = newX;
			self.y = newY;
			// Update previous positions
			prevX = newX;
			prevY = newY;
		}
		if (facekit.leftEye && facekit.rightEye) {
			targetTilt = calculateFaceTilt() * tiltScaleFactor; // Scale down the tilt
			// Reduce max rotation to ±15 degrees
			targetTilt = Math.max(-15, Math.min(15, targetTilt));
			self.rotation += (targetTilt - self.rotation) * tiltSmoothingFactor;
		}
	};
	function calculateFaceTilt() {
		if (facekit.leftEye && facekit.rightEye && facekit.mouthCenter) {
			// Calculate midpoint between eyes
			var eyeMidX = (facekit.leftEye.x + facekit.rightEye.x) / 2;
			var eyeMidY = (facekit.leftEye.y + facekit.rightEye.y) / 2;
			// Calculate angle between eye midpoint and mouth, negated to fix direction
			var dx = facekit.mouthCenter.x - eyeMidX;
			var dy = facekit.mouthCenter.y - eyeMidY;
			var angle = -(Math.atan2(dx, dy) * (180 / Math.PI));
			// Reduced max angle to ±15 degrees and lowered multiplier
			return Math.max(-15, Math.min(15, angle * 0.15));
		}
		return 0; // Default to straight when face points aren't available
	}
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x87CEEB // Light blue background to represent the sky
});

/**** 
* Game Code
****/ 
var playerMask = new pufferMask();
game.addChild(playerMask);
// Separate spawn functions:
function spawnSplitBubble(parentX, parentY, size, direction) {
	var bubble = new Bubble();
	bubble.x = parentX;
	bubble.y = parentY;
	bubble.size = size;
	bubble.justSplit = true; // Add this flag
	// More reasonable velocities
	var speedMultiplier = 120 / size * (0.9 + Math.random() * 0.2);
	bubble.verticalVelocity = -(Math.random() * 2 + 4); // More reasonable downward speed
	bubble.driftX = direction * (Math.random() * 2 + 4); // More reasonable spread
	bubble.floatSpeed = (45 + Math.random() * 10) / 60 * speedMultiplier;
	game.addChild(bubble);
	game.bubbles.push(bubble);
}
game.bubbles = []; // Track bubble array
// Initialize game variables
//<Assets used in the game will automatically appear here>
game.bp = 0; // Track total BP
function formatBP(value) {
	var units = ['', 'K', 'M', 'B', 'T'];
	var unitIndex = 0;
	while (value >= 1000 && unitIndex < units.length - 1) {
		value /= 1000;
		unitIndex++;
	}
	return Math.floor(value * 10) / 10 + units[unitIndex];
}
// Create BP display text (add near game initialization)
var bpText = new Text2("BP: 0", {
	size: 100,
	fill: 0xFFFFFF
});
bpText.anchor.set(0.5, 0);
bpText.x = game.width - 200; // Position in top right
bpText.y = 100;
game.addChild(bpText);
game.addBP = function (points) {
	game.bp += points;
	// Update display
	bpText.text = formatBP(game.bp) + " BP";
};
game.update = function () {
	// Spawn new bubbles
	if (LK.ticks % 120 == 0) {
		var x = Math.random() * (game.width - 200) + 100;
		spawnSplitBubble(x, game.height + 100, 100, 0);
	}
	// Update all children (bubbles)
	for (var i = game.bubbles.length - 1; i >= 0; i--) {
		var bubble = game.bubbles[i];
		if (bubble.update) {
			bubble.update();
		}
	}
};
// Handle touch/mouse events for the game
game.down = function (x, y, obj) {
	var popped = false; // Track if we've popped any bubble
	for (var i = game.bubbles.length - 1; i >= 0; i--) {
		var bubble = game.bubbles[i];
		// Calculate distance between click and bubble center
		var dx = x - bubble.x;
		var dy = y - bubble.y;
		var distance = Math.sqrt(dx * dx + dy * dy);
		// Only pop if we haven't popped anything this click
		if (!popped && distance <= bubble.size / 2 + 10 && bubble.down) {
			bubble.down();
			popped = true;
			break; // Exit loop after first pop
		}
	}
};
;
Creation History

Images

Sounds & Music

Used plugins
