Upit | Learn about creating the game Skyfall Siege with gen AI

/**** * Classes ****/ // A green circle // No plugins needed for this version. var BouncingCircle = Container.expand(function () { var self = Container.call(this); // Methods must be defined before being potentially called by the engine self.update = function () { // Update position based on current speed self.x += self.speedX; self.y += self.speedY; // Get dimensions for boundary checks (anchor is 0.5, 0.5) var halfWidth = self.circleGraphic.width / 2; var halfHeight = self.circleGraphic.height / 2; // Game world dimensions var worldWidth = 2048; var worldHeight = 2732; // Check for collision with horizontal walls if (self.x - halfWidth <= 0) { // Hit left wall self.x = halfWidth; // Clamp position to prevent sticking if (self.speedX < 0) { // Only reverse if moving towards wall self.speedX *= -1; } } else if (self.x + halfWidth >= worldWidth) { // Hit right wall self.x = worldWidth - halfWidth; // Clamp position if (self.speedX > 0) { // Only reverse if moving towards wall self.speedX *= -1; } } // Check for collision with vertical walls if (self.y - halfHeight <= 0) { // Hit top wall self.y = halfHeight; // Clamp position if (self.speedY < 0) { // Only reverse if moving towards wall self.speedY *= -1; } } else if (self.y + halfHeight >= worldHeight) { // Hit bottom wall self.y = worldHeight - halfHeight; // Clamp position if (self.speedY > 0) { // Only reverse if moving towards wall self.speedY *= -1; } } // Store current position as last position for the next frame (useful for more complex physics or event detection) self.lastX = self.x; self.lastY = self.y; }; // Attach the visual asset to this container // The asset 'bouncingCircleAsset' needs to be defined in the Assets section self.circleGraphic = self.attachAsset('bouncingCircleAsset', { anchorX: 0.5, // Center anchor for easier positioning anchorY: 0.5 }); // Movement properties to be initialized when an instance is created self.speedX = 0; self.speedY = 0; // Store last known position (initialized when circle is created) self.lastX = 0; self.lastY = 0; return self; // Important for class structure }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x202040 // A nice dark blue/purple background }); /**** * Game Code ****/ // Game dimensions are 2048x2732 (width x height) // Create an instance of our BouncingCircle class var circle = new BouncingCircle(); // Position the circle in the center of the screen. // Its graphic asset has anchorX: 0.5, anchorY: 0.5, so this centers it. circle.x = 2048 / 2; circle.y = 2732 / 2; // Initialize its lastX and lastY properties to its starting position circle.lastX = circle.x; circle.lastY = circle.y; // Set a random initial direction and speed for the circle var initialSpeedMagnitude = 8; // Adjust this value for faster or slower movement (pixels per frame) var randomAngle = Math.random() * 2 * Math.PI; // Generates a random angle in radians (0 to 2*PI) circle.speedX = initialSpeedMagnitude * Math.cos(randomAngle); circle.speedY = initialSpeedMagnitude * Math.sin(randomAngle); // Safety check: if somehow both speeds are zero (highly unlikely with non-zero magnitude), give it a default push. if (circle.speedX === 0 && circle.speedY === 0 && initialSpeedMagnitude !== 0) { circle.speedX = initialSpeedMagnitude; // Default to moving right } // Add the circle instance to the game's display list. // The LK engine will automatically call the .update() method of 'circle' each frame. game.addChild(circle); // No explicit game.update() function is required for this simple game, // as the circle's movement and logic are self-contained in its BouncingCircle.update() method. // If we had other global game logic that needed to run every frame (e.g., checking win/loss conditions, // spawning new objects), we would define game.update = function() { ... }; here.

===================================================================
--- original.js
+++ change.js
@@ -1,370 +1,106 @@
 /**** 
-* Plugins
-****/ 
-var tween = LK.import("@upit/tween.v1");
-
-/**** 
 * Classes
 ****/ 
