Upit | Learn about creating the game Color Bounce with gen AI

Play

17d

Tap, Match, Survive. One Wrong Bounce — Game Over. Color Bounce is a fast-paced, one-tap rhythm game where your reflexes are your only lifeline. Control a glowing ball as it bounces through an endless tower of colored platforms — but there’s a twist: the ball’s color must match the platform or you crash instantly. 🕹 How to Play Tap to change your ball’s color (Red → Blue → Yellow → Red...) Bounce on matching platforms to keep climbing Survive as long as you can while speed and chaos increase

#RhythmGame

#Reaction

#ColorMatch

#MobileArcade

#Unlockables

Creation History

User prompt

add a play/pause button for the music and also add a basic volume switch next to it. place them in top left corner.

User prompt

let's add it

User prompt

always make the first ball same color with the first platform

User prompt

increase initial ball speed slightly

User prompt

increase a bit more

User prompt

increase ball speed slightly for all levels

User prompt

increase the speed more at first interval

User prompt

increase a bit more

User prompt

increase initial platform speed slightly

User prompt

increase platform movement speed a small amount for each difficulty level

User prompt

let's change the difficulty increase interval to 7 from 10 and add more levels with smooth transitions

User prompt

yes please

User prompt

Fix the platform spawning logic to ensure there is always at least one visible platform below the ball. The issue is that when multiple platforms are removed quickly, no new platforms are spawned in time, creating a gap and causing the player to fall with nothing to bounce on. To solve this: - Before removing any platforms that leave the screen, check the current number of visible platforms. - If fewer than 3 platforms are visible, immediately spawn a new one before removal happens. - The new platform should always be placed just below the current lowest platform (lowestY + 250 or a fixed gap). - Never allow a moment when there are 0 platforms on screen or below the ball. This must happen **before** the ball lands again to prevent a game over due to missing ground.

User prompt

Fix the platform spawning logic so that new platforms are always placed consistently below the last visible one. Currently, when all platforms are removed too quickly, the system uses a hardcoded Y value (like 1600) to place the next platform. This creates large gaps and breaks the flow. To fix this: - Always keep track of the lowest Y position among all existing platforms. - If no platforms exist (edge case), reuse the last known platform Y value instead of falling back to a hardcoded number. - Spawn the next platform at a fixed distance below the lowest platform (e.g., lowestY + 250). - Ensure the gap between platforms remains consistent throughout the game. The platform spawn position must be reliable and continuous, with no sudden gaps, even when platforms are being removed quickly.

User prompt

Fix the platform spawning system: Currently, only 8 platforms are generated at the start and no new ones are added later. Update the system so that: - When a platform moves off the top of the screen, it is either destroyed or reused. - A new platform is spawned at the bottom of the screen (just below the lowest existing platform) to replace the one that left. - The platform spawn system must be continuous, maintaining a consistent gap between each platform. - The total number of active platforms can remain limited (e.g. 8–10) for performance, but they must cycle endlessly to create an infinite level flow. Make sure the player always has platforms to land on as they bounce.

User prompt

Fix the platform spawning logic: As platforms move upward and leave the screen, new platforms must be spawned at the bottom of the screen to keep the gameplay continuous. - Always maintain enough platforms on screen to cover the player’s next bounce. - When a platform goes off the top of the screen, immediately spawn a new one just below the lowest existing platform. - The new platform should be placed at a consistent vertical gap below the last one.

User prompt

Start the game with a higher initial speed 4

User prompt

Start the game with a higher initial speed (e.g., speed = 3)

User prompt

Please reset the camera behavior to the following: - The camera should follow the ball vertically, both up and down. - The ball should always remain centered vertically on the screen, or slightly above center. - Do not anchor the camera to the platforms. - Make sure the ball is always visible during play. - If this causes problems with platform visibility, we can adjust platform spawn positions separately. Restore proper game feel and balance. Do not use previous camera logic based on platforms.

User prompt

Update the camera system: Instead of following the ball, make the camera follow the platforms. Specifically, the camera should always be positioned so that the **lowest two platforms currently on screen** remain visible at the bottom of the screen. As new platforms spawn above and old ones move up, the camera should smoothly move upward to follow the latest platform layout, always keeping the **bottom two platforms** in view. If the ball drops below the visible area (below the bottom platform), the camera should **not move downward** to follow it. The player should lose only if the ball goes off-screen. The camera should follow upward movement smoothly, anchored to the platform system — not the ball.

User prompt

Please fix this issue: 1. The initial upward platform speed is still too slow. Increase the starting platform speed so the game feels challenging from the first bounce. Do not start with speed = 1 — start with a faster value (e.g., speed = 2 or 3).

