Upit | Learn about creating the game Pirate Flip with gen AI

/**** 
* Classes
****/ 
var Background = Container.expand(function () {
	var self = Container.call(this);
	self.shakeBackground = function () {
		var shakeDuration = 5; // quarter of a second at 60FPS
		var shakeAmount = 10; // shake by 10 pixels
		var shakeInterval = null;
		var shake = function shake() {
			if (shakeDuration-- > 0) {
				self.backgroundGraphics.x += (Math.random() - 0.5) * shakeAmount;
				self.backgroundGraphics.y += (Math.random() - 0.5) * shakeAmount;
			} else {
				LK.clearInterval(shakeInterval);
				self.backgroundGraphics.x = 2048 / 2;
				self.backgroundGraphics.y = 2732 / 2; // Reset to original position
			}
		};
		shakeInterval = LK.setInterval(shake, 1000 / 60);
	};
	self.backgroundGraphics = self.attachAsset('background', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.backgroundGraphics.x = 2048 / 2;
	self.backgroundGraphics.y = 2732 / 2; // Start centered on the screen
	self.moveToCenter = function () {
		var startY = self.backgroundGraphics.y;
		var endY = startY - 2000;
		var downDuration = 10; // 1 second at 60FPS
		var upDuration = 130; // 1 second at 60FPS
		var downStep = 2000 / downDuration;
		var upStep = 2000 / upDuration;
		var currentFrame = 0;
		var moveBackgroundDown = function moveBackgroundDown() {
			if (currentFrame < downDuration) {
				self.backgroundGraphics.y += downStep;
				currentFrame++;
			} else {
				LK.clearInterval(self.moveInterval);
				currentFrame = 0;
				self.moveInterval = LK.setInterval(moveBackgroundUp, 1000 / 60);
			}
		};
		var moveBackgroundUp = function moveBackgroundUp() {
			if (currentFrame < upDuration) {
				self.backgroundGraphics.y -= upStep;
				currentFrame++;
			} else {
				LK.clearInterval(self.moveInterval);
				self.backgroundGraphics.y = startY;
				self.shakeBackground();
			}
		};
		self.moveInterval = LK.setInterval(moveBackgroundDown, 1000 / 60);
	};
	self.resetBackground = function () {
		if (self.moveInterval) {
			LK.clearInterval(self.moveInterval);
		}
		self.backgroundGraphics.destroy();
		self.backgroundGraphics = self.attachAsset('background', {
			anchorX: 0.5,
			anchorY: 0.5
		});
		self.backgroundGraphics.x = 2048 / 2;
		self.backgroundGraphics.y = 2732 / 2;
		self.moveToCenter();
	};
});
var ChoiceButton = Container.expand(function (assetId, description, isHeads) {
	var self = Container.call(this);
	self.isHeads = isHeads;
	self.gameInstance = null;
	var buttonGraphic = self.createAsset(assetId, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.interactive = true;
	self.buttonMode = true;
	self.on('down', function () {
		if (!self.gameInstance.coinFlipping) {
			self.gameInstance.coinFlipping = true;
			self.gameInstance.headsButton.visible = false;
			self.gameInstance.tailsButton.visible = false;
			self.gameInstance.resetBackground(); // Reset and animate background
			if (self.gameInstance.feedbackAsset) {
				self.gameInstance.feedbackAsset.destroy();
				self.gameInstance.feedbackAsset = null;
			}
			self.gameInstance.coin.flip(function (flipResult, finalSide) {
				var feedbackAssetId;
				if (flipResult !== self.isHeads) {
					game.lives -= 1;
					game.updateLivesDisplay();
					feedbackAssetId = 'UI_Loss';
					if (game.lives <= 0) {
						LK.effects.flashScreen(0xff0000, 1000);
						game.multiplier = 1;
						LK.showGameOver();
					}
				} else {
					self.gameInstance.multiplier *= 2;
					self.gameInstance.updateMultiplierDisplay();
					feedbackAssetId = 'UI_Win';
				}
				LK.setTimeout(function () {
					self.gameInstance.feedbackAsset = LK.getAsset(feedbackAssetId, {
						anchorX: 0.5,
						anchorY: 0.5,
						x: 2048 / 2,
						y: 2732 / 1.5
					});
					game.addChild(self.gameInstance.feedbackAsset);
				}, 350);
				LK.setTimeout(function () {
					if (self.gameInstance.feedbackAsset) {
						self.gameInstance.feedbackAsset.destroy();
						self.gameInstance.feedbackAsset = null;
					}
				}, 2000);
			});
			self.gameInstance.disableButtons();
			game.multiplierDisplay.visible = false;
		}
	});
});
var Coin = Container.expand(function () {
	var self = Container.call(this);
	self.heads = new HeadsAsset();
	self.tails = new TailsAsset();
	self.addChild(self.heads);
	self.addChild(self.tails);
	self.currentSide = 'heads';
	self.flipDuration = 10;
	self.maxDuration = 220;
	self.flipInterval = null;
	self.flipTimeout = null;
	self.flip = function (onFlipEnd) {
		var flipCoin = function flipCoin() {
			self.currentSide = self.currentSide === 'heads' ? 'tails' : 'heads';
			self.heads.headsGraphics.visible = self.currentSide === 'heads';
			self.tails.tailsGraphics.visible = self.currentSide === 'tails';
			self.flipDuration *= 1.1;
			if (self.flipDuration <= self.maxDuration) {
				self.flipInterval = LK.setTimeout(flipCoin, self.flipDuration);
			} else {
				LK.clearTimeout(self.flipInterval);
				self.flipTimeout = LK.setTimeout(function () {
					var finalSide = Math.random() < 0.5 ? 'heads' : 'tails';
					self.currentSide = finalSide;
					self.heads.headsGraphics.visible = finalSide === 'heads';
					self.tails.tailsGraphics.visible = finalSide === 'tails';
					if (typeof onFlipEnd === 'function') {
						onFlipEnd(finalSide === 'heads', finalSide);
					}
					self.flipDuration = 60;
					game.enableButtons();
					game.headsButton.visible = true;
					game.tailsButton.visible = true;
					game.coinFlipping = false;
					LK.setTimeout(function () {
						game.multiplierDisplay.visible = true;
					}, 400);
				}, 440);
			}
		};
		LK.clearTimeout(self.flipInterval);
		LK.clearTimeout(self.flipTimeout);
		self.flipDuration = 60;
		flipCoin();
	};
});
var HeadsAsset = Container.expand(function () {
	var self = Container.call(this);
	self.headsGraphics = self.attachAsset('heads', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.headsGraphics.visible = true;
});
var LivesDisplay = Container.expand(function () {
	var self = Container.call(this);
	self.livesIcons = [];
	for (var i = 0; i < 3; i++) {
		var icon = self.attachAsset('lives', {
			anchorX: 0.5,
			anchorY: 0.5
		});
		icon.x = i * icon.width + i * 10;
		self.livesIcons.push(icon);
	}
	self.updateLives = function (lives) {
		for (var i = 0; i < self.livesIcons.length; i++) {
			if (i < lives) {
				self.livesIcons[i].tint = 0xFFFFFF; // Reset to white if life is available
			} else {
				self.livesIcons[i].tint = 0x000000; // Change to black if life is lost
			}
		}
	};
	self.y = 2732 / 20 - self.livesIcons[0].height / 10;
	self.x = 2048 / 1.8 - ((self.livesIcons[0].width + 10) * self.livesIcons.length - 10) / 2; // Position the lives display at the middle of the screen
});
var MultiplierDisplay = Container.expand(function () {
	var self = Container.call(this);
	self.multiplierText = new Text2('X 1', {
		size: 200,
		fill: "#ffffff",
		align: 'center',
		stroke: '#000000',
		strokeThickness: 30
	});
	self.multiplierText.anchor.set(0.5, 0);
	self.addChild(self.multiplierText);
	self.multiplierText.x = 0;
	self.multiplierText.y = 220;
	self.updateMultiplier = function (multiplier) {
		self.multiplierText.setText(multiplier.toString());
	};
});
var TailsAsset = Container.expand(function () {
	var self = Container.call(this);
	self.tailsGraphics = self.attachAsset('tails', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.tailsGraphics.visible = false;
});

/**** 
* Initialize Game
****/ 
// Later in the code, after game initialization
var game = new LK.Game({
	backgroundColor: 0x000000
});

/**** 
* Game Code
****/ 
game.resetBackground = function () {
	if (game.backgroundInstance) {
		game.backgroundInstance.resetBackground();
	}
};
game.backgroundInstance = game.addChild(new Background());
// Later in the code, after game initialization
game.livesDisplayInstance = game.addChild(new LivesDisplay());
game.updateLivesDisplay = function () {
	game.livesDisplayInstance.updateLives(game.lives);
};
game.multiplier = 1;
game.lives = 3; // Initialize the lives system with 3 lives
game.updateScoreDisplay = function () {
	scoreDisplay.setText(game.score.toString());
};
game.multiplierDisplay = LK.gui.top.addChild(new MultiplierDisplay());
game.updateMultiplierDisplay = function () {
	game.multiplierDisplay.updateMultiplier(game.multiplier);
};
game.updateMultiplierDisplay();
game.setBackgroundColor(0x5cd3ff);
game.coinFlipping = false;
game.disableButtons = function () {
	game.headsButton.interactive = false;
	game.tailsButton.interactive = false;
};
game.enableButtons = function () {
	game.headsButton.interactive = true;
	game.tailsButton.interactive = true;
};
game.coin = game.addChild(new Coin());
game.coin.x = 2048 / 2;
game.coin.y = 2732 / 2 - 100;
game.coin.on('added', function () {
	game.coin.x = 2048 / 2 - game.coin.width / 2;
	game.coin.y = 2732 / 2 - game.coin.height / 2;
});
game.headsButton = game.addChild(new ChoiceButton('heads', 'Heads Button', true));
game.headsButton.gameInstance = game;
game.headsButton.isHeads = true;
game.tailsButton = game.addChild(new ChoiceButton('tails', 'Tails Button', false));
game.tailsButton.gameInstance = game;
game.tailsButton.isHeads = false;
game.tailsButton.x = 2048 * 3 / 4;
game.tailsButton.y = 2732 - game.tailsButton.height / 2 - 100;
game.headsButton.x = 2048 / 4;
game.headsButton.y = 2732 - game.headsButton.height / 2 - 100;
Images
