Upit | Learn about creating the game Starship Onslaught with gen AI

/**** * Classes ****/ var FireButton = Container.expand(function () { var self = Container.call(this); self.buttonSprite = self.attachAsset('fireButtonSprite', { anchorX: 0.5, anchorY: 0.5 }); self.down = function (x, y, obj) { // Check if playerShip exists and projectileSpawnPoint is defined if (playerShip && typeof playerShip.currentAngle !== 'undefined' && typeof projectileSpawnPoint !== 'undefined' && playerProjectiles && PlayerProjectile) { var newProjectile = new PlayerProjectile(playerShip.currentAngle); // Pass the ship's current firing angle newProjectile.x = projectileSpawnPoint.x; // Set initial position from calculated spawn point newProjectile.y = projectileSpawnPoint.y; // lastY initialization is no longer needed as PlayerProjectile handles its state differently. playerProjectiles.push(newProjectile); game.addChild(newProjectile); // Add projectiles to the main game stage // Future enhancement: LK.getSound('shoot').play(); if a shoot sound is added } }; return self; }); // Red circular fire button var Joystick = Container.expand(function () { var self = Container.call(this); self.baseSprite = self.attachAsset('joystickBaseSprite', { anchorX: 0.5, anchorY: 0.5 }); self.knobSprite = self.attachAsset('joystickKnobSprite', { anchorX: 0.5, anchorY: 0.5 }); // Maximum distance the knob's center can move from the base's center self.radius = self.baseSprite.width / 2 - self.knobSprite.width / 2; if (self.radius <= 0) { // Ensure a sensible minimum radius self.radius = self.baseSprite.width > 0 ? self.baseSprite.width / 4 : 50; // Use 1/4 of base width or 50 if base has no width } self.isDragging = false; self.inputVector = { x: 0, y: 0 }; // Normalized output (-1 to 1) self.handleDown = function (localX, localY) { // localX, localY are relative to the joystick's center (its origin) // Check if the touch is within the larger base area to start dragging var distSqFromCenter = localX * localX + localY * localY; if (distSqFromCenter <= self.baseSprite.width / 2 * (self.baseSprite.width / 2)) { self.isDragging = true; self.handleMove(localX, localY); // Snap knob to initial touch position return true; // Indicates joystick took control } return false; // Joystick not activated }; self.handleMove = function (localX, localY) { if (!self.isDragging) return; var dist = Math.sqrt(localX * localX + localY * localY); if (dist > self.radius) { // Normalize and scale to radius if touch is outside draggable area self.knobSprite.x = localX / dist * self.radius; self.knobSprite.y = localY / dist * self.radius; } else { self.knobSprite.x = localX; self.knobSprite.y = localY; } // Calculate normalized input vector if (self.radius > 0) { self.inputVector.x = self.knobSprite.x / self.radius; self.inputVector.y = self.knobSprite.y / self.radius; } else { // Avoid division by zero if radius is zero self.inputVector.x = 0; self.inputVector.y = 0; } }; self.handleUp = function () { if (self.isDragging) { self.isDragging = false; // Reset knob to center and clear input vector self.knobSprite.x = 0; self.knobSprite.y = 0; self.inputVector.x = 0; self.inputVector.y = 0; } }; self.getInput = function () { return self.inputVector; }; self.isActive = function () { return self.isDragging; }; return self; }); // Projectile class for player's bullets var PlayerProjectile = Container.expand(function (fireAngle) { var self = Container.call(this); // Attach bullet sprite self.bulletSprite = self.attachAsset('playerBulletSprite', { anchorX: 0.5, anchorY: 0.5 }); self.angle = fireAngle; // Store the firing angle self.speed = 20; // Projectile speed magnitude // The playerBulletSprite has orientation:1, meaning it's rotated 90deg clockwise. // If original was thin vertical, it's now thin horizontal, "pointing" along its X-axis. // So, self.angle directly applies. self.bulletSprite.rotation = self.angle; self.isOffScreen = false; // Flag to indicate if projectile is off-screen // Update method to move projectile self.update = function () { if (self.isOffScreen) return; // Don't update if already marked off-screen self.x += Math.cos(self.angle) * self.speed; self.y += Math.sin(self.angle) * self.speed; // Check if off-screen var gameWidth = 2048; var gameHeight = 2732; // Margin based on projectile size to ensure it's fully off-screen var margin = Math.max(self.bulletSprite.width, self.bulletSprite.height) / 2 + 50; if (self.x < -margin || self.x > gameWidth + margin || self.y < -margin || self.y > gameHeight + margin) { self.isOffScreen = true; } }; //{M} // Note: Original L was self.destroy related, removed. return self; }); // PlayerShip class to handle player ship logic and projectile spawn point calculation var PlayerShip = Container.expand(function () { var self = Container.call(this); // Attach player ship sprite and set reference for spawn point calculation self.shipSprite = self.attachAsset('playerShipSprite', { anchorX: 0.5, anchorY: 0.5 }); self.moveSpeed = 10; // Pixels per tick for movement speed // currentAngle is the direction the ship moves and fires projectiles. // 0 radians = right, -PI/2 = up (screen coordinates). self.currentAngle = -Math.PI / 2; // Initial angle: pointing up. // playerShipSprite is assumed to be designed pointing "up" (its nose along its local -Y axis). // To make the sprite's nose align with currentAngle, its visual rotation needs adjustment. // Visual rotation = currentAngle + Math.PI / 2. // E.g., currentAngle = -PI/2 (up) => visual rotation = 0. // E.g., currentAngle = 0 (right) => visual rotation = PI/2. self.shipSprite.rotation = self.currentAngle + Math.PI / 2; // Initialize projectile spawn point (remains important) // This will be updated relative to the ship's current position in self.update() // Initial dummy values, will be set correctly on first update. projectileSpawnPoint.x = 0; projectileSpawnPoint.y = 0; self.applyJoystickInput = function (inputX, inputY) { // Update angle only if joystick provides directional input if (inputX !== 0 || inputY !== 0) { self.currentAngle = Math.atan2(inputY, inputX); self.shipSprite.rotation = self.currentAngle + Math.PI / 2; } self.x += inputX * self.moveSpeed; self.y += inputY * self.moveSpeed; // Boundary checks to keep ship on screen var halfWidth = self.shipSprite.width / 2; var halfHeight = self.shipSprite.height / 2; var gameWidth = 2048; var gameHeight = 2732; var topSafeMargin = 100; // Top 100px area is reserved if (self.x - halfWidth < 0) self.x = halfWidth; if (self.x + halfWidth > gameWidth) self.x = gameWidth - halfWidth; if (self.y - halfHeight < topSafeMargin) self.y = topSafeMargin + halfHeight; if (self.y + halfHeight > gameHeight) self.y = gameHeight - halfHeight; }; // Update projectile spawn point every frame based on player ship position and rotation self.update = function () { var shipAsset = self.shipSprite; if (!shipAsset) return; // Calculate spawn point at the tip of the ship, considering its currentAngle. // The "nose" is shipAsset.height / 2 distance from the center. var noseDistance = shipAsset.height / 2; projectileSpawnPoint.x = self.x + Math.cos(self.currentAngle) * noseDistance; projectileSpawnPoint.y = self.y + Math.sin(self.currentAngle) * noseDistance; }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 }); /**** * Game Code ****/ // Projectile spawn point (relative to player ship center) // Will be updated in PlayerShip class update var projectileSpawnPoint = { x: 0, y: 0 }; var joystick; // Declare joystick instance // Array to keep track of all player projectiles var playerProjectiles = []; // Create player ship and add to game var playerShip = new PlayerShip(); game.addChild(playerShip); // Center player ship horizontally, place near bottom playerShip.x = 2048 / 2; playerShip.y = 2732 - 350; // Create Joystick joystick = new Joystick(); game.addChild(joystick); // Set initial position (e.g., 0,0), though it will jump to touch. joystick.x = 0; joystick.y = 0; joystick.visible = false; // Joystick starts hidden and will appear at touch position // Game event handlers // Create and position Fire Button var fireButton = new FireButton(); LK.gui.bottomLeft.addChild(fireButton); // Position the fire button visually in the bottom-left corner with some margin // The buttonSprite is 200x200 and anchored at its center (0.5, 0.5) // fireButton (Container) is added to LK.gui.bottomLeft, positioning its top-left (0,0) at screen bottom-left. // Adjust x and y to make the button appear correctly. var buttonMargin = 50; // 50px margin from screen edges fireButton.x = fireButton.buttonSprite.width / 2 + buttonMargin; fireButton.y = -fireButton.buttonSprite.height / 2 - buttonMargin; // Negative Y moves up from the bottom edge game.down = function (x, y, obj) { // x, y are global game coordinates // Move the joystick to the touch position joystick.x = x; joystick.y = y; joystick.visible = true; // Activate the joystick. Since the joystick's origin is now at the touch point (x,y), // the local coordinates for the touch within the joystick are (0,0). // This centers the knob under the finger and initiates dragging. joystick.handleDown(0, 0); // Pass (0,0) as local coordinates // Note: With this "floating joystick" implementation, the joystick activates on any screen press. // The previous mechanic, where tapping away from a fixed joystick fired projectiles, // is superseded. Further design would be needed for a separate firing mechanism. }; game.move = function (x, y, obj) { if (joystick.isActive()) { var joystickLocalPos = joystick.toLocal({ x: x, y: y }); joystick.handleMove(joystickLocalPos.x, joystickLocalPos.y); } }; game.up = function (x, y, obj) { if (joystick.isActive()) { joystick.handleUp(); // Resets knob, inputVector, and isDragging flag joystick.visible = false; // Hide the joystick when the touch is released } }; // Update game state game.update = function () { // Apply joystick input to player ship movement if (joystick && playerShip && playerShip.applyJoystickInput) { var input = joystick.getInput(); playerShip.applyJoystickInput(input.x, input.y); } // Update player ship (e.g., to recalculate projectileSpawnPoint after moving) if (playerShip && playerShip.update) { playerShip.update(); } // Update and clean up projectiles for (var i = playerProjectiles.length - 1; i >= 0; i--) { var proj = playerProjectiles[i]; if (proj.update) { proj.update(); // Call projectile's own update logic } // Check if the projectile flagged itself as off-screen if (proj.isOffScreen) { proj.destroy(); // Destroy the projectile (can only be called from Game class context) playerProjectiles.splice(i, 1); // Remove from the tracking array } } };

===================================================================
--- original.js
+++ change.js
@@ -2,25 +2,27 @@
 * Classes
 ****/ 
 var FireButton = Container.expand(function () {
 	var self = Container.call(this);
-	// Assuming 'fireButtonSprite' is an asset like:
-	// LK.init.shape('fireButtonSprite', {width:200, height:200, color:0xFF0000, shape:'ellipse'})
-	// The engine will handle its creation.
 	self.buttonSprite = self.attachAsset('fireButtonSprite', {
 		anchorX: 0.5,
 		anchorY: 0.5
 	});
-	// Event handler called when a press happens on this button.
-	self.down = function (x, y, event) {
-		// Call the global function to fire a projectile.
-		if (typeof firePlayerProjectile === 'function') {
-			firePlayerProjectile();
+	self.down = function (x, y, obj) {
+		// Check if playerShip exists and projectileSpawnPoint is defined
+		if (playerShip && typeof playerShip.currentAngle !== 'undefined' && typeof projectileSpawnPoint !== 'undefined' && playerProjectiles && PlayerProjectile) {
+			var newProjectile = new PlayerProjectile(playerShip.currentAngle); // Pass the ship's current firing angle
+			newProjectile.x = projectileSpawnPoint.x; // Set initial position from calculated spawn point
+			newProjectile.y = projectileSpawnPoint.y;
+			// lastY initialization is no longer needed as PlayerProjectile handles its state differently.
+			playerProjectiles.push(newProjectile);
+			game.addChild(newProjectile); // Add projectiles to the main game stage
+			// Future enhancement: LK.getSound('shoot').play(); if a shoot sound is added
 		}
-		// Event is consumed by this button, so it won't propagate to game.down typically.
 	};
 	return self;
 });
+// Red circular fire button
 var Joystick = Container.expand(function () {
 	var self = Container.call(this);
 	self.baseSprite = self.attachAsset('joystickBaseSprite', {
 		anchorX: 0.5,
@@ -91,28 +93,36 @@
 	};
 	return self;
 });
 // Projectile class for player's bullets
-var PlayerProjectile = Container.expand(function () {
+var PlayerProjectile = Container.expand(function (fireAngle) {
 	var self = Container.call(this);
 	// Attach bullet sprite
 	self.bulletSprite = self.attachAsset('playerBulletSprite', {
 		anchorX: 0.5,
 		anchorY: 0.5
 	});
-	// Set initial speed (upwards)
-	self.speedY = -20;
-	// Track lastY for off-screen detection
-	self.lastY = self.y;
+	self.angle = fireAngle; // Store the firing angle
+	self.speed = 20; // Projectile speed magnitude
+	// The playerBulletSprite has orientation:1, meaning it's rotated 90deg clockwise.
+	// If original was thin vertical, it's now thin horizontal, "pointing" along its X-axis.
+	// So, self.angle directly applies.
+	self.bulletSprite.rotation = self.angle;
+	self.isOffScreen = false; // Flag to indicate if projectile is off-screen
 	// Update method to move projectile
 	self.update = function () {
-		self.lastY = self.y;
-		self.y += self.speedY;
-		// Destroy if off screen (top)
-		if (self.lastY >= -50 && self.y < -50) {
-			self.destroy();
+		if (self.isOffScreen) return; // Don't update if already marked off-screen
+		self.x += Math.cos(self.angle) * self.speed;
+		self.y += Math.sin(self.angle) * self.speed;
+		// Check if off-screen
+		var gameWidth = 2048;
+		var gameHeight = 2732;
+		// Margin based on projectile size to ensure it's fully off-screen
+		var margin = Math.max(self.bulletSprite.width, self.bulletSprite.height) / 2 + 50;
+		if (self.x < -margin || self.x > gameWidth + margin || self.y < -margin || self.y > gameHeight + margin) {
+			self.isOffScreen = true;
 		}
-	};
+	}; //{M} // Note: Original L was self.destroy related, removed.
 	return self;
 });
 // PlayerShip class to handle player ship logic and projectile spawn point calculation
 var PlayerShip = Container.expand(function () {
@@ -122,14 +132,28 @@
 		anchorX: 0.5,
 		anchorY: 0.5
 	});
 	self.moveSpeed = 10; // Pixels per tick for movement speed
+	// currentAngle is the direction the ship moves and fires projectiles.
+	// 0 radians = right, -PI/2 = up (screen coordinates).
+	self.currentAngle = -Math.PI / 2; // Initial angle: pointing up.
+	// playerShipSprite is assumed to be designed pointing "up" (its nose along its local -Y axis).
+	// To make the sprite's nose align with currentAngle, its visual rotation needs adjustment.
+	// Visual rotation = currentAngle + Math.PI / 2.
+	// E.g., currentAngle = -PI/2 (up) => visual rotation = 0.
+	// E.g., currentAngle = 0 (right) => visual rotation = PI/2.
+	self.shipSprite.rotation = self.currentAngle + Math.PI / 2;
 	// Initialize projectile spawn point (remains important)
 	// This will be updated relative to the ship's current position in self.update()
 	// Initial dummy values, will be set correctly on first update.
 	projectileSpawnPoint.x = 0;
 	projectileSpawnPoint.y = 0;
 	self.applyJoystickInput = function (inputX, inputY) {
+		// Update angle only if joystick provides directional input
+		if (inputX !== 0 || inputY !== 0) {
+			self.currentAngle = Math.atan2(inputY, inputX);
+			self.shipSprite.rotation = self.currentAngle + Math.PI / 2;
+		}
 		self.x += inputX * self.moveSpeed;
 		self.y += inputY * self.moveSpeed;
 		// Boundary checks to keep ship on screen
 		var halfWidth = self.shipSprite.width / 2;
@@ -141,19 +165,17 @@
 		if (self.x + halfWidth > gameWidth) self.x = gameWidth - halfWidth;
 		if (self.y - halfHeight < topSafeMargin) self.y = topSafeMargin + halfHeight;
 		if (self.y + halfHeight > gameHeight) self.y = gameHeight - halfHeight;
 	};
-	// Update projectile spawn point every frame based on player ship position
+	// Update projectile spawn point every frame based on player ship position and rotation
 	self.update = function () {
-		// Calculate spawn point at the tip of the ship (center top)
 		var shipAsset = self.shipSprite;
 		if (!shipAsset) return;
-		// Ship's global center (which is self.x, self.y due to anchor)
-		var centerX = self.x;
-		var centerY = self.y;
-		// The tip of the ship
-		projectileSpawnPoint.x = centerX;
-		projectileSpawnPoint.y = centerY - shipAsset.height / 2;
+		// Calculate spawn point at the tip of the ship, considering its currentAngle.
+		// The "nose" is shipAsset.height / 2 distance from the center.
+		var noseDistance = shipAsset.height / 2;
+		projectileSpawnPoint.x = self.x + Math.cos(self.currentAngle) * noseDistance;
+		projectileSpawnPoint.y = self.y + Math.sin(self.currentAngle) * noseDistance;
 	};
 	return self;
 });
 
@@ -173,31 +195,10 @@
 	x: 0,
 	y: 0
 };
 var joystick; // Declare joystick instance
-var activeJoystickTouchId = null; // Tracks the identifier of the touch controlling the joystick
 // Array to keep track of all player projectiles
 var playerProjectiles = [];
-var fireButton; // Declare fire button instance variable
-// Function to fire a player projectile
-function firePlayerProjectile() {
-	if (!playerShip || typeof projectileSpawnPoint === 'undefined') {
-		// Safety check to ensure player ship and spawn point are available
-		return;
-	}
-	var newProjectile = new PlayerProjectile();
-	newProjectile.x = projectileSpawnPoint.x;
-	newProjectile.y = projectileSpawnPoint.y;
-	// Explicitly set lastY after positioning, as PlayerProjectile's initial lastY might be based on self.y = 0
-	newProjectile.lastY = newProjectile.y;
-	playerProjectiles.push(newProjectile);
-	game.addChild(newProjectile);
-	// Play shoot sound if available
-	var shootSound = LK.getSound('shoot'); // Assuming 'shoot' sound is defined
-	if (shootSound && typeof shootSound.play === 'function') {
-		shootSound.play();
-	}
-}
 // Create player ship and add to game
 var playerShip = new PlayerShip();
 game.addChild(playerShip);
 // Center player ship horizontally, place near bottom
@@ -209,59 +210,46 @@
 // Set initial position (e.g., 0,0), though it will jump to touch.
 joystick.x = 0;
 joystick.y = 0;
 joystick.visible = false; // Joystick starts hidden and will appear at touch position
-// Create and position Fire Button
-fireButton = new FireButton();
-// Position the fire button in the bottom-right area.
-// We access buttonSprite.width/height assuming 'fireButtonSprite' asset is e.g. 200x200.
-// The anchor for buttonSprite is 0.5, 0.5 within the FireButton container.
-// So, fireButton.x, fireButton.y refers to the center of the button.
-var fireButtonWidth = fireButton.buttonSprite ? fireButton.buttonSprite.width : 200; // Default if sprite not ready
-var fireButtonHeight = fireButton.buttonSprite ? fireButton.buttonSprite.height : 200; // Default if sprite not ready
-var padding = 50; // 50px padding from screen edges
-fireButton.x = 2048 - fireButtonWidth / 2 - padding;
-fireButton.y = 2732 - fireButtonHeight / 2 - padding;
-game.addChild(fireButton);
 // Game event handlers
+// Create and position Fire Button
+var fireButton = new FireButton();
+LK.gui.bottomLeft.addChild(fireButton);
+// Position the fire button visually in the bottom-left corner with some margin
+// The buttonSprite is 200x200 and anchored at its center (0.5, 0.5)
+// fireButton (Container) is added to LK.gui.bottomLeft, positioning its top-left (0,0) at screen bottom-left.
+// Adjust x and y to make the button appear correctly.
+var buttonMargin = 50; // 50px margin from screen edges
+fireButton.x = fireButton.buttonSprite.width / 2 + buttonMargin;
+fireButton.y = -fireButton.buttonSprite.height / 2 - buttonMargin; // Negative Y moves up from the bottom edge
 game.down = function (x, y, obj) {
 	// x, y are global game coordinates
-	// The event object 'obj' itself contains the identifier for the touch/pointer
-	if (activeJoystickTouchId === null) {
-		// If no touch is currently controlling the joystick
-		activeJoystickTouchId = obj.identifier; // Assign this touch to control the joystick
-		// Move the joystick to the touch position
-		joystick.x = x;
-		joystick.y = y;
-		joystick.visible = true;
-		// Activate the joystick. Since the joystick's origin is now at the touch point (x,y),
-		// the local coordinates for the touch within the joystick are (0,0).
-		// This centers the knob under the finger and initiates dragging.
-		joystick.handleDown(0, 0); // Pass (0,0) as local coordinates
-	}
-	// Note: With this "floating joystick" implementation, the joystick activates on any screen press
-	// if it's not already in use by another touch.
+	// Move the joystick to the touch position
+	joystick.x = x;
+	joystick.y = y;
+	joystick.visible = true;
+	// Activate the joystick. Since the joystick's origin is now at the touch point (x,y),
+	// the local coordinates for the touch within the joystick are (0,0).
+	// This centers the knob under the finger and initiates dragging.
+	joystick.handleDown(0, 0); // Pass (0,0) as local coordinates
+	// Note: With this "floating joystick" implementation, the joystick activates on any screen press.
 	// The previous mechanic, where tapping away from a fixed joystick fired projectiles,
 	// is superseded. Further design would be needed for a separate firing mechanism.
 };
 game.move = function (x, y, obj) {
-	// Only process move for the joystick if it's active AND this move event
-	// corresponds to the touch that activated it (obj.identifier).
-	if (joystick.isActive() && obj.identifier === activeJoystickTouchId) {
+	if (joystick.isActive()) {
 		var joystickLocalPos = joystick.toLocal({
 			x: x,
 			y: y
 		});
 		joystick.handleMove(joystickLocalPos.x, joystickLocalPos.y);
 	}
 };
 game.up = function (x, y, obj) {
-	// Only process up for the joystick if it's active AND this up event
-	// corresponds to the touch that activated it (obj.identifier).
-	if (joystick.isActive() && obj.identifier === activeJoystickTouchId) {
+	if (joystick.isActive()) {
 		joystick.handleUp(); // Resets knob, inputVector, and isDragging flag
 		joystick.visible = false; // Hide the joystick when the touch is released
-		activeJoystickTouchId = null; // Release the joystick control, making it available for a new touch
 	}
 };
 // Update game state
 game.update = function () {
@@ -276,14 +264,14 @@
 	}
 	// Update and clean up projectiles
 	for (var i = playerProjectiles.length - 1; i >= 0; i--) {
 		var proj = playerProjectiles[i];
-		if (proj.update) proj.update();
-		// Remove destroyed projectiles (if they went off-screen, etc.)
-		if (proj.y < -50) {
-			// Assuming projectiles are destroyed if y < -50
-			// LK engine should handle destroy, but if not, ensure it's removed from array.
-			// proj.destroy(); // This is good practice.
-			playerProjectiles.splice(i, 1);
+		if (proj.update) {
+			proj.update(); // Call projectile's own update logic
 		}
+		// Check if the projectile flagged itself as off-screen
+		if (proj.isOffScreen) {
+			proj.destroy(); // Destroy the projectile (can only be called from Game class context)
+			playerProjectiles.splice(i, 1); // Remove from the tracking array
+		}
 	}
 };
\ No newline at end of file

Creation History

Images

Sounds & Music

Used plugins