Upit | Learn about creating the game Hit the slopes with gen AI

Play

Hit the slopes

octo

Hittheslopes684

55K

114

Playit

Aim, strike, score! Use limited hits for the ultimate slope-striking fun.

#puzzlegame

#arcade

#bubblepop

#casualgaming

#christmas2023

#skillbased

#hypercasual

Creation History

User prompt

I'm hitting 2 skaters with the same bubble but the combo asset doesnt appear

User prompt

I cant see the combo assets, make sure you display them over the backgrounds layer but under the skaters layer

User prompt

let's add a combo system to the game. this system can have 3 states. one for hitting 2 skaters, one for hitting 3 skaters and one for hitting 4 or more skaters at the same time. For each of these states, each state needs to have an unique associate asset, so you need to create 3 assets for each state. Only a single combo graphic can be displayed on the screen at the same time. the game checks for the combo once the released bubble reached thescreen's edge. there it checks how many skaters were destroyed using that bubble, and then it displayes one of the 3 combo assets. the assets appear in the center of the screen and stay there for a duration of 1.5 seconds before going away. there needs to be a state for hitting 2 skaters, another state for hitting 3 skaters and another state for hitting 4 or more skaters at the same time. ensure the combo assets appear under the targets layer, so it doesn't cover the targets when the combo assets appear. make sure however the combo assets do appear over the background layer.

User prompt

the skaters explosion should only be 100 miliseconds

User prompt

the skaters explosion should only be 300 miliseconds

User prompt

now add a 1 second explosion asset over the skaters once they are destroyed

User prompt

the delay between the last destroyed skater and advancing to the next level should be 500 miliseconds instead of 1000

User prompt

after destroying the last skater, insert a 1 second delay before advancing to the next level

User prompt

Fix Bug: 'ReferenceError: lastBubble is not defined' in this line: 'if (skaters.length === 0 && lastBubble && lastBubble.x > 2048 || lastBubble.x < 0 || lastBubble.y > 2732 || lastBubble.y < 0) {' Line Number: 191

User prompt

the next level should not start until the bubble that destroyed the last skater, hasn't reached the edge of the screen. so the last destroyed skater isn't the only condition that has to be cheked before advancign to the next level. you also have to check if the bubble that destroyed it has reached the screen edge

User prompt

Track the Last-Hit Bubble: Introduce a boolean variable, such as bubbleHitEdge, which indicates whether the bubble that hit the last skater has reached the screen's edge. Update the Bubble's Movement Logic: In the Bubble class, enhance the move method to check if a bubble reaches the edge of the screen. When a bubble reaches the edge, set bubbleHitEdge to true. Modify the Skater Destruction Logic: In the part of the code where a skater is destroyed by a bubble, check if this skater is the last one. If so, do not immediately trigger the next level. Instead, store a reference or a flag indicating that the last skater has been hit. Level Advancement Condition: Modify the level advancement logic to include an additional check: whether the last-hit bubble has reached the edge of the screen (bubbleHitEdge is true). The game should advance to the next level only when both conditions are met: the last skater has been destroyed, and bubbleHitEdge is true. Updating the Game Loop: In the main game loop (LK.on('tick', function () {...})), after processing the bubbles' movements and skater collisions, add a conditional check for the two criteria mentioned above. If the criteria are met, proceed to set up the next level (increment the level, reset lives, spawn new skaters, and reset bubbleHitEdge to false).

User prompt

now the game never advances to the next klevel anymore, something was broken with the last change

User prompt

the trigger for advancing to the next level is currently on the last destroyed skater. but you need to add an extra condition, and check if the bubble has also reached the edge of the screen. so you must also wait for the bubble to hit any of the screen's edges before proceeding with advancing the level

User prompt

decrease the speed of the bubble by 25%

User prompt

add yet another background, that's bellow the current background

User prompt

I don't think that worked. I finished a level with 2 extra lives but no extra score was added. you were supposed to increase my score with 5 oints for each remaining live, however 10 points were not awarded :(

User prompt

let's improve the scoring even more. for each extra remaining live the player has when the level ends, add 5 points to the score.

User prompt

change this 15 to 0 self.y = 2732 - self.bubbles[0].height - 15;

User prompt

