Upit | Learn about creating the game oceanic defense with gen AI

Play

oceanic defense

sabrozuri

ZuriHardaway

2mo

Playit

This is a naval shooting game where the player controls a stationary cannon placed near the bottom center of the screen. Warships of different sizes pass from left to right across the ocean background. The player must aim and fire cannonballs to hit the ships before they leave the screen. Each ship has multiple hit points, so it takes several shots to destroy them. The game includes a simple start menu and a calm ocean-inspired background with gentle music. The challenge increases as more ships appear with varying speed and toughness.

#NavalCombat

#ShootingGame

#WarshipBattle

#CannonDefense

#ArcadeShooter

#oceanic defense

Creation History

User prompt

The playable objects still need to be moved down a bit more. They are not quite in the right position yet.

User prompt

Please position all the game characters lower on the screen. They are currently too high and should be moved down to appear more natural and better aligned with the background.

User prompt

Please create a background object that covers the entire screen and stays behind all other game objects. This background should fill the whole visible area, so no empty spaces show. When I describe or add elements inside this object, it should always cover the full screen behind everything else.

Code edit (1 edits merged)

Please save this source code

User prompt

Naval Bombardment

Initial prompt

I want to create a shooting game where warships pass from left to right across the screen. The player controls a cannon located in the center of the screen and shoots at the passing ships. There should be multiple warships moving at different speeds and sizes. The goal is to hit as many ships as possible before they pass off the screen.

/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");