User prompt

Update the platform movement system: 1. Platforms should start moving upward immediately when the game begins. 2. The upward speed must increase more aggressively based on the number of bounces. Suggested speed logic: - Bounce 0–9: speed = 1 (slow) - Bounce 10–19: speed = 2 - Bounce 20–29: speed = 3 - Bounce 30–39: speed = 4 - Bounce 40+: cap speed at 5 Make sure this progression is smooth, not frame-skipping or stuttering. The goal is to create increasing pressure and keep the player reacting, but not so fast that the ball is pushed off-screen. Please apply this speed curve or something similar that ramps up the difficulty noticeably.

User prompt

increase initial vertical movement speed of platforms

User prompt

platforms should start moving upward after the second bounce

User prompt

movement should be vertical focused not horizontal

/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1", {
	coins: 0,
	unlockedSkins: [],
	selectedSkin: 0
});

/**** 
* Classes
****/ 
// Ball class
var Ball = Container.expand(function () {
	var self = Container.call(this);
	// Ball color index: 0=red, 1=blue, 2=green, 3=yellow
	self.colorIndex = 0;
	self.colors = ['red', 'blue', 'green', 'yellow'];
	self.asset = null;
	// Attach initial asset
	self.setColor = function (idx) {
		if (self.asset) {
			self.removeChild(self.asset);
		}
		self.colorIndex = idx;
		var colorName = self.colors[self.colorIndex];
		self.asset = self.attachAsset('ball_' + colorName, {
			anchorX: 0.5,
			anchorY: 0.5
		});
	};
	self.cycleColor = function () {
		var next = (self.colorIndex + 1) % self.colors.length;
		self.setColor(next);
	};
	// For simple trail effect (MVP: just a quick flash)
	self.flash = function () {
		tween(self.asset, {
			alpha: 0.5
		}, {
			duration: 60,
			easing: tween.linear,
			onFinish: function onFinish() {
				tween(self.asset, {
					alpha: 1
				}, {
					duration: 80
				});
			}
		});
	};
	// Set initial color
	self.setColor(0);
	return self;
});
// Coin class
var Coin = Container.expand(function () {
	var self = Container.call(this);
	self.asset = self.attachAsset('coin', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.update = function () {
		// MVP: no animation
	};
	return self;
});
// Platform class
var Platform = Container.expand(function () {
	var self = Container.call(this);
	// Color index: 0=red, 1=blue, 2=green, 3=yellow
	self.colorIndex = 0;
	self.colors = ['red', 'blue', 'green', 'yellow'];
	self.asset = null;
	// For moving platforms (future)
	self.vx = 0;
	self.setColor = function (idx) {
		if (self.asset) {
			self.removeChild(self.asset);
		}
		self.colorIndex = idx;
		var colorName = self.colors[self.colorIndex];
		self.asset = self.attachAsset('platform_' + colorName, {
			anchorX: 0.5,
			anchorY: 0.5
		});
	};
	// For MVP, platforms are static
	self.update = function () {
		// No horizontal movement; platforms remain centered
	};
	// Set initial color
	self.setColor(0);
	return self;
});

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

/**** 
* Game Code
****/ 
// --- Game variables ---
// Ball colors (platforms and ball)
// SFX
// Music (stub, not played in MVP)
var ball = null;
var platforms = [];
var coins = [];
var score = 0;
var coinCount = 0;
var platformSpacing = 400; // vertical distance between platforms
// platformSpeed is now calculated dynamically based on score
var gravity = 1; // increases as score increases (slightly higher)
var bounceVelocity = -31; // initial bounce velocity (slightly higher magnitude)
var ballVy = 0;
var isFalling = true;
var currentPlatformIdx = 0;
var lastTapTick = 0;
var gameStarted = false;
var dragNode = null; // not used, but required by guidelines
var lastIntersecting = false;
var canTap = true; // prevent double tap in one frame
// GUI
var scoreTxt = new Text2('0', {
	size: 120,
	fill: '#fff'
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
var coinTxt = new Text2('0', {
	size: 80,
	fill: '#ffd700'
});
coinTxt.anchor.set(1, 0);
coinTxt.x = -40;
coinTxt.y = 20;
LK.gui.topRight.addChild(coinTxt);
// --- Helper functions ---
function getRandomColorIdx() {
	// 0=red, 1=blue, 2=green, 3=yellow
	return Math.floor(Math.random() * 4);
}
function spawnPlatform(y, colorIdx) {
	var plat = new Platform();
	plat.setColor(colorIdx);
	plat.x = 2048 / 2;
	plat.y = y;
	// No horizontal movement; platforms remain centered
	plat.vx = 0;
	platforms.push(plat);
	game.addChild(plat);
	return plat;
}
function spawnCoin(x, y) {
	var c = new Coin();
	c.x = x;
	c.y = y - 60;
	coins.push(c);
	game.addChild(c);
	return c;
}
function resetGameVars() {
	score = 0;
	coinCount = 0;
	// platformSpeed is now calculated dynamically based on score
	gravity = 1.1;
	bounceVelocity = -38;
	ballVy = 0;
	isFalling = true;
	currentPlatformIdx = 0;
	lastTapTick = 0;
	canTap = true;
	gameStarted = false;
	lastIntersecting = false;
	// Remove old platforms and coins
	for (var i = 0; i < platforms.length; ++i) {
		platforms[i].destroy();
	}
	for (var i = 0; i < coins.length; ++i) {
		coins[i].destroy();
	}
	platforms = [];
	coins = [];
	// Reset lastPlatformY to initial spawn value
	lastPlatformY = 1600;
	// Remove ball
	if (ball) {
		ball.destroy();
		ball = null;
	}
}
// --- Game start ---
function startGame() {
	resetGameVars();
	// Ball
	ball = new Ball();
	ball.x = 2048 / 2;
	ball.y = 600;
	game.addChild(ball);
	// Platforms: fill screen
	// Place first platform lower to give player time to react
	var y = 1600; // Lower on screen for first platform
	for (var i = 0; i < 8; ++i) {
		var colorIdx = getRandomColorIdx();
		var plat = spawnPlatform(y, colorIdx);
		lastPlatformY = plat.y;
		// Place a coin on every 3rd platform
		if (i > 0 && i % 3 === 0) {
			spawnCoin(plat.x, plat.y);
		}
		y += platformSpacing;
	}
	currentPlatformIdx = 0;
	isFalling = true;
	ballVy = 0;
	score = 0;
	coinCount = 0;
	scoreTxt.setText('0');
	coinTxt.setText(storage.coins || 0);
	gameStarted = true;
}
// --- Input: tap to cycle color ---
game.down = function (x, y, obj) {
	if (!gameStarted) {
		startGame();
		return;
	}
	if (!canTap) {
		return;
	}
	canTap = false;
	if (ball) {
		ball.cycleColor();
		ball.flash();
	}
	lastTapTick = LK.ticks;
};
game.up = function (x, y, obj) {
	canTap = true;
};
// --- Main game loop ---
game.update = function () {
	if (!gameStarted) {
		return;
	}
	// Ball physics
	if (isFalling) {
		ballVy += gravity;
		ball.y += ballVy;
	}
	// Move platforms upward to simulate ball falling
	// Platform upward speed: increases slightly at each difficulty level for smooth progression
	var moveUp = 0;
	if (score >= 0) {
		// Base speed (increased a bit more)
		moveUp = 5.2;
		// For every 7 points, increase speed by 0.27, up to a max
		var level = Math.floor(score / 7);
		moveUp += Math.min(level * 0.27, 4.5); // max speed increase is 4.5 (so max moveUp = 9.7)
		// Prevent platforms from moving up so fast that the ball can exit the top
		// If the ball is within 200px of the top, pause upward movement
		if (ball && ball.y < 200) {
			moveUp = 0;
		}
	}
	for (var i = 0; i < platforms.length; ++i) {
		platforms[i].y -= moveUp;
		platforms[i].update();
	}
	for (var i = 0; i < coins.length; ++i) {
		coins[i].y -= moveUp;
		coins[i].update();
	}
	// Remove platforms that go off top and immediately recycle/spawn new ones at the bottom to maintain infinite flow
	if (typeof lastPlatformY === "undefined") {
		var lastPlatformY = 1600;
	}
	// Remove platforms that go off top and robustly recycle to always maintain at least 3 platforms below the ball
	for (var i = platforms.length - 1; i >= 0; --i) {
		if (platforms[i].y < -100) {
			// Remove the platform from the game and array
			platforms[i].destroy();
			platforms.splice(i, 1);
		}
	}
	// After removals, ensure at least 3 platforms exist, all spaced consistently below the lowest
	// Find the current lowest platform Y
	var lowestY = -Infinity;
	for (var j = 0; j < platforms.length; ++j) {
		if (platforms[j].y > lowestY) {
			lowestY = platforms[j].y;
		}
	}
	// If there are no platforms left, use the last known platform Y
	if (lowestY === -Infinity) {
		lowestY = lastPlatformY;
	}
	// Always keep at least 3 platforms
	while (platforms.length < 3) {
		var colorIdx = getRandomColorIdx();
		var plat = spawnPlatform(lowestY + platformSpacing, colorIdx);
		lastPlatformY = plat.y;
		lowestY = plat.y;
		// Place a coin on every 3rd platform
		if ((score + platforms.length) % 3 === 0) {
			spawnCoin(plat.x, plat.y);
		}
	}
	for (var i = coins.length - 1; i >= 0; --i) {
		if (coins[i].y < -100) {
			coins[i].destroy();
			coins.splice(i, 1);
		}
	}
	// (Platform count is now managed by recycling above. No need for extra always-ensure loop.)
	// Ball collision with platform (only check nearest platform)
	var hit = false;
	for (var i = 0; i < platforms.length; ++i) {
		var plat = platforms[i];
		// Only check platforms below ball
		if (plat.y > ball.y && plat.y - ball.y < 120) {
			// Check horizontal overlap
			var dx = Math.abs(ball.x - plat.x);
			if (dx < plat.asset.width / 2 - 30) {
				// Check vertical overlap
				var dy = Math.abs(ball.y - plat.y);
				if (dy < 90) {
					// Ball is landing on platform
					hit = true;
					// Only trigger bounce if falling
					if (ballVy > 0) {
						// Color match?
						if (ball.colorIndex === plat.colorIndex) {
							// Success!
							ballVy = bounceVelocity;
							isFalling = true;
							score += 1;
							scoreTxt.setText(score);
							LK.setScore(score);
							LK.getSound('bounce').play();
							// Flash ball
							ball.flash();
							// Remove platform after bounce
							plat.destroy();
							platforms.splice(i, 1);
							// Increase difficulty
							if (score === 3) {
								// After first 3 bounces, increase ball speed
								gravity += 0.15;
								bounceVelocity -= 3;
							}
							// Difficulty increases every 7 points, with smooth transitions and more levels
							if (score % 7 === 0) {
								// Level up: increase gravity and platform speed smoothly
								// Add more levels with different increments for smoothness
								if (score < 21) {
									gravity += 0.07;
								} else if (score < 35) {
									gravity += 0.06;
								} else if (score < 56) {
									gravity += 0.05;
								} else if (score < 84) {
									gravity += 0.04;
								} else {
									gravity += 0.03;
								}
							}
						} else {
							// Fail: wrong color
							LK.getSound('fail').play();
							LK.effects.flashScreen(0xff0000, 600);
							LK.showGameOver();
							return;
						}
					}
				}
			}
		}
	}
	// Ball falls off bottom
	if (ball.y > 2732 + 100) {
		LK.getSound('fail').play();
		LK.effects.flashScreen(0xff0000, 600);
		LK.showGameOver();
		return;
	}
	// Coin collection
	for (var i = coins.length - 1; i >= 0; --i) {
		var c = coins[i];
		var dx = Math.abs(ball.x - c.x);
		var dy = Math.abs(ball.y - c.y);
		if (dx < 90 && dy < 90) {
			// Collect coin
			LK.getSound('coin').play();
			c.destroy();
			coins.splice(i, 1);
			coinCount += 1;
			storage.coins = (storage.coins || 0) + 1;
			coinTxt.setText(storage.coins);
			// Simple coin pop
			// (future: animate)
		}
	}
};
// --- Game over / win handling is automatic by LK ---
// --- Start screen: tap to start ---
startGame();

===================================================================
--- original.js
+++ change.js
@@ -257,13 +257,13 @@
 	// Move platforms upward to simulate ball falling
 	// Platform upward speed: increases slightly at each difficulty level for smooth progression
 	var moveUp = 0;
 	if (score >= 0) {
-		// Base speed (increased slightly)
-		moveUp = 4.7;
-		// For every 7 points, increase speed by 0.25, up to a max
+		// Base speed (increased a bit more)
+		moveUp = 5.2;
+		// For every 7 points, increase speed by 0.27, up to a max
 		var level = Math.floor(score / 7);
-		moveUp += Math.min(level * 0.25, 4); // max speed increase is 4 (so max moveUp = 8.7)
+		moveUp += Math.min(level * 0.27, 4.5); // max speed increase is 4.5 (so max moveUp = 9.7)
 		// Prevent platforms from moving up so fast that the ball can exit the top
 		// If the ball is within 200px of the top, pause upward movement
 		if (ball && ball.y < 200) {
 			moveUp = 0;