-var Obstacle = Container.expand(function (type) {
+// A green circle
+// No plugins needed for this version.
+var BouncingCircle = Container.expand(function () {
 	var self = Container.call(this);
-	// Type can be "harmful" or "collectible"
-	self.type = type || "harmful";
-	// Set properties based on type
-	if (self.type === "harmful") {
-		var obstacleGraphics = self.attachAsset('Shape', {
-			width: 80,
-			height: 80,
-			shape: 'box',
-			color: 0xFF0000,
-			anchorX: 0.5,
-			anchorY: 0.5
-		});
-		// Add spike-like appearance
-		obstacleGraphics.rotation = Math.PI / 4; // 45 degrees rotation
-	} else {
-		var obstacleGraphics = self.attachAsset('Shape', {
-			width: 60,
-			height: 60,
-			shape: 'ellipse',
-			color: 0x00FF00,
-			anchorX: 0.5,
-			anchorY: 0.5
-		});
-		// Make collectibles pulsate
-		tween(obstacleGraphics, {
-			scaleX: 1.2,
-			scaleY: 1.2
-		}, {
-			duration: 500,
-			easing: tween.easeInOut,
-			loop: true,
-			yoyo: true
-		});
-	}
-	// Movement properties
-	self.speedX = 0;
-	self.speedY = 0;
-	self.lastX = 0;
-	self.lastY = 0;
-	// Update position and check boundaries
+	// Methods must be defined before being potentially called by the engine
 	self.update = function () {
-		// Store last position
-		self.lastX = self.x;
-		self.lastY = self.y;
-		// Move obstacle
+		// Update position based on current speed
 		self.x += self.speedX;
 		self.y += self.speedY;
-		// Check if off-screen
-		if (self.x < -100 || self.x > 2148 || self.y < -100 || self.y > 2832) {
-			return true; // Return true to indicate this obstacle should be removed
-		}
-		return false;
-	};
-	return self;
-});
-// Set background color
-var SlimePhysics = Container.expand(function () {
-	var self = Container.call(this);
-	// State variables for slime physics
-	self.baseY = 0;
-	self.jumping = false;
-	self.deforming = false;
-	self.defaultRadius = 100;
-	self.currentRadius = self.defaultRadius;
-	self.pulseAmount = 0;
-	self.pulseDirection = 1;
-	self.lastIntersecting = false;
-	// Create the slime body
-	var slimeBody = self.attachAsset('Slime', {
-		anchorX: 0.5,
-		anchorY: 0.5,
-		scaleX: 1,
-		scaleY: 1,
-		alpha: 0.9
-	});
-	// Reference to body for animations
-	self.body = slimeBody;
-	// Apply initial deformation for idle state
-	self.pulseIdle = function () {
-		if (!self.deforming && !self.jumping) {
-			self.pulseAmount += 0.005 * self.pulseDirection;
-			if (self.pulseAmount > 0.1 || self.pulseAmount < -0.05) {
-				self.pulseDirection *= -1;
+		// Get dimensions for boundary checks (anchor is 0.5, 0.5)
+		var halfWidth = self.circleGraphic.width / 2;
+		var halfHeight = self.circleGraphic.height / 2;
+		// Game world dimensions
+		var worldWidth = 2048;
+		var worldHeight = 2732;
+		// Check for collision with horizontal walls
+		if (self.x - halfWidth <= 0) {
+			// Hit left wall
+			self.x = halfWidth; // Clamp position to prevent sticking
+			if (self.speedX < 0) {
+				// Only reverse if moving towards wall
+				self.speedX *= -1;
 			}
-			// Apply subtle breathing deformation
-			self.body.scaleX = 1 + self.pulseAmount;
-			self.body.scaleY = 1 - self.pulseAmount;
+		} else if (self.x + halfWidth >= worldWidth) {
+			// Hit right wall
+			self.x = worldWidth - halfWidth; // Clamp position
+			if (self.speedX > 0) {
+				// Only reverse if moving towards wall
+				self.speedX *= -1;
+			}
 		}
-	};
-	// Jump method with deformation
-	self.jump = function () {
-		if (!self.jumping) {
-			self.jumping = true;
-			// Squish before jumping
-			tween(self.body, {
-				scaleY: 0.7,
-				scaleX: 1.3
-			}, {
-				duration: 80,
-				easing: tween.easeOut,
-				onFinish: function onFinish() {
-					// Start actual jump
-					tween(self, {
-						y: self.baseY - 300
-					}, {
-						duration: 350,
-						easing: tween.easeOutQuad,
-						onFinish: function onFinish() {
-							// Start falling
-							tween(self, {
-								y: self.baseY
-							}, {
-								duration: 350,
-								easing: tween.easeInQuad,
-								onFinish: function onFinish() {
-									// Land with impact deformation
-									tween(self.body, {
-										scaleY: 0.6,
-										scaleX: 1.4
-									}, {
-										duration: 100,
-										easing: tween.easeOut,
-										onFinish: function onFinish() {
-											// Return to normal shape
-											tween(self.body, {
-												scaleY: 1,
-												scaleX: 1
-											}, {
-												duration: 250,
-												easing: tween.elasticOut,
-												onFinish: function onFinish() {
-													self.jumping = false;
-												}
-											});
-										}
-									});
-								}
-							});
-							// While in air, stretch vertically
-							tween(self.body, {
-								scaleY: 1.2,
-								scaleX: 0.9
-							}, {
-								duration: 200,
-								easing: tween.easeInOut
-							});
-						}
-					});
-				}
-			});
-		}
-	};
-	// React to approaching objects
-	self.reactToObject = function (objectX, objectY) {
-		if (!self.deforming && !self.jumping) {
-			// Calculate which direction to deform based on object position
-			var dx = objectX - self.x;
-			var dy = objectY - self.y;
-			var distance = Math.sqrt(dx * dx + dy * dy);
-			if (distance < 300) {
-				self.deforming = true;
-				// Deform away from the approaching object
-				var deformX = 1 - Math.abs(dx) / 500;
-				var deformY = 1 - Math.abs(dy) / 500;
-				if (dx > 0) {
-					deformX = 1 / deformX;
-				}
-				if (dy > 0) {
-					deformY = 1 / deformY;
-				}
-				// Apply deformation
-				tween(self.body, {
-					scaleX: deformX,
-					scaleY: deformY
-				}, {
-					duration: 100,
-					easing: tween.easeOut,
-					onFinish: function onFinish() {
-						// Return to normal shape
-						tween(self.body, {
-							scaleX: 1,
-							scaleY: 1
-						}, {
-							duration: 200,
-							easing: tween.elasticOut,
-							onFinish: function onFinish() {
-								self.deforming = false;
-							}
-						});
-					}
-				});
+		// Check for collision with vertical walls
+		if (self.y - halfHeight <= 0) {
+			// Hit top wall
+			self.y = halfHeight; // Clamp position
+			if (self.speedY < 0) {
+				// Only reverse if moving towards wall
+				self.speedY *= -1;
 			}
+		} else if (self.y + halfHeight >= worldHeight) {
+			// Hit bottom wall
+			self.y = worldHeight - halfHeight; // Clamp position
+			if (self.speedY > 0) {
+				// Only reverse if moving towards wall
+				self.speedY *= -1;
+			}
 		}
+		// Store current position as last position for the next frame (useful for more complex physics or event detection)
+		self.lastX = self.x;
+		self.lastY = self.y;
 	};
-	// Down handler for jumping
-	self.down = function (x, y, obj) {
-		self.jump();
-	};
-	// Update method called automatically by LK
-	self.update = function () {
-		self.pulseIdle();
-	};
-	return self;
+	// Attach the visual asset to this container
+	// The asset 'bouncingCircleAsset' needs to be defined in the Assets section
+	self.circleGraphic = self.attachAsset('bouncingCircleAsset', {
+		anchorX: 0.5,
+		// Center anchor for easier positioning
+		anchorY: 0.5
+	});
+	// Movement properties to be initialized when an instance is created
+	self.speedX = 0;
+	self.speedY = 0;
+	// Store last known position (initialized when circle is created)
+	self.lastX = 0;
+	self.lastY = 0;
+	return self; // Important for class structure
 });
 
 /**** 
 * Initialize Game
 ****/ 
 var game = new LK.Game({
-	backgroundColor: 0x000000
+	backgroundColor: 0x202040 // A nice dark blue/purple background
 });
 
 /**** 
 * Game Code
 ****/ 
-// Set background color
-game.setBackgroundColor(0x2C3E50);
-// Create score text
-var scoreTxt = new Text2('0', {
-	size: 100,
-	fill: 0xFFFFFF
-});
-scoreTxt.anchor.set(0.5, 0);
-LK.gui.top.addChild(scoreTxt);
-// Add instruction text
-var instructionTxt = new Text2('Tap to JUMP!\nDodge red obstacles\nCollect green items', {
-	size: 70,
-	fill: 0xFFFFFF,
-	align: 'center'
-});
-instructionTxt.anchor.set(0.5, 0.5);
-instructionTxt.x = 1024;
-instructionTxt.y = 300;
-game.addChild(instructionTxt);
-// Hide instructions after a few seconds
-LK.setTimeout(function () {
-	tween(instructionTxt, {
-		alpha: 0
-	}, {
-		duration: 1000,
-		easing: tween.easeOut
-	});
-}, 5000);
-// Add automatic tutorial jump after 2 seconds
-LK.setTimeout(function () {
-	slime.jump();
-}, 2000);
-// Create slime character
-var slime = new SlimePhysics();
-slime.x = 150; // Position on left side of screen
-slime.y = 2732 / 2; // Middle of screen height
-slime.baseY = slime.y;
-game.addChild(slime);
-// Create arrays to track game objects
-var obstacles = [];
-var score = 0;
-// Spawn obstacles on a timer
-var obstacleTimer = LK.setInterval(function () {
-	var type = Math.random() > 0.3 ? "harmful" : "collectible"; // 70% harmful, 30% collectible
-	var obstacle = new Obstacle(type);
-	// Position obstacles to come from right side
-	obstacle.x = 2148; // Start from right edge
-	// Random Y position - either at slime level or above for jumping
-	var positionType = Math.random() > 0.5 ? "level" : "above";
-	if (positionType === "level") {
-		// At same level as slime
-		obstacle.y = slime.y;
-	} else {
-		// Above slime requiring a jump to collect
-		obstacle.y = slime.y - 250;
-	}
-	// Always move from right to left
-	obstacle.speedX = -8 - Math.random() * 5;
-	obstacle.speedY = 0; // No vertical movement
-	obstacle.lastX = obstacle.x;
-	obstacle.lastY = obstacle.y;
-	obstacle.lastIntersecting = false;
-	obstacles.push(obstacle);
-	game.addChild(obstacle);
-}, 700);
-// Game update loop
-game.update = function () {
-	// Update obstacles and check collisions
-	for (var i = obstacles.length - 1; i >= 0; i--) {
-		var obstacle = obstacles[i];
-		// Update obstacle and check if it's gone off-screen
-		if (obstacle.update()) {
-			obstacle.destroy();
-			obstacles.splice(i, 1);
-			continue;
-		}
-		// Check for intersections with slime
-		var currentIntersecting = obstacle.intersects(slime);
-		if (!obstacle.lastIntersecting && currentIntersecting) {
-			// We just started intersecting
-			if (obstacle.type === "harmful") {
-				// Harmful object collision
-				LK.effects.flashScreen(0xFF0000, 500);
-				LK.getSound('Shut').play();
-				// Game over after a brief delay
-				LK.setTimeout(function () {
-					LK.showGameOver();
-				}, 500);
-			} else {
-				// Collectible object collision
-				LK.getSound('Bonus').play();
-				score += 10;
-				scoreTxt.setText(score);
-				// Flash slime with green tint
-				LK.effects.flashObject(slime, 0x00FF00, 500);
-				// Remove collectible
-				obstacle.destroy();
-				obstacles.splice(i, 1);
-			}
-			continue;
-		}
-		// Update lastIntersecting state
-		obstacle.lastIntersecting = currentIntersecting;
-		// Make slime react to close obstacles
-		if (obstacle.type === "harmful" && obstacle.y === slime.y) {
-			// Calculate distance to slime
-			var dx = obstacle.x - slime.x;
-			var dy = obstacle.y - slime.y;
-			var distance = Math.sqrt(dx * dx + dy * dy);
-			// React when obstacle gets close - suggest jumping
-			if (distance < 400 && distance > 300) {
-				// Visual cue to jump - flash slime
-				if (Math.floor(LK.ticks / 5) % 2 === 0) {
-					slime.body.alpha = 0.7;
-				} else {
-					slime.body.alpha = 1;
-				}
-				slime.reactToObject(obstacle.x, obstacle.y);
-			} else if (distance <= 300) {
-				slime.body.alpha = 1;
-				slime.reactToObject(obstacle.x, obstacle.y);
-			} else {
-				slime.body.alpha = 0.9;
-			}
-		} else if (obstacle.type === "collectible" && obstacle.y < slime.y) {
-			// Visual cue for collectibles above - suggest jumping to collect
-			var dx = obstacle.x - slime.x;
-			var distance = Math.abs(dx);
-			if (distance < 400 && distance > 300) {
-				// Visual cue to jump for collectible
-				if (Math.floor(LK.ticks / 5) % 2 === 0) {
-					slime.body.tint = 0x00FFFF;
-				} else {
-					slime.body.tint = 0xFFFFFF;
-				}
-			} else {
-				slime.body.tint = 0xFFFFFF;
-			}
-		}
-	}
-};
-// Handle touch/mouse events for the game
-game.down = function (x, y, obj) {
-	slime.jump();
-};
\ No newline at end of file
+// Game dimensions are 2048x2732 (width x height)
+// Create an instance of our BouncingCircle class
+var circle = new BouncingCircle();
+// Position the circle in the center of the screen.
+// Its graphic asset has anchorX: 0.5, anchorY: 0.5, so this centers it.
+circle.x = 2048 / 2;
+circle.y = 2732 / 2;
+// Initialize its lastX and lastY properties to its starting position
+circle.lastX = circle.x;
+circle.lastY = circle.y;
+// Set a random initial direction and speed for the circle
+var initialSpeedMagnitude = 8; // Adjust this value for faster or slower movement (pixels per frame)
+var randomAngle = Math.random() * 2 * Math.PI; // Generates a random angle in radians (0 to 2*PI)
+circle.speedX = initialSpeedMagnitude * Math.cos(randomAngle);
+circle.speedY = initialSpeedMagnitude * Math.sin(randomAngle);
+// Safety check: if somehow both speeds are zero (highly unlikely with non-zero magnitude), give it a default push.
+if (circle.speedX === 0 && circle.speedY === 0 && initialSpeedMagnitude !== 0) {
+	circle.speedX = initialSpeedMagnitude; // Default to moving right
+}
+// Add the circle instance to the game's display list.
+// The LK engine will automatically call the .update() method of 'circle' each frame.
+game.addChild(circle);
+// No explicit game.update() function is required for this simple game,
+// as the circle's movement and logic are self-contained in its BouncingCircle.update() method.
+// If we had other global game logic that needed to run every frame (e.g., checking win/loss conditions,
+// spawning new objects), we would define game.update = function() { ... }; here.
\ No newline at end of file

Creation History

Images

Sounds & Music