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

/**** 
* Classes
****/
// Explosion class
var Explosion = Container.expand(function () {
	var self = Container.call(this);
	var explosionGraphics = self.attachAsset('explosion', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.show = function (x, y) {
		self.x = x;
		self.y = y;
		self.alpha = 1;
		// Set a timeout to hide the explosion after 2 seconds
		LK.setTimeout(function () {
			self.destroy();
		}, 2000);
	};
});
// RightPaddle class
var RightPaddle = Container.expand(function () {
	var self = Container.call(this);
	var paddleGraphics = self.attachAsset('rightPaddle', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.speed = 10;
	self.moveUp = function () {
		self.y -= self.speed;
	};
	self.moveDown = function () {
		self.y += self.speed;
	};
});
// LeftPaddle class
var LeftPaddle = Container.expand(function () {
	var self = Container.call(this);
	var paddleGraphics = self.attachAsset('leftPaddle', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.speed = 10;
	self.moveUp = function () {
		self.y -= self.speed;
	};
	self.moveDown = function () {
		self.y += self.speed;
	};
});
// Ball class
var Ball = Container.expand(function () {
	var self = Container.call(this);
	this.ballGraphics = null;
	var ballAsset = Math.random() < 0.5 ? 'ball' : 'ball2';
	this.ballGraphics = self.attachAsset(ballAsset, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.velocity = {
		x: 5,
		y: 5
	};
	self.move = function () {
		self.x += self.velocity.x;
		self.y += self.velocity.y;
	};
	self.reset = function () {
		self.x = 2048 / 2;
		self.y = 2732 / 2;
		var randomDirection = Math.random() < 0.5 ? -1 : 1;
		self.velocity = {
			x: 5 * randomDirection,
			y: Math.random() * 8 - 4
		};
		// Smoothly swap the ball asset with a fade out and fade in effect
		self.removeChild(self.ballGraphics);
		var newBallAsset = self.velocity.x < 0 ? 'ball' : 'ball2';
		self.ballGraphics = self.attachAsset(newBallAsset, {
			anchorX: 0.5,
			anchorY: 0.5,
			alpha: 0 // Start fully transparent
		});
		// Animate the alpha property to fade in the new ball
		var fadeDuration = 30; // Duration in ticks
		var fadeStep = 1 / fadeDuration;
		var currentTick = 0;
		var fadeIn = function fadeIn() {
			if (currentTick < fadeDuration) {
				self.ballGraphics.alpha += fadeStep;
				currentTick++;
			} else {
				LK.off('tick', fadeIn); // Stop the animation when done
			}
		};
		LK.on('tick', fadeIn);
	};
});
// Background class
var Background = Container.expand(function () {
	var self = Container.call(this);
	var backgroundGraphics = self.attachAsset('background', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Set background to cover the entire game area
	backgroundGraphics.width = 2048;
	backgroundGraphics.height = 2732;
	// Position the background in the center
	self.x = 2048 / 2;
	self.y = 2732 / 2;
});
// Health class
var Health = Container.expand(function () {
	var self = Container.call(this);
	var healthGraphics = self.attachAsset('health', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Set the initial alpha to fully visible
	self.alpha = 1;
	// Position the health icon based on its index
	self.setPosition = function (index, totalIcons) {
		var iconWidth = healthGraphics.width;
		var spacing = 10;
		var totalWidth = totalIcons * (iconWidth + spacing) - spacing;
		self.x = (2048 - totalWidth) / 2 + index * (iconWidth + spacing);
		self.y = 100;
	};
});
// Coin class
var Coin = Container.expand(function () {
	var self = Container.call(this);
	var coinGraphics = self.attachAsset('coin', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.show = function (x, y) {
		self.x = x;
		self.y = y;
		self.alpha = 1;
		// Set a timeout to hide the coin after 2 seconds
		LK.setTimeout(function () {
			self.destroy();
		}, 2000);
	};
});
// Coffer class
var Coffer = Container.expand(function () {
	var self = Container.call(this);
	var cofferGraphics = self.attachAsset('coffer', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.show = function () {
		// Position the coffer at a random location
		do {
			self.x = Math.random() * (2048 - cofferGraphics.width - 1000) + 500 + cofferGraphics.width / 2;
			self.y = Math.random() * (2732 - cofferGraphics.height - 1000) + 500 + cofferGraphics.height / 2;
		} while (Math.hypot(ball.x - self.x, ball.y - self.y) < 200 || self.x < 500 + cofferGraphics.width / 2 || self.x > 2048 - 500 - cofferGraphics.width / 2 || self.y < 500 + cofferGraphics.height / 2 || self.y > 2732 - 500 - cofferGraphics.height / 2);
		self.alpha = 1;
		self.intersected = false;
		// Set a timeout to hide the coffer after 10 seconds
		LK.setTimeout(function () {
			if (!self.intersected) {
				self.destroy();
			}
		}, 10000);
	};
});
// Cannonball class
var Cannonball = Container.expand(function () {
	var self = Container.call(this);
	var cannonballGraphics = self.attachAsset('cannonball', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.speed = -10;
	self.move = function () {
		self.y += self.speed;
		// Start fading the cannonball 1000 pixels before the top edge of the screen
		if (self.y < 1000) {
			var fadeOutStep = self.alpha / (1000 / Math.abs(self.speed));
			self.alpha -= fadeOutStep;
			if (self.alpha < 0) {
				self.alpha = 0;
			} // Ensure alpha doesn't go below 0
		}
	};
	self.reset = function () {
		self.x = Math.random() * (2048 - 1000 - cannonballGraphics.width) + 500 + cannonballGraphics.width / 2;
		self.y = 2732 - cannonballGraphics.height / 2;
		self.alpha = 0; // Start fully transparent
		var fadeInDuration = 60; // Duration in ticks (1 second at 60FPS)
		var fadeStep = 1 / fadeInDuration;
		var fadeInTick = 0;
		var fadeIn = function fadeIn() {
			if (fadeInTick < fadeInDuration) {
				self.alpha += fadeStep;
				fadeInTick++;
			} else {
				LK.off('tick', fadeIn); // Stop the animation when done
			}
		};
		LK.on('tick', fadeIn);
	};
});

/**** 
* Initialize Game
****/
// Initialize paddles and ball
// Define the paddle asset
// Define the ball asset
var game = new LK.Game({
	backgroundColor: 0x92c7f3 // Init game with blue background
});

/**** 
* Game Code
****/
// Instantiate and add background to the game
var background = game.addChild(new Background());
// Define the ball asset
// Define the paddle asset
// Initialize paddles
var leftPaddle = game.addChild(new LeftPaddle());
var rightPaddle = game.addChild(new RightPaddle());
var ball = game.addChild(new Ball());
// Set initial positions
leftPaddle.x = 50;
leftPaddle.y = 2732 / 2;
rightPaddle.x = 2048 - 50;
rightPaddle.y = 2732 / 2;
// Initialize health icons
var healthIcons = [];
var totalHealthIcons = 3; // Set the initial total health icons to 3
var maxHealthIcons = 10; // Set the limit on the maximum number of health icons to 10
for (var i = 0; i < totalHealthIcons; i++) {
	var healthIcon = game.addChild(new Health());
	healthIcon.setPosition(i, totalHealthIcons);
	healthIcons.push(healthIcon);
}
ball.reset();
// Game tick event
LK.on('tick', function () {
	// Move the ball
	ball.move();
	// Ball collision with top and bottom
	if (ball.y <= 0 || ball.y >= 2732) {
		ball.velocity.y *= -1;
	}
	// Ball collision with paddles and adjust the rebound angle
	if (ball.intersects(leftPaddle) && ball.velocity.x < 0 || ball.intersects(rightPaddle) && ball.velocity.x > 0) {
		ball.velocity.x *= -1;
		// Randomize the rebound angle slightly to prevent endless bouncing
		ball.velocity.y += (Math.random() - 0.5) * 4;
		// Ensure the ball's vertical velocity is within bounds
		if (ball.velocity.y > 5) {
			ball.velocity.y = 5;
		}
		if (ball.velocity.y < -5) {
			ball.velocity.y = -5;
		}
		// Initiate fade out of the current ball asset
		ball.ballGraphics.alpha = 1;
		var fadeOutDuration = 15; // Duration in ticks for fade out
		var fadeStep = 1 / fadeOutDuration;
		var fadeOutTick = 0;
		var fadeOut = function fadeOut() {
			if (fadeOutTick < fadeOutDuration) {
				ball.ballGraphics.alpha -= fadeStep;
				fadeOutTick++;
			} else {
				LK.off('tick', fadeOut);
				// After fade out, swap the ball asset and fade it in
				ball.removeChild(ball.ballGraphics);
				var newBallAsset = ball.velocity.x < 0 ? 'ball' : 'ball2';
				ball.ballGraphics = ball.attachAsset(newBallAsset, {
					anchorX: 0.5,
					anchorY: 0.5,
					alpha: 0 // Start fully transparent
				});
				// Animate the alpha property to fade in the new ball
				var fadeInDuration = 15; // Duration in ticks for fade in
				var fadeInStep = 1 / fadeInDuration;
				var fadeInTick = 0;
				var fadeIn = function fadeIn() {
					if (fadeInTick < fadeInDuration) {
						ball.ballGraphics.alpha += fadeInStep;
						fadeInTick++;
					} else {
						LK.off('tick', fadeIn); // Stop the animation when done
					}
				};
				LK.on('tick', fadeIn);
			}
		};
		LK.on('tick', fadeOut);
	}
	// Ball out of bounds
	if (ball.x <= 0 || ball.x >= 2048) {
		LK.showGameOver();
	}
	// Chest appearance and interaction logic
	var coffers = game.children.filter(function (child) {
		return child instanceof Coffer;
	});
	coffers.forEach(function (coffer) {
		if (coffer.intersects(ball) && !coffer.intersected) {
			coffer.intersected = true;
			// Add one health icon without exceeding the maxHealthIcons limit
			if (healthIcons.length < maxHealthIcons) {
				var healthIcon = game.addChild(new Health());
				healthIcons.push(healthIcon);
				// Realign all health icons in the middle
				healthIcons.forEach(function (icon, index) {
					icon.setPosition(index, healthIcons.length);
				});
				updateCannonballTimer();
			}
			coffer.destroy();
		}
	});
	// Cannonball collision with ball and show explosion
	var cannonballs = game.children.filter(function (child) {
		return child instanceof Cannonball;
	});
	cannonballs.forEach(function (cannonball) {
		if (cannonball.intersects(ball)) {
			// Remove one health
			if (healthIcons.length > 0) {
				var lastHealthIcon = healthIcons.pop();
				lastHealthIcon.destroy();
				// Realign all health icons in the middle
				healthIcons.forEach(function (icon, index) {
					icon.setPosition(index, healthIcons.length);
				});
				updateCannonballTimer();
			}
			// If no health left, end the game
			if (healthIcons.length === 0) {
				LK.showGameOver();
			}
			// Show explosion
			var explosion = game.addChild(new Explosion());
			explosion.show(ball.x, ball.y);
			// Destroy the cannonball
			if (cannonball) {
				cannonball.destroy();
			}
		}
	});
}); // Game tick event
LK.on('tick', function () {
	// Move the ball
	ball.move();
	// Ball collision with top and bottom
	if (ball.y <= 0 || ball.y >= 2732) {
		ball.velocity.y *= -1;
	}
	// Ball collision with paddles and initiate a smoother ball asset transition
	if (ball.intersects(leftPaddle) && ball.velocity.x < 0 || ball.intersects(rightPaddle) && ball.velocity.x > 0) {
		ball.velocity.x *= -1;
		// Initiate fade out of the current ball asset
		ball.ballGraphics.alpha = 1;
		var fadeOutDuration = 15; // Duration in ticks for fade out
		var fadeStep = 1 / fadeOutDuration;
		var fadeOutTick = 0;
		var fadeOut = function fadeOut() {
			if (fadeOutTick < fadeOutDuration) {
				ball.ballGraphics.alpha -= fadeStep;
				fadeOutTick++;
			} else {
				LK.off('tick', fadeOut);
				// After fade out, swap the ball asset and fade it in
				ball.removeChild(ball.ballGraphics);
				var newBallAsset = ball.velocity.x < 0 ? 'ball' : 'ball2';
				ball.ballGraphics = ball.attachAsset(newBallAsset, {
					anchorX: 0.5,
					anchorY: 0.5,
					alpha: 0 // Start fully transparent
				});
				// Animate the alpha property to fade in the new ball
				var fadeInDuration = 15; // Duration in ticks for fade in
				var fadeInStep = 1 / fadeInDuration;
				var fadeInTick = 0;
				var fadeIn = function fadeIn() {
					if (fadeInTick < fadeInDuration) {
						ball.ballGraphics.alpha += fadeInStep;
						fadeInTick++;
					} else {
						LK.off('tick', fadeIn); // Stop the animation when done
					}
				};
				LK.on('tick', fadeIn);
			}
		};
		LK.on('tick', fadeOut);
	}
	// Ball out of bounds
	if (ball.x <= 0 || ball.x >= 2048) {
		ball.reset();
	}
	// Move cannonballs
	game.children.forEach(function (child) {
		if (child instanceof Cannonball) {
			child.move();
			// Remove cannonball if it goes off the top of the screen
			if (child.y + child.height / 2 < 0) {
				child.destroy();
			}
		}
	});
});
// Touch event listeners for paddles
game.on('down', function (obj) {
	var event = obj.event;
	var pos = event.getLocalPosition(game);
	// Determine which paddle to control based on touch position
	if (pos.x < 2048 / 2) {
		leftPaddle.y = pos.y;
	} else {
		rightPaddle.y = pos.y;
	}
});
game.on('move', function (obj) {
	var event = obj.event;
	var pos = event.getLocalPosition(game);
	// Update paddle position based on touch movement
	if (pos.x < 2048 / 2) {
		leftPaddle.y = pos.y;
	} else {
		rightPaddle.y = pos.y;
	}
}); // Timer to launch a cannonball every 10 seconds
var cofferTimer = LK.setInterval(function () {
	var newCoffer = new Coffer();
	newCoffer.show();
	game.addChild(newCoffer);
}, 10000);
var cannonballInterval = 10000;
var updateCannonballTimer = function updateCannonballTimer() {
	if (healthIcons.length >= 4) {
		cannonballInterval = 5000;
	} else if (healthIcons.length <= 2) {
		cannonballInterval = 20000;
	} else {
		cannonballInterval = 10000;
	}
	LK.clearInterval(cannonballTimer);
	cannonballTimer = LK.setInterval(function () {
		var newCannonball = new Cannonball();
		newCannonball.reset();
		game.addChild(newCannonball);
	}, cannonballInterval);
};
var cannonballTimer = LK.setInterval(function () {
	var newCannonball = new Cannonball();
	newCannonball.reset();
	game.addChild(newCannonball);
}, cannonballInterval);
Images