change this 30 to 15 self.y = 2732 - self.bubbles[0].height - 30;

User prompt

I asked you to move the lives UI lower but you moved them higher

User prompt

move the lives ui 50 pixels lower

User prompt

move the lives UI 20 pixels lower

User prompt

decrease the rotation speed of the cannon by 15%

var skaters = [];
var BubbleUI = Container.expand(function () {
	var self = Container.call(this);
	self.bubbles = [];
	var bubble = self.createAsset('bubble', 'UI Bubble', 0, 0.5);
	var totalWidth = 5 * (bubble.width + 10) - 10;
	self.x = (2048 - totalWidth) / 2;
	for (var i = 0; i < 5; i++) {
		var bubble = self.createAsset('bubble', 'UI Bubble', 0, 0.5);
		bubble.x = i * (bubble.width + 10);
		bubble.y = 0;
		self.bubbles.push(bubble);
		self.addChild(bubble);
	}
	self.updateBubbles = function (lives) {
		for (var i = 0; i < self.bubbles.length; i++) {
			self.bubbles[i].tint = i < lives ? 0xFFFFFF : 0x000000;
		}
	};
	self.y = 2732 - self.bubbles[0].height;
});
var Skater = Container.expand(function () {
	var self = Container.call(this);
	var skaterGraphics = self.createAsset('skater', 'Skater Graphics', 0.5, 0.5);
	self.direction = Math.random() * 2 * Math.PI;
	self.speed = 3;
	self.rotationSpeed = 0.05;
	self.isRotating = false;
	self.rotateTimer = 0;
	self.rotateDuration = 60;
	self.move = function () {
		var newX = self.x + Math.cos(self.direction) * self.speed;
		var newY = self.y + Math.sin(self.direction) * self.speed;
		if (newX > 1798 || newX < 250) self.direction = Math.PI - self.direction;
		if (newY > 2482 || newY < 250) self.direction = -self.direction;
		self.x = newX;
		self.y = newY;
	};
	self.update = function () {
		if (self.isRotating) {
			self.rotation += self.rotationSpeed * 0.5;
			self.rotateTimer++;
			if (self.rotateTimer >= self.rotateDuration) {
				self.isRotating = false;
				self.rotateTimer = 0;
				self.direction = Math.random() * 2 * Math.PI;
			}
		} else if (Math.random() < 0.01) {
			self.isRotating = true;
		}
		self.move();
		for (var i = 0; i < skaters.length; i++) {
			if (self !== skaters[i] && self.intersects(skaters[i], 0.1)) {
				var angle = Math.atan2(skaters[i].y - self.y, skaters[i].x - self.x);
				self.direction = angle + Math.PI;
				skaters[i].direction = angle;
			}
		}
		var circleCenter = {
			x: 2048 / 2,
			y: 2732 / 2
		};
		var distanceToCenter = Math.sqrt(Math.pow(self.x - circleCenter.x, 2) + Math.pow(self.y - circleCenter.y, 2));
		if (distanceToCenter < 300) {
			var angle = Math.atan2(circleCenter.y - self.y, circleCenter.x - self.x);
			self.direction = angle + Math.PI;
		}
	};
});
var Bubble = Container.expand(function () {
	var self = Container.call(this);
	var bubbleGraphics = self.createAsset('bubble', 'Bubble Graphics', .5, .5);
	self.speed = 50;
	self.move = function () {
		self.x += Math.cos(self.rotation - Math.PI / 2) * self.speed;
		self.y += Math.sin(self.rotation - Math.PI / 2) * self.speed;
	};
});
var Shooter = Container.expand(function () {
	var self = Container.call(this);
	self.rotationAngle = 0;
	var shooterGraphics = self.createAsset('cannon', 'Cannon Graphics', 0.5, 1);
	var cannonSize = Math.min(shooterGraphics.width, shooterGraphics.height) * 0.375;
	shooterGraphics.width = cannonSize;
	shooterGraphics.height = cannonSize;
	self.rotate = function () {
		self.rotationAngle += 0.068;
		if (self.rotationAngle >= 2 * Math.PI) {
			self.rotationAngle = 0;
		}
		self.rotation = self.rotationAngle;
	};
});
var Game = Container.expand(function () {
	LK.stage.on('down', function () {
		if (self.lives > 0) {
			var newBubble = self.addChild(new Bubble());
			newBubble.rotation = shooter.rotation;
			newBubble.x = shooter.x;
			newBubble.y = shooter.y;
			bubbles.push(newBubble);
			if (self.lives > 0) {
				self.lives--;
			}
			bubbleUI.updateBubbles(self.lives);
		}
	});
	var self = Container.call(this);
	self.level = 1;
	self.lives = 5;
	var bubbleUI = self.addChild(new BubbleUI());
	bubbleUI.updateBubbles(self.lives);
	self.score = 0;
	var scoreText = new Text2(self.score.toString(), {
		size: 150,
		fill: "#ffffff",
		stroke: "#075079",
		strokeThickness: 11.25,
		font: "'Luckiest Guy', 'Arial Black', sans-serif"
	});
	scoreText.anchor.set(0.5, 0);
	LK.gui.topCenter.addChild(scoreText);
	self.spawnSkaters = function (level) {
		for (var i = 0; i < 5 + level - 1; i++) {
			var skater = self.addChild(new Skater());
			skater.x = 250 + Math.random() * (2048 - 500);
			skater.y = 250 + Math.random() * (2732 - 500);
			skaters.push(skater);
		}
	};
	self.spawnSkaters(self.level);
	var background = self.createAsset('background', 'Background Image', 0.5, 0.5);
	background.width = 2048;
	background.height = 2732;
	background.x = 2048 / 2;
	background.y = 2732 / 2;
	self.addChildAt(background, 0);
	var bubbles = [];
	var shooter = self.addChild(new Shooter());
	shooter.x = 2048 / 2;
	shooter.y = 2732 / 2;
	var circle = self.createAsset('circle', 'Red Circle', 0.5, 0.5);
	circle.width = 600;
	circle.height = 600;
	circle.alpha = 0;
	circle.x = 2048 / 2;
	circle.y = 2732 / 2;
	self.addChild(circle);
	var isGameOver = false;
	var tickOffset = 0;
	LK.on('tick', function () {
		shooter.rotate();
		if (isGameOver) {
			LK.effects.flashScreen(0xff0000, 1000);
			LK.showGameOver();
		}
		for (var i = 0; i < skaters.length; i++) {
			skaters[i].update();
		}
		for (var a = bubbles.length - 1; a >= 0; a--) {
			bubbles[a].move();
			for (var s = skaters.length - 1; s >= 0; s--) {
				if (bubbles[a].intersects(skaters[s])) {
					if (skaters[s]) {
						skaters[s].destroy();
						skaters.splice(s, 1);
						var skaterScore = bubbles[a].skatersHit ? bubbles[a].skatersHit.length + 1 : 1;
						self.score += skaterScore;
						if (!bubbles[a].skatersHit) {
							bubbles[a].skatersHit = [];
						}
						bubbles[a].skatersHit.push(skaters[s]);
						scoreText.setText(self.score.toString());
					}
					if (skaters.length === 0) {
						self.level++;
						self.lives = 5;
						bubbleUI.updateBubbles(self.lives);
						self.spawnSkaters(self.level);
					}
					break;
				}
			}
			if (bubbles[a].x > 2048 || bubbles[a].x < 0 || bubbles[a].y > 2732 || bubbles[a].y < 0 || !bubbles[a].parent) {
				bubbles[a].destroy();
				bubbles.splice(a, 1);
				if (self.lives === 0 && skaters.length > 0) {
					isGameOver = true;
				}
				if (isGameOver) {
					LK.effects.flashScreen(0xff0000, 1000);
					LK.showGameOver();
				}
			}
		}
	});
});

===================================================================
--- original.js
+++ change.js
@@ -16,9 +16,9 @@
 		for (var i = 0; i < self.bubbles.length; i++) {
 			self.bubbles[i].tint = i < lives ? 0xFFFFFF : 0x000000;
 		}
 	};
-	self.y = 2732 - self.bubbles[0].height - 15;
+	self.y = 2732 - self.bubbles[0].height;
 });
 var Skater = Container.expand(function () {
 	var self = Container.call(this);
 	var skaterGraphics = self.createAsset('skater', 'Skater Graphics', 0.5, 0.5);