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

/**** * Classes ****/ // Lighter grey knob // EnemyShip Class: Represents an enemy spacecraft. var EnemyShip = Container.expand(function () { var self = Container.call(this); self.attachAsset('enemyShipSprite', { anchorX: 0.5, anchorY: 0.5 }); self.speed = 4; // Pixels per frame, moving downwards. Can be varied for difficulty. // Called automatically by LK engine if the instance is added to the game stage. self.update = function () { self.y += self.speed; }; return self; }); var JoystickControl = Container.expand(function () { var self = Container.call(this); // Define fixed radii based on asset dimensions self.baseRadius = 100; // Half of joystickBaseSprite width (200/2) self.knobRadius = 40; // Half of joystickKnobSprite width (80/2) self.maxKnobTravel = self.baseRadius - self.knobRadius; // Max distance knob center can travel // Methods first, as per LK good practices self.handleDown = function (gameX, gameY) { var localPos = self.toLocal({ x: gameX, y: gameY }); // Convert to coords relative to joystick center var distSqFromCenter = localPos.x * localPos.x + localPos.y * localPos.y; // Check if touch is within the larger base radius (the grabbable area) if (distSqFromCenter <= self.baseRadius * self.baseRadius) { self.isDraggingKnob = true; self.updateKnobPosition(localPos.x, localPos.y); return true; // Joystick is handling this touch } return false; // Touch was outside joystick }; self.handleMove = function (gameX, gameY) { if (self.isDraggingKnob) { var localPos = self.toLocal({ x: gameX, y: gameY }); self.updateKnobPosition(localPos.x, localPos.y); } }; self.handleUp = function () { if (self.isDraggingKnob) { self.isDraggingKnob = false; // Reset knob to center and clear control vectors self.knobVisual.x = 0; self.knobVisual.y = 0; self.controlVectorX = 0; self.controlVectorY = 0; } }; self.updateKnobPosition = function (localX, localY) { var distFromCenter = Math.sqrt(localX * localX + localY * localY); if (distFromCenter > self.maxKnobTravel) { // If touch is outside max travel, clamp knob to the edge this.knobVisual.x = localX / distFromCenter * self.maxKnobTravel; this.knobVisual.y = localY / distFromCenter * self.maxKnobTravel; } else { // Touch is within travel range this.knobVisual.x = localX; this.knobVisual.y = localY; } // Calculate control vector components, normalized by maxKnobTravel if (self.maxKnobTravel === 0) { // Avoid division by zero self.controlVectorX = 0; self.controlVectorY = 0; } else { self.controlVectorX = this.knobVisual.x / self.maxKnobTravel; self.controlVectorY = this.knobVisual.y / self.maxKnobTravel; } // Ensure vectors are clamped between -1 and 1 self.controlVectorX = Math.max(-1, Math.min(1, self.controlVectorX)); self.controlVectorY = Math.max(-1, Math.min(1, self.controlVectorY)); }; // Initialization code for JoystickControl var baseVisual = self.attachAsset('joystickBaseSprite', { anchorX: 0.5, anchorY: 0.5, alpha: 0.5 // Make base slightly transparent }); // The baseVisual is centered at the JoystickControl's origin (0,0) due to anchor self.knobVisual = self.attachAsset('joystickKnobSprite', { anchorX: 0.5, anchorY: 0.5 }); // Knob is also initially centered at JoystickControl's origin (0,0) self.isDraggingKnob = false; self.controlVectorX = 0; // Output vector X component (-1 to 1) self.controlVectorY = 0; // Output vector Y component (-1 to 1) return self; }); // PlayerBullet Class: Represents bullets fired by the player. var PlayerBullet = Container.expand(function () { var self = Container.call(this); self.attachAsset('playerBulletSprite', { anchorX: 0.5, anchorY: 0.5 }); self.speed = -15; // Pixels per frame, negative for moving upwards. // Called automatically by LK engine. self.update = function () { self.y += self.speed; }; return self; }); // For when the player's ship is destroyed // No plugins are explicitly required for this MVP of Starship Onslaught. // PlayerShip Class: Represents the player's controllable starship. var PlayerShip = Container.expand(function () { var self = Container.call(this); // Attach the visual asset for the player's ship. // The asset is anchored by its center within the container. // The container's (self) x,y coordinates remain its top-left. self.attachAsset('playerShipSprite', { anchorX: 0.5, anchorY: 0.5 // The graphic's local position is set to be the center of the container, // assuming the container's width/height match the sprite's dimensions. // This is implicitly handled if the container sizes to its children. // For an 80x100 sprite, this places its center at container's (40,50). // However, standard behavior for attachAsset might be that the child is added at (0,0) locally, // and anchorX/Y refers to the texture anchor. So the visual sprite is centered around (0,0) of PlayerShip's local space. // The container will automatically size based on its children. If the sprite is 80x100, // centered at local (0,0), its bounds are -40 to +40 (x) and -50 to +50 (y). // This means player.width and player.height would be 80 and 100, and player.x/y refers to its visual center. // Let's stick to LK example: anchorX/Y for the *asset*, container x/y is top-left. // The asset child will be added at (0,0) in container space. If its own anchor is 0.5,0.5, // its visual center is at its (0,0) local position. // The container's width/height will be that of the asset. // Thus, player.x, player.y means the top-left of the bounding box of the player ship. }); // Player movement and shooting are handled in the main game logic. return self; }); /**** * Initialize Game ****/ // Create the game instance with a dark space-like background. var game = new LK.Game({ backgroundColor: 0x0A0A20 // Dark blue, almost black }); /**** * Game Code ****/ // Greyish base, slightly transparent later if needed // Sound effects // Player's bullets // Enemy spacecraft // Player's starship // Initialize assets used in this game. // Define game-wide constants var PLAYER_SHOOT_INTERVAL_TICKS = 25; // Player shoots roughly every 0.4 seconds (60/25) var ENEMY_SPAWN_INTERVAL_TICKS = 75; // New enemy spawns roughly every 1.25 seconds (60/75) var GAME_WIDTH = 2048; var GAME_HEIGHT = 2732; // Declare game state variables var player; var enemies = []; var playerBullets = []; var scoreTxt; // var dragNode = null; // This global dragNode for player is no longer needed // New game state variables for joystick control var joystick; var PLAYER_MOVE_SPEED = 8; // Adjust for desired player ship responsiveness // Initialize and display the score scoreTxt = new Text2('Score: 0', { // Added "Score: " prefix for clarity size: 80, // Readable size for mobile fill: 0xE0E0E0 // Light gray for score text }); scoreTxt.anchor.set(0.5, 0); // Anchor to the horizontal center and vertical top of the text // Position score display at the top-center of the GUI layer LK.gui.top.addChild(scoreTxt); scoreTxt.y = 30; // Provide some padding from the very top edge, clear of potential top-left menu icon // Initialize Joystick joystick = new JoystickControl(); game.addChild(joystick); // Position joystick (center point) in the bottom-left corner with padding // joystick.baseRadius is 100. Let's use 150px from edges for its center. joystick.x = 150; joystick.y = GAME_HEIGHT - 150; // Create and position the player's ship player = new PlayerShip(); game.addChild(player); // Set initial position: horizontally centered, towards the bottom of the screen. // player.width/height are dimensions of the PlayerShip container, derived from its sprite. // player.x, player.y refers to the top-left corner of the player ship container. player.x = (GAME_WIDTH - player.width) / 2; player.y = GAME_HEIGHT - player.height - 60; // 60px padding from the bottom edge // Event handler for touch/mouse down game.down = function (x, y, obj) { // Pass event to joystick. If joystick handles it, joystick.isDraggingKnob will be true. joystick.handleDown(x, y); }; // Event handler for touch/mouse up game.up = function (x, y, obj) { if (joystick.isDraggingKnob) { joystick.handleUp(); } }; // Event handler for touch/mouse move game.move = function (x, y, obj) { if (joystick.isDraggingKnob) { joystick.handleMove(x, y); } }; // Main game update loop, called every frame by the LK engine. game.update = function () { // Player Movement Logic (based on Joystick) if (joystick && (joystick.controlVectorX !== 0 || joystick.controlVectorY !== 0)) { var newPlayerX = player.x + joystick.controlVectorX * PLAYER_MOVE_SPEED; var newPlayerY = player.y + joystick.controlVectorY * PLAYER_MOVE_SPEED; // Constrain player ship within screen boundaries player.x = Math.max(0, Math.min(GAME_WIDTH - player.width, newPlayerX)); player.y = Math.max(0, Math.min(GAME_HEIGHT - player.height, newPlayerY)); } // Player Shooting Logic if (LK.ticks % PLAYER_SHOOT_INTERVAL_TICKS === 0) { var newBullet = new PlayerBullet(); // Spawn bullet from the player ship's "nose" (top-center). // newBullet.x, newBullet.y is top-left of the bullet container. newBullet.x = player.x + player.width / 2 - newBullet.width / 2; newBullet.y = player.y - newBullet.height; // Bullet appears just above the player newBullet.lastY = newBullet.y; // Initialize for off-screen transition detection playerBullets.push(newBullet); game.addChild(newBullet); LK.getSound('playerShootSound').play(); } // Enemy Spawning Logic if (LK.ticks % ENEMY_SPAWN_INTERVAL_TICKS === 0) { var newEnemy = new EnemyShip(); // Spawn enemy at a random X position, just off-screen at the top. newEnemy.x = Math.random() * (GAME_WIDTH - newEnemy.width); newEnemy.y = -newEnemy.height; // Starts just above the visible screen newEnemy.lastY = newEnemy.y; // Initialize for off-screen transition newEnemy.lastPlayerIntersecting = false; // Initialize for player collision transition enemies.push(newEnemy); game.addChild(newEnemy); } // Update Player Bullets (movement, off-screen removal, collision with enemies) for (var i = playerBullets.length - 1; i >= 0; i--) { var bullet = playerBullets[i]; // bullet.update() is automatically called by LK engine for movement. // Off-screen check (bullet moving upwards) // Check if bullet's bottom edge (bullet.y + bullet.height) has crossed screen top (y=0) if (bullet.y + bullet.height < 0 && bullet.lastY + bullet.height >= 0) { bullet.destroy(); playerBullets.splice(i, 1); continue; // Skip to next bullet } bullet.lastY = bullet.y; // Update lastY for next frame's transition check // Collision with Enemies for (var j = enemies.length - 1; j >= 0; j--) { var enemy = enemies[j]; if (bullet.intersects(enemy)) { LK.setScore(LK.getScore() + 10); // Increment score scoreTxt.setText('Score: ' + LK.getScore()); // Update score display LK.getSound('enemyExplosionSound').play(); bullet.destroy(); // Destroy the bullet playerBullets.splice(i, 1); enemy.destroy(); // Destroy the enemy enemies.splice(j, 1); break; // Bullet hit one enemy, so it's gone. } } } // Update Enemies (movement, off-screen removal, collision with player) for (var k = enemies.length - 1; k >= 0; k--) { var enemy = enemies[k]; // enemy.update() is automatically called by LK engine. // Off-screen check (enemy moving downwards) // Check if enemy's top edge (enemy.y) has crossed screen bottom (y=GAME_HEIGHT) if (enemy.y > GAME_HEIGHT && enemy.lastY <= GAME_HEIGHT) { enemy.destroy(); enemies.splice(k, 1); continue; // Skip to next enemy } enemy.lastY = enemy.y; // Update lastY for next frame // Collision with Player var currentPlayerIntersecting = player.intersects(enemy); // Trigger game over only on the frame the intersection starts. if (!enemy.lastPlayerIntersecting && currentPlayerIntersecting) { LK.getSound('playerExplosionSound').play(); // LK.effects.flashScreen(0xFF0000, 300); // Optional screen flash LK.showGameOver(); // End the game return; // Exit update loop as game is over. } enemy.lastPlayerIntersecting = currentPlayerIntersecting; // Update intersection state } };

===================================================================
--- original.js
+++ change.js
@@ -1,7 +1,8 @@
 /**** 
 * Classes
 ****/ 
+// Lighter grey knob
 // EnemyShip Class: Represents an enemy spacecraft.
 var EnemyShip = Container.expand(function () {
 	var self = Container.call(this);
 	self.attachAsset('enemyShipSprite', {
@@ -14,8 +15,89 @@
 		self.y += self.speed;
 	};
 	return self;
 });
+var JoystickControl = Container.expand(function () {
+	var self = Container.call(this);
+	// Define fixed radii based on asset dimensions
+	self.baseRadius = 100; // Half of joystickBaseSprite width (200/2)
+	self.knobRadius = 40; // Half of joystickKnobSprite width (80/2)
+	self.maxKnobTravel = self.baseRadius - self.knobRadius; // Max distance knob center can travel
+	// Methods first, as per LK good practices
+	self.handleDown = function (gameX, gameY) {
+		var localPos = self.toLocal({
+			x: gameX,
+			y: gameY
+		}); // Convert to coords relative to joystick center
+		var distSqFromCenter = localPos.x * localPos.x + localPos.y * localPos.y;
+		// Check if touch is within the larger base radius (the grabbable area)
+		if (distSqFromCenter <= self.baseRadius * self.baseRadius) {
+			self.isDraggingKnob = true;
+			self.updateKnobPosition(localPos.x, localPos.y);
+			return true; // Joystick is handling this touch
+		}
+		return false; // Touch was outside joystick
+	};
+	self.handleMove = function (gameX, gameY) {
+		if (self.isDraggingKnob) {
+			var localPos = self.toLocal({
+				x: gameX,
+				y: gameY
+			});
+			self.updateKnobPosition(localPos.x, localPos.y);
+		}
+	};
+	self.handleUp = function () {
+		if (self.isDraggingKnob) {
+			self.isDraggingKnob = false;
+			// Reset knob to center and clear control vectors
+			self.knobVisual.x = 0;
+			self.knobVisual.y = 0;
+			self.controlVectorX = 0;
+			self.controlVectorY = 0;
+		}
+	};
+	self.updateKnobPosition = function (localX, localY) {
+		var distFromCenter = Math.sqrt(localX * localX + localY * localY);
+		if (distFromCenter > self.maxKnobTravel) {
+			// If touch is outside max travel, clamp knob to the edge
+			this.knobVisual.x = localX / distFromCenter * self.maxKnobTravel;
+			this.knobVisual.y = localY / distFromCenter * self.maxKnobTravel;
+		} else {
+			// Touch is within travel range
+			this.knobVisual.x = localX;
+			this.knobVisual.y = localY;
+		}
+		// Calculate control vector components, normalized by maxKnobTravel
+		if (self.maxKnobTravel === 0) {
+			// Avoid division by zero
+			self.controlVectorX = 0;
+			self.controlVectorY = 0;
+		} else {
+			self.controlVectorX = this.knobVisual.x / self.maxKnobTravel;
+			self.controlVectorY = this.knobVisual.y / self.maxKnobTravel;
+		}
+		// Ensure vectors are clamped between -1 and 1
+		self.controlVectorX = Math.max(-1, Math.min(1, self.controlVectorX));
+		self.controlVectorY = Math.max(-1, Math.min(1, self.controlVectorY));
+	};
+	// Initialization code for JoystickControl
+	var baseVisual = self.attachAsset('joystickBaseSprite', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		alpha: 0.5 // Make base slightly transparent
+	});
+	// The baseVisual is centered at the JoystickControl's origin (0,0) due to anchor
+	self.knobVisual = self.attachAsset('joystickKnobSprite', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	// Knob is also initially centered at JoystickControl's origin (0,0)
+	self.isDraggingKnob = false;
+	self.controlVectorX = 0; // Output vector X component (-1 to 1)
+	self.controlVectorY = 0; // Output vector Y component (-1 to 1)
+	return self;
+});
 // PlayerBullet Class: Represents bullets fired by the player.
 var PlayerBullet = Container.expand(function () {
 	var self = Container.call(this);
 	self.attachAsset('playerBulletSprite', {
@@ -69,8 +151,9 @@
 
 /**** 
 * Game Code
 ****/ 
+// Greyish base, slightly transparent later if needed
 // Sound effects
 // Player's bullets
 // Enemy spacecraft
 // Player's starship
@@ -84,9 +167,12 @@
 var player;
 var enemies = [];
 var playerBullets = [];
 var scoreTxt;
-var dragNode = null; // To keep track of the object being dragged (player's ship)
+// var dragNode = null; // This global dragNode for player is no longer needed
+// New game state variables for joystick control
+var joystick;
+var PLAYER_MOVE_SPEED = 8; // Adjust for desired player ship responsiveness
 // Initialize and display the score
 scoreTxt = new Text2('Score: 0', {
 	// Added "Score: " prefix for clarity
 	size: 80,
@@ -96,44 +182,50 @@
 scoreTxt.anchor.set(0.5, 0); // Anchor to the horizontal center and vertical top of the text
 // Position score display at the top-center of the GUI layer
 LK.gui.top.addChild(scoreTxt);
 scoreTxt.y = 30; // Provide some padding from the very top edge, clear of potential top-left menu icon
+// Initialize Joystick
+joystick = new JoystickControl();
+game.addChild(joystick);
+// Position joystick (center point) in the bottom-left corner with padding
+// joystick.baseRadius is 100. Let's use 150px from edges for its center.
+joystick.x = 150;
+joystick.y = GAME_HEIGHT - 150;
 // Create and position the player's ship
 player = new PlayerShip();
 game.addChild(player);
 // Set initial position: horizontally centered, towards the bottom of the screen.
 // player.width/height are dimensions of the PlayerShip container, derived from its sprite.
 // player.x, player.y refers to the top-left corner of the player ship container.
 player.x = (GAME_WIDTH - player.width) / 2;
 player.y = GAME_HEIGHT - player.height - 60; // 60px padding from the bottom edge
-// Event handler for touch/mouse down (start of drag)
+// Event handler for touch/mouse down
 game.down = function (x, y, obj) {
-	// Assume any touch/click initiates player control
-	dragNode = player;
-	// Immediately update player position based on the touch/click
-	handleMove(x, y, obj);
+	// Pass event to joystick. If joystick handles it, joystick.isDraggingKnob will be true.
+	joystick.handleDown(x, y);
 };
-// Event handler for touch/mouse up (end of drag)
+// Event handler for touch/mouse up
 game.up = function (x, y, obj) {
-	dragNode = null; // Stop dragging
+	if (joystick.isDraggingKnob) {
+		joystick.handleUp();
+	}
 };
-// Unified move handler for player ship control
-function handleMove(x, y, obj) {
-	if (dragNode) {
-		// The incoming x, y are in game coordinates.
-		// Adjust so the player's visual center follows the touch point.
-		var newPlayerX = x - dragNode.width / 2;
-		var newPlayerY = y - dragNode.height / 2;
-		// Constrain player ship within screen boundaries.
-		// dragNode.x, dragNode.y is top-left of the player ship.
-		dragNode.x = Math.max(0, Math.min(GAME_WIDTH - dragNode.width, newPlayerX));
-		dragNode.y = Math.max(0, Math.min(GAME_HEIGHT - dragNode.height, newPlayerY));
+// Event handler for touch/mouse move
+game.move = function (x, y, obj) {
+	if (joystick.isDraggingKnob) {
+		joystick.handleMove(x, y);
 	}
-}
-// Assign the move handler to the game's move event.
-game.move = handleMove;
+};
 // Main game update loop, called every frame by the LK engine.
 game.update = function () {
+	// Player Movement Logic (based on Joystick)
+	if (joystick && (joystick.controlVectorX !== 0 || joystick.controlVectorY !== 0)) {
+		var newPlayerX = player.x + joystick.controlVectorX * PLAYER_MOVE_SPEED;
+		var newPlayerY = player.y + joystick.controlVectorY * PLAYER_MOVE_SPEED;
+		// Constrain player ship within screen boundaries
+		player.x = Math.max(0, Math.min(GAME_WIDTH - player.width, newPlayerX));
+		player.y = Math.max(0, Math.min(GAME_HEIGHT - player.height, newPlayerY));
+	}
 	// Player Shooting Logic
 	if (LK.ticks % PLAYER_SHOOT_INTERVAL_TICKS === 0) {
 		var newBullet = new PlayerBullet();
 		// Spawn bullet from the player ship's "nose" (top-center).

Creation History

Images

Sounds & Music

Used plugins