Upit | Learn about creating the game Battle of Cars with gen AI

/**** 
* Classes
****/ 
// Assets will be automatically created based on usage in the code.
// Car class
var Car = Container.expand(function () {
	var self = Container.call(this);
	// Attach a car asset
	var carGraphics = self.attachAsset('car', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.previousTouchPosition = null;
	self.speedX = 0;
	self.speedY = 0;
	// Move car based on its speed
	self.move = function () {
		if (self.slidingDuration > 0) {
			self.x += self.speedX;
			self.y += self.speedY;
			self.slidingDuration--;
			if (self.slidingDuration === 0) {
				self.speedX = Math.sin(self.rotation) * 7;
				self.speedY = -Math.cos(self.rotation) * 7;
			}
		} else {
			self.x += self.speedX;
			self.y += self.speedY;
		}
	};
	// Prevent the car from moving in the opposite direction when it hits the wall
	self.checkBounds = function () {
		if (self.x < 0) {
			self.x = 0;
		} else if (self.x > 2048) {
			self.x = 2048;
		}
		if (self.y < 0) {
			self.y = 0;
		} else if (self.y > 2732) {
			self.y = 2732;
		}
	};
	self.slidingDuration = 0;
	self.setDirection = function (direction) {
		if (direction === 'left') {
			self.rotation -= 0.09;
			self.speedX += Math.sin(self.rotation) * 0.07;
			self.speedY += -Math.cos(self.rotation) * 0.07;
			self.slidingDuration = 20; // Set sliding duration to 0.5 second (30 frames)
		} else if (direction === 'right') {
			self.rotation += 0.09;
			self.speedX += Math.sin(self.rotation) * 0.07;
			self.speedY += -Math.cos(self.rotation) * 0.07;
			self.slidingDuration = 20; // Set sliding duration to 0.5 second (30 frames)
		}
		// Limit the speed to prevent the car from sliding too much
		if (self.slidingDuration > 0) {
			self.speedX = Math.min(Math.max(self.speedX, -7), 7);
			self.speedY = Math.min(Math.max(self.speedY, -7), 7);
			self.slidingDuration--;
		} else {
			self.speedX = Math.sin(self.rotation) * (self.slidingDuration > 4 && self.slidingDuration <= 7 ? 7 : 4);
			self.speedY = -Math.cos(self.rotation) * (self.slidingDuration > 4 && self.slidingDuration <= 7 ? 7 : 4);
		}
	};
});
// Enemy class
var Enemy = Container.expand(function () {
	var self = Container.call(this);
	// Attach an enemy asset
	var enemyGraphics = self.attachAsset('enemy1', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.speedX = 0;
	self.speedY = 7;
	// Move enemy based on its speed
	self.move = function () {
		self.x += self.speedX;
		self.y += self.speedY;
	};
	// Prevent the enemy from moving in the opposite direction when it hits the wall
	self.checkBounds = function () {
		if (self.x < 0) {
			self.x = 0;
		} else if (self.x > 2048) {
			self.x = 2048;
		}
		if (self.y < 0) {
			self.y = 0;
		} else if (self.y > 2732) {
			self.y = 2732;
		}
	};
	self.followPlayer = function (player) {
		// Calculate the direction vector from the enemy to the player
		var dx = player.x - self.x;
		var dy = player.y - self.y;
		// Normalize the direction vector
		var length = Math.sqrt(dx * dx + dy * dy);
		dx /= length;
		dy /= length;
		// Set the enemy's speed to move towards the player
		// Add sliding behavior to the enemy car
		self.speedX += dx * 0.05;
		self.speedY += dy * 0.05;
		if (self.slidingDuration > 0) {
			self.slidingDuration--;
			if (self.slidingDuration === 0) {
				// Calculate the direction vector from the enemy to the player
				var dx = player.x - self.x;
				var dy = player.y - self.y;
				// Normalize the direction vector
				var length = Math.sqrt(dx * dx + dy * dy);
				dx /= length;
				dy /= length;
				// Set the enemy's speed to always be 7
				self.speedX = dx * (self.slidingDuration > 5 && self.slidingDuration <= 7 ? 7 : 5);
				self.speedY = dy * (self.slidingDuration > 5 && self.slidingDuration <= 7 ? 7 : 5);
			}
		} else {
			self.slidingDuration = 90; // Set sliding duration to 2 seconds (120 frames)
		}
		// Calculate the angle of the direction vector
		var angle = Math.atan2(dy, dx);
		// Rotate the enemy car to face the player and adjust by -90 degrees
		self.rotation = angle - Math.PI / 2;
	};
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0xFFFFFF // Init game with white background
});

/**** 
* Game Code
****/ 
// Global variables
var cars = [];
// Create a single car
var car = new Car();
car.x = 2048 / 2; // Center of the screen
car.y = 2210; // Bottom of the screen
car.speedX = 0;
car.speedY = -7;
cars.push(car);
game.addChildAt(car, game.children.length);
// Create an enemy car
var enemy = new Enemy();
enemy.x = 2048 / 2; // Center of the screen
enemy.y = 510; // Top of the screen
enemy.speedX = 0;
enemy.speedY = 7;
cars.push(enemy);
game.addChildAt(enemy, game.children.length);
// Create a background for the game
var background = LK.getAsset('background', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 / 2,
	y: 2732 / 2
});
game.addChildAt(background, 0);
// Create a circle in the center of the screen
var centerCircle = LK.getAsset('Circle', {
	anchorX: 0.5,
	// Center anchor x-coordinate
	anchorY: 0.5,
	// Center anchor y-coordinate
	x: 2048 / 2,
	// Center of the screen
	y: 2732 / 2 // Center of the screen
});
game.addChildAt(centerCircle, 1);
// Handle game logic on each tick
LK.on('tick', function () {
	cars.forEach(function (car) {
		car.move();
		car.checkBounds();
		if (car === enemy) {
			if (LK.ticks > 90) {
				// Delay of 1.5 seconds (60 ticks per second)
				car.followPlayer(cars[0]); // Assume the player car is the first car in the array
			}
		}
		// Check for collisions with other cars
		cars.forEach(function (otherCar) {
			if (car !== otherCar) {
				// Calculate the distance between the centers of the two cars
				var dx = car.x - otherCar.x;
				var dy = car.y - otherCar.y;
				var distance = Math.sqrt(dx * dx + dy * dy);
				// Check if the distance is less than the sum of the radii of the two cars
				if (distance < car.width / 2 + otherCar.width / 2) {
					// On collision, move both cars 200 pixels back in the direction opposite to the point of intersection
					var moveDistance = 100;
					var moveStep = moveDistance / 10; // 60 frames for 1 second of smooth movement
					var moveX = dx / distance * moveStep;
					var moveY = dy / distance * moveStep;
					var moveCounter = 0;
					var moveInterval = LK.setInterval(function () {
						car.x += moveX;
						car.y += moveY;
						otherCar.x -= moveX;
						otherCar.y -= moveY;
						moveCounter++;
						if (moveCounter >= 10) {
							LK.clearInterval(moveInterval);
						}
					}, 1000 / 60); // 60 FPS
				}
			}
		});
		// Check if the car is outside the circle
		var distanceFromCenter = Math.sqrt(Math.pow(car.x - 2048 / 2, 2) + Math.pow(car.y - 2732 / 2, 2));
		if (distanceFromCenter > 970 && car === enemy && !car.scoreIncremented && !car.isPausing) {
			car.isPausing = true;
			LK.setTimeout(function () {
				car.isPausing = false;
			}, 1000);
			// Increment score by 1 when enemy crosses radius of 950
			LK.setScore(LK.getScore() + 1);
			// Update score text
			scoreTxt.setText(LK.getScore());
			car.scoreIncremented = true;
			// Immediately calculate direction vector from enemy to game center and normalize to move enemy further from game center without pause
			var dx = 2048 / 2 - car.x;
			var dy = 2732 / 2 - car.y;
			var length = Math.sqrt(dx * dx + dy * dy);
			dx /= length;
			dy /= length;
			// Move enemy further from game center
			car.speedX = -dx * 7;
			car.speedY = -dy * 7;
			// Shrink enemy to 1x1 pixel over 1 second upon defeat
			var shrinkDuration = 40; // 1 second at 60 FPS
			var originalWidth = car.width;
			var originalHeight = car.height;
			var shrinkInterval = LK.setInterval(function () {
				car.width = Math.max(1, car.width - (originalWidth - 1) / shrinkDuration);
				car.height = Math.max(1, car.height - (originalHeight - 1) / shrinkDuration);
				shrinkDuration--;
				if (shrinkDuration <= 0) {
					LK.clearInterval(shrinkInterval);
					// Reset enemy position to spawn point and reset scoreIncremented flag
					car.x = 2048 / 2; // Center of the screen
					car.y = 450; // Top of the screen
					car.speedX = 0;
					car.speedY = 5;
					car.scoreIncremented = false; // Reset flag to allow score increment for next crossing
					// Gradually increase enemy size to original dimensions
					var growDuration = 6; // 0.1 second at 60 FPS
					var currentWidth = car.width;
					var currentHeight = car.height;
					var widthIncrement = (originalWidth - currentWidth) / growDuration;
					var heightIncrement = (originalHeight - currentHeight) / growDuration;
					var growInterval = LK.setInterval(function () {
						car.width += widthIncrement;
						car.height += heightIncrement;
						growDuration--;
						if (growDuration <= 0) {
							LK.clearInterval(growInterval);
							car.width = 150;
							car.height = 200;
						}
					}, 1000 / 60); // 60 FPS
				}
			}, 1000 / 60); // 60 FPS
			LK.setTimeout(function () {
				// Reset player position to spawn point after 0.5 seconds
				cars[0].x = 2048 / 2; // Center of the screen
				cars[0].y = 2210; // Move respawn position 50 pixels up
				// Make player move vertically upwards
				cars[0].speedX = 0;
				cars[0].speedY = -7;
				// Reset player's rotation
				cars[0].rotation = 0;
			}, 600); // Delay for 0.5 seconds
		} else if (distanceFromCenter > 970 && car !== enemy) {
			// Shrink player car to 1x1 pixel over 1 second upon crossing radius 970
			var shrinkDuration = 40; // 1 second at 60 FPS
			var originalWidth = car.width;
			var originalHeight = car.height;
			var shrinkInterval = LK.setInterval(function () {
				car.width = Math.max(1, car.width - (originalWidth - 1) / shrinkDuration);
				car.height = Math.max(1, car.height - (originalHeight - 1) / shrinkDuration);
				shrinkDuration--;
				if (shrinkDuration <= 0) {
					LK.clearInterval(shrinkInterval);
					LK.showGameOver();
				}
			}, 1000 / 60); // 60 FPS
		}
	});
});
// Create a tab in the center of the screen and move it
var tab = LK.getAsset('tab', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 / 2,
	y: 200
});
game.addChild(tab);
var moveTabLeft = true;
var tabMoveInterval = LK.setInterval(function () {
	if (moveTabLeft) {
		tab.x -= 8;
		if (tab.x <= 2048 / 2 - 100) {
			moveTabLeft = false;
		}
	} else {
		tab.x += 8;
		if (tab.x >= 2048 / 2 + 100) {
			LK.clearInterval(tabMoveInterval);
			tab.visible = false; // Make tab disappear after moving right
		}
	}
}, 1000 / 60); // 60 FPS
// Create a score display at the top right corner of the screen
var score = typeof localStorage !== 'undefined' ? localStorage.getItem('score') || '0' : '0';
var scoreTxt = new Text2(score, {
	size: 100,
	fill: "#FFFFFF" // Changed score color to #45c6f5
});
scoreTxt.anchor.set(1, 0);
scoreTxt.x -= 30; // Move score display 30 pixels to the left
scoreTxt.y += 20; // Move score display 30 pixels down
LK.gui.topRight.addChild(scoreTxt);
// Add touch event listener to the game
var turnInterval;
var lastTouchPosition;
var isTouching = false; // Add a flag to check if the screen is being touched
var isOutside = false; // Add a flag to check if the mouse is outside the game
game.on('down', function (obj) {
	// Get the position of the touch
	var touchPosition = obj.event.getLocalPosition(game);
	// Store the initial touch position
	car.initialTouchPosition = touchPosition;
	// Store the last touch position
	lastTouchPosition = touchPosition;
	isTouching = true; // Set the flag to true when the screen is being touched
	isOutside = false; // Set the flag to false when the mouse enters the game
});
game.on('move', function (obj) {
	// Get the position of the touch
	var touchPosition = obj.event.getLocalPosition(game);
	// Update the last touch position
	lastTouchPosition = touchPosition;
	// If there is a touch event and the last touch position is to the left of the initial touch position, turn the car to the left
	if (!isOutside && isTouching && lastTouchPosition && car.initialTouchPosition) {
		if (lastTouchPosition.x < car.initialTouchPosition.x) {
			car.setDirection('left');
		} else if (lastTouchPosition.x > car.initialTouchPosition.x) {
			car.setDirection('right');
		}
		// Update the initial touch position
		car.initialTouchPosition = lastTouchPosition;
	} else if (isTouching && !isOutside) {
		// If there is no touch event, the car moves straight
		car.setDirection('straight');
	}
});
game.on('up', function (obj) {
	// Reset the last touch position when the touch is released
	lastTouchPosition = null;
	isTouching = false; // Set the flag to false when the touch is released
	isOutside = true; // Set the flag to true when the mouse leaves the game
});
Images