/**** 
* Classes
****/ 
var Cannon = Container.expand(function () {
	var self = Container.call(this);
	var graphics = self.attachAsset('cannon', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.targetX = 0;
	self.targetY = 0;
	self.lastFireTime = 0;
	self.fireDelay = 300;
	self.aimAt = function (x, y) {
		self.targetX = x;
		self.targetY = y;
		var dx = x - self.x;
		var dy = y - self.y;
		var angle = Math.atan2(dy, dx);
		graphics.rotation = angle;
	};
	self.canFire = function () {
		return LK.ticks * 16.67 - self.lastFireTime >= self.fireDelay;
	};
	self.fire = function () {
		if (!self.canFire()) return null;
		self.lastFireTime = LK.ticks * 16.67;
		var cannonball = new Cannonball();
		cannonball.x = self.x;
		cannonball.y = self.y;
		var dx = self.targetX - self.x;
		var dy = self.targetY - self.y;
		var distance = Math.sqrt(dx * dx + dy * dy);
		cannonball.velocityX = dx / distance * cannonball.speed;
		cannonball.velocityY = dy / distance * cannonball.speed;
		LK.getSound('shoot').play();
		return cannonball;
	};
	return self;
});
var Cannonball = Container.expand(function () {
	var self = Container.call(this);
	var graphics = self.attachAsset('cannonball', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.velocityX = 0;
	self.velocityY = 0;
	self.speed = 8;
	self.update = function () {
		self.x += self.velocityX;
		self.y += self.velocityY;
	};
	return self;
});
var Ship = Container.expand(function () {
	var self = Container.call(this);
	self.shipType = 'small';
	self.speed = 2;
	self.points = 10;
	self.graphics = null;
	self.init = function (type) {
		self.shipType = type;
		if (type === 'small') {
			self.graphics = self.attachAsset('smallShip', {
				anchorX: 0.5,
				anchorY: 0.5
			});
			self.speed = 3;
			self.points = 10;
		} else if (type === 'medium') {
			self.graphics = self.attachAsset('mediumShip', {
				anchorX: 0.5,
				anchorY: 0.5
			});
			self.speed = 2;
			self.points = 25;
		} else if (type === 'large') {
			self.graphics = self.attachAsset('largeShip', {
				anchorX: 0.5,
				anchorY: 0.5
			});
			self.speed = 1.5;
			self.points = 50;
		}
	};
	self.update = function () {
		self.x += self.speed;
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x001122
});

/**** 
* Game Code
****/ 
var oceanBackground = LK.getAsset('oceanBackground', {
	anchorX: 0,
	anchorY: 0,
	x: 0,
	y: 0
});
game.addChild(oceanBackground);
var cannon = game.addChild(new Cannon());
cannon.x = 1024;
cannon.y = 2400;
var ships = [];
var cannonballs = [];
var shipSpawnTimer = 0;
var shipSpawnDelay = 120;
var difficultyTimer = 0;
var shipsEscaped = 0;
var maxEscapedShips = 10;
var scoreTxt = new Text2('Score: 0', {
	size: 60,
	fill: 0xFFFFFF
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
var escapedTxt = new Text2('Escaped: 0/10', {
	size: 50,
	fill: 0xFFFF00
});
escapedTxt.anchor.set(1, 0);
escapedTxt.x = -20;
escapedTxt.y = 20;
LK.gui.topRight.addChild(escapedTxt);
function spawnShip() {
	var ship = new Ship();
	var types = ['small', 'small', 'medium', 'large'];
	var randomType = types[Math.floor(Math.random() * types.length)];
	ship.init(randomType);
	ship.x = -150;
	ship.y = 1000 + Math.random() * 1200;
	ships.push(ship);
	game.addChild(ship);
}
function updateDifficulty() {
	difficultyTimer++;
	if (difficultyTimer % 1800 === 0) {
		shipSpawnDelay = Math.max(60, shipSpawnDelay - 10);
	}
}
game.down = function (x, y, obj) {
	cannon.aimAt(x, y);
	var newCannonball = cannon.fire();
	if (newCannonball) {
		cannonballs.push(newCannonball);
		game.addChild(newCannonball);
	}
};
game.update = function () {
	updateDifficulty();
	shipSpawnTimer++;
	if (shipSpawnTimer >= shipSpawnDelay) {
		spawnShip();
		shipSpawnTimer = 0;
	}
	for (var i = ships.length - 1; i >= 0; i--) {
		var ship = ships[i];
		if (ship.lastX === undefined) ship.lastX = ship.x;
		if (ship.lastX <= 2048 && ship.x > 2048) {
			shipsEscaped++;
			escapedTxt.setText('Escaped: ' + shipsEscaped + '/' + maxEscapedShips);
			LK.getSound('shipEscape').play();
			if (shipsEscaped >= maxEscapedShips) {
				LK.showGameOver();
				return;
			}
			ship.destroy();
			ships.splice(i, 1);
			continue;
		}
		ship.lastX = ship.x;
	}
	for (var j = cannonballs.length - 1; j >= 0; j--) {
		var cannonball = cannonballs[j];
		if (cannonball.lastX === undefined) cannonball.lastX = cannonball.x;
		if (cannonball.lastY === undefined) cannonball.lastY = cannonball.y;
		if (cannonball.lastX >= 0 && cannonball.x < 0 || cannonball.lastX <= 2048 && cannonball.x > 2048 || cannonball.lastY >= 0 && cannonball.y < 0 || cannonball.lastY <= 2732 && cannonball.y > 2732) {
			cannonball.destroy();
			cannonballs.splice(j, 1);
			continue;
		}
		for (var k = ships.length - 1; k >= 0; k--) {
			var ship = ships[k];
			if (cannonball.intersects(ship)) {
				LK.setScore(LK.getScore() + ship.points);
				scoreTxt.setText('Score: ' + LK.getScore());
				LK.effects.flashObject(ship, 0xff0000, 200);
				LK.getSound('hit').play();
				cannonball.destroy();
				cannonballs.splice(j, 1);
				ship.destroy();
				ships.splice(k, 1);
				break;
			}
		}
		if (cannonballs[j]) {
			cannonball.lastX = cannonball.x;
			cannonball.lastY = cannonball.y;
		}
	}
};

===================================================================
--- original.js
+++ change.js
@@ -113,9 +113,9 @@
 });
 game.addChild(oceanBackground);
 var cannon = game.addChild(new Cannon());
 cannon.x = 1024;
-cannon.y = 2200;
+cannon.y = 2400;
 var ships = [];
 var cannonballs = [];
 var shipSpawnTimer = 0;
 var shipSpawnDelay = 120;
@@ -141,9 +141,9 @@
 	var types = ['small', 'small', 'medium', 'large'];
 	var randomType = types[Math.floor(Math.random() * types.length)];
 	ship.init(randomType);
 	ship.x = -150;
-	ship.y = 800 + Math.random() * 1200;
+	ship.y = 1000 + Math.random() * 1200;
 	ships.push(ship);
 	game.addChild(ship);
 }
 function updateDifficulty() {