Upit | Learn about creating the game Baby Shark with gen AI

Play

Baby Shark

sidra_silverkit

BabyShark

15K

10mo

Playit

Dive into the ocean with Baby Shark! Eat as much small fishes as you can to get bigger. 🦈 But beware of big ones!

#bythebeach2024

#casual

Creation History

User prompt

In updateFishCollisions ignore fishes with self.isEaten true

User prompt

Set self.isEaten to true in eaten()

User prompt

Add a property is eaten to fish class

Code edit (1 edits merged)

Please save this source code

User prompt

In eaten limit the rotation to pi/2

User prompt

In eaten, rotate progressively to PI*0.5

Code edit (3 edits merged)

Please save this source code

User prompt

In Fish class, add a new function eaten(index). In this function, set fish alpha to 0 and fishBones alpha to 1. Then animate the vertical fall of the fish. When it reaches 2732+ fish.width destroy it and remove it from fishes array using the index parameter

User prompt

In Fish class, add a fishBones child, use fishBones asset and self.fish w & h and alpha:0

User prompt

In spawnFishes, instead of spawning a fish of sharklevel+2, spawn a fish randomly from sharklevel + 2 to nbFishTypes

User prompt

When lose, set shark alpha to 0 and bones alpha to 1

User prompt

In grow, make self.bones the same w & h as self.shark

Code edit (5 edits merged)

Please save this source code

User prompt

Use bgMusic global instead of getsound

User prompt

Create a global for LK.getSound('bgMusic')

User prompt

when shark gets eaten, stop bgMusic before playing loose sound

User prompt

When wining a level after level 5, reduce nbFishPerLevel : nbFishPerLevel-=1

Code edit (1 edits merged)

Please save this source code

/**** 
* Classes
****/ 
//<Assets used in the game will automatically appear here>
// Baby Shark class
var BabyShark = Container.expand(function () {
	var self = Container.call(this);
	self.currentWidth = 162; // 242; // Initialize currentSize property
	self.currentHeight = 100; // 150;
	self.widthRatio = 162 / 100; //242 / 150;
	self.heightRatio = 100.0 / 162; // Define height ratio property
	self.speed = 10;
	self.velocityY = 0;
	self.shark = self.attachAsset('babyShark', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: self.currentHeight * self.widthRatio,
		height: self.currentHeight
	});
	self.bones = self.attachAsset('bones', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: self.currentHeight * self.widthRatio,
		height: self.currentHeight,
		alpha: 0
	});
	self.collisionBody = self.attachAsset('collisionBody', {
		anchorX: 0.5,
		anchorY: 0.5,
		alpha: 0.7,
		x: self.currentWidth * 0.25,
		y: 10,
		width: self.shark.width * 0.5,
		height: self.shark.width * 0.5
	});
	self.update = function () {
		if (!isPlaying) {
			return;
		}
		;
		self.velocityY += 0.4; // Further reduced gravity effect
		self.y += self.velocityY;
		if (self.y >= 2732 - self.shark.height * 0.5) {
			self.y = 2732 - self.shark.height * 0.5;
			self.velocityY = 0;
		}
		if (self.y <= topBorderY + self.shark.height * 0.5) {
			self.y = topBorderY + self.shark.height * 0.5;
			self.velocityY = 0;
		}
		// Update logic for Baby Shark
		if (isDebug) {
			debugTxt.setText("Level: ".concat(sharkLevel) + " / h:" + self.currentHeight.toFixed(0) + " / Progress: " + progressBar.x + " / x=" + self.x);
		}
		self.animate();
	};
	self.grow = function () {
		self.currentHeight += 50;
		self.currentHeight += sharkLevel > 6 ? 25 : 0;
		self.currentHeight += sharkLevel > 8 ? 50 : 0;
		self.currentWidth = self.currentHeight * self.widthRatio;
		self.shark.width = self.currentHeight * self.widthRatio;
		self.shark.height = self.currentHeight;
		//self.collisionBody.width = self.height / 2;
		//self.collisionBody.height = self.height / 2;
		self.collisionBody.width = self.currentWidth * 0.45;
		self.collisionBody.height = self.currentWidth * 0.45;
		self.collisionBody.x = self.shark.width * 0.25;
		self.collisionBody.y = self.height * 0.05;
		self.bones.width = self.shark.width;
		self.bones.height = self.shark.height;
		self.x -= 15;
		//self.shark.x -= 15;
		//self.collisionBody.x -= 15;
	};
	self.animate = function () {
		// Simulate swimming by moving the shark up and down
		var swimAmplitude = 5; // Amplitude of the swimming motion
		var swimFrequency = 0.1; // Frequency of the swimming motion
		self.shark.y = Math.sin(LK.ticks * swimFrequency) * swimAmplitude;
		// Simulate swimming by changing the width and height slightly
		var sizeAmplitude = 0.05; // Amplitude of the size change
		self.shark.width = self.currentWidth * (1 + sizeAmplitude * Math.sin(LK.ticks * swimFrequency));
		self.shark.height = self.currentHeight * (1 + sizeAmplitude * Math.cos(LK.ticks * swimFrequency));
	};
});
var CurrentTarget = Container.expand(function () {
	var self = Container.call(this);
	self.target = null;
	self.updateTarget = function (fishType) {
		if (self.target) {
			self.target.destroy();
		}
		self.target = self.attachAsset('fish' + fishType, {
			anchorX: 0.5,
			anchorY: 0.5
		});
		// Calculate aspect ratio
		var aspectRatio = self.target.width / self.target.height;
		// Limit size within 200x100 while keeping aspect ratio
		if (self.target.width > 200 || self.target.height > 100) {
			if (aspectRatio > 2) {
				self.target.width = 200;
				self.target.height = 200 / aspectRatio;
			} else {
				self.target.height = 100;
				self.target.width = 100 * aspectRatio;
			}
		}
		self.target.x = 2048 - 100;
		self.target.y = 50;
	};
});
// Fish class
var Fish = Container.expand(function (fishType) {
	var self = Container.call(this);
	self.fishType = fishType;
	self.fish = self.attachAsset('fish' + fishType, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.collisionBody = self.attachAsset('collisionBody', {
		anchorX: 0.5,
		anchorY: 0.5,
		alpha: isDebug ? 0.7 : 0,
		x: -self.fish.width * 0.25,
		width: self.fish.height * 0.75,
		height: self.fish.height * 0.75
	});
	self.speed = 5 + sharkLevel * 1.5;
	self.fleeOffset = 512 + 100 * self.fishType;
	self.update = function () {
		if (!isPlaying) {
			return;
		}
		if (self.fishType <= sharkLevel && Math.abs(self.x - babyShark.x) <= self.fleeOffset && Math.abs(self.y - babyShark.y) <= self.fleeOffset) {
			self.y += self.y > babyShark.y ? self.speed : -self.speed; // Move away vertically in the opposite y direction to the shark
			if (self.y > 2732 - self.fish.height * 0.5) {
				self.y = 2732 - self.fish.height * 0.5;
			}
			if (self.y < topBorderY + self.fish.height * 0.5) {
				self.y = topBorderY + self.fish.height * 0.5;
			}
		}
		self.x -= self.speed;
		if (self.x < -self.width || self.y < -self.height || self.y > 2732 + self.height) {
			self.destroy();
		}
		self.animate();
	};
	self.animate = function () {
		// Simulate swimming by moving the fish up and down
		var swimAmplitude = 2; // Further reduced amplitude of the swimming motion
		var swimFrequency = 0.2; // Frequency of the swimming motion
		self.fish.y = Math.sin(LK.ticks * swimFrequency) * swimAmplitude;
		// Simulate swimming by changing the width and height slightly
		var sizeAmplitude = 0.01; // Further reduced amplitude of the size change
		self.fish.width = self.fish.width * (1 + sizeAmplitude * Math.sin(LK.ticks * swimFrequency));
		self.fish.height = self.fish.height * (1 + sizeAmplitude * Math.cos(LK.ticks * swimFrequency));
	};
});
var ProgressBar = Container.expand(function () {
	var self = Container.call(this);
	// Create the frame of the progress bar
	self.frame = self.attachAsset('progressFrame', {
		anchorX: 0,
		anchorY: 0.5,
		alpha: 0.8
	});
	// Create the bar itself
	self.bar = self.attachAsset('progressBar', {
		anchorX: 0,
		anchorY: 0.5,
		alpha: 0.8,
		width: 0
		// Initial width is 0
		//height: self.frame.height
	});
	// Method to update the progress bar
	self.updateProgress = function (progress, maxProgress) {
		var newWidth = progress % maxProgress / maxProgress * self.frame.width;
		self.bar.width = newWidth;
	};
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x0000ff // Init game with blue background
});

/**** 
* Game Code
****/ 
function loopBgMusic() {
	// This function will handle looping background music
	var currentTime = Date.now();
	if (currentTime - lastBgMusicPlayTime >= 10000) {
		// 10 seconds interval
		bgMusic.play();
		lastBgMusicPlayTime = currentTime;
	}
}
// Global variable declarations
var bgMusic = LK.getSound('bgMusic');
var crunchSound = LK.getSound('crunch');
var topBorderY = 250;
var babyShark;
var nbFishTypes = 10;
var fishes = [];
var score;
var scoreTxt;
var currentProgressTxt;
var debugTxt;
var isDebug = false; // Global variable for debugging mode
var isPlaying = false; // Global variable to track if the game is currently playing
var gameEnded = false; // Global variable to track if the game has ended
var sharkLevel = 1;
var currentProgress = 0;
var progressBar;
var lastCollisionCheckTimeFish1 = 0; // Global variable to track the last collision check time for Fish1
var collisionCheckDelay = 128; // Global variable for collision check delay in milliseconds
var background1;
var lastCollisionCheckTime = 0; // Global variable to track the last collision check time for fishes;
var nbFishPerLevel = 10; // Global variable for the number of fish per level
var lastBgMusicPlayTime = 0; // Global variable to track the last background music play time
var startButton; // Declare startButton as a global variable
function spawnFish(fishType) {
	if (fishType > nbFishTypes) {
		fishType = nbFishTypes;
	}
	var fish = new Fish(fishType);
	fish.x = 2048 + fish.width;
	fish.y = Math.random() * (2732 - topBorderY - fish.height) + topBorderY + fish.height / 2;
	fishes.push(fish);
	game.addChild(fish);
}
function checkCollision(obj1, obj2) {
	// Calculate the center positions of the collision bodies
	var obj1CenterX = obj1.x + obj1.collisionBody.x;
	var obj1CenterY = obj1.y + obj1.collisionBody.y;
	var obj2CenterX = obj2.x + obj2.collisionBody.x;
	var obj2CenterY = obj2.y + obj2.collisionBody.y;
	// Calculate the distance between the centers
	var dx = obj1CenterX - obj2CenterX;
	var dy = obj1CenterY - obj2CenterY;
	var distance = Math.sqrt(dx * dx + dy * dy);
	// Calculate the sum of the radii
	var obj1Radius = obj1.collisionBody.width / 2;
	var obj2Radius = obj2.collisionBody.width / 2;
	var sumRadii = obj1Radius + obj2Radius;
	// Return true if the distance is less than the sum of the radii
	return distance < sumRadii;
}
function spawnFishes() {
	if (LK.ticks % 120 == 0) {
		spawnFish(sharkLevel);
	}
	if (LK.ticks % 360 == 0) {
		spawnFish(sharkLevel + 1);
	}
	if (LK.ticks % 1200 == 0) {
		var randomFishType = Math.floor(Math.random() * (nbFishTypes - (sharkLevel + 2) + 1)) + (sharkLevel + 2);
		spawnFish(randomFishType);
	}
}
function updateFishCollisions() {
	var currentTime = Date.now();
	if (currentTime - lastCollisionCheckTime < collisionCheckDelay) {
		return;
	}
	lastCollisionCheckTime = currentTime;
	var offset = babyShark.shark.width * 1.5; // Define the x offset range based on baby shark's width
	for (var i = fishes.length - 1; i >= 0; i--) {
		if (Math.abs(babyShark.x - fishes[i].x) > offset) {
			continue; // Skip fishes outside the x offset range
		}
		if (checkCollision(babyShark, fishes[i])) {
			// Play crunch sound
			crunchSound.play();
			if (fishes[i].fishType <= sharkLevel) {
				// Baby shark eats the fish
				score += fishes[i].fishType * 10;
				scoreTxt.setText(score);
				currentProgress += 1;
				currentProgressTxt.setText(currentProgress + "/" + nbFishPerLevel);
				progressBar.updateProgress(currentProgress, nbFishPerLevel);
				if (currentProgress >= nbFishPerLevel) {
					sharkLevel += 1;
					currentProgress = 0;
					babyShark.grow();
					currentTarget.updateTarget(sharkLevel);
					LK.getSound('levelUp').play(); // Play level up sound
					if (sharkLevel > 5) {
						nbFishPerLevel -= 1;
					}
					if (sharkLevel > nbFishTypes) {
						LK.setScore(score);
						LK.getSound('lose').play();
						LK.setTimeout(function () {
							LK.showGameOver();
						}, 1500);
					}
					LK.setTimeout(function () {
						currentProgressTxt.setText(currentProgress + "/" + nbFishPerLevel);
					}, 1000);
				}
				fishes[i].destroy();
				fishes.splice(i, 1);
			} else {
				// Baby shark gets eaten
				crunchSound.stop(); // Stop crunch sound
				LK.effects.flashScreen(0xff0000, 1000);
				LK.setScore(score);
				isPlaying = false;
				gameEnded = true;
				bgMusic.stop();
				babyShark.shark.alpha = 0; // Set shark alpha to 0
				babyShark.bones.alpha = 1; // Set bones alpha to 1
				LK.getSound('lose').play();
				LK.setTimeout(function () {
					LK.showGameOver();
				}, 1500);
			}
			return;
		}
	}
}
function updateBackgrounds() {
	background1.x -= 2;
	background2.x -= 2;
	if (background1.x <= -2732 / 2) {
		background1.x = 2732 + 2732 / 2;
	}
	if (background2.x <= -2732 / 2) {
		background2.x = 2732 + 2732 / 2;
	}
}
function gameInitialize() {
	background1 = LK.getAsset('background', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 2732 / 2,
		y: 2732 / 2
	});
	background2 = LK.getAsset('background2', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 2732 + 2732 / 2,
		y: 2732 / 2
	});
	game.addChild(background1);
	game.addChild(background2);
	// Add banner asset after the backgrounds
	var banner = LK.getAsset('banner', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 2048 / 2,
		y: 125 // Position the banner at the top of the screen
	});
	game.addChild(banner);
	// Add start button asset
	startButton = LK.getAsset('startButton', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 2048 / 2,
		y: 2732 / 2 // Position the start button at the center of the screen
	});
	game.addChild(startButton);
	currentTarget = game.addChild(new CurrentTarget());
	currentTarget.updateTarget(1); // Initialize with the first fish type
	currentTarget.visible = false; // Set currentTarget to be invisible initially
	progressBar = new ProgressBar();
	progressBar.x = 0;
	progressBar.y = 250;
	game.addChild(progressBar);
	babyShark = game.addChild(new BabyShark());
	babyShark.visible = false;
	babyShark.x = 150;
	babyShark.y = 2732 / 2;
	babyShark.velocityY = 0;
	babyShark.collisionBody.visible = isDebug; // Show collision body if debugging
	// for debug
	for (var i = 1; i <= sharkLevel; i++) {
		babyShark.grow();
	}
	fish1s = [];
	fish2s = [];
	score = 0;
	scoreTxt = new Text2('0', {
		size: 130,
		fill: "#ffffff",
		dropShadow: true,
		dropShadowColor: "#000000",
		dropShadowBlur: 4,
		dropShadowDistance: 6
	});
	scoreTxt.anchor.set(0.5, 0);
	scoreTxt.visible = false; // Set score to be invisible initially
	LK.gui.top.addChild(scoreTxt);
	currentProgress = 0;
	currentProgressTxt = new Text2('0/10', {
		size: 80,
		fill: "#ffffff",
		dropShadow: true,
		dropShadowColor: "#000000",
		dropShadowBlur: 4,
		dropShadowDistance: 6
	});
	currentProgressTxt.anchor.set(1, -0.7);
	currentProgressTxt.visible = false; // Set currentProgressTxt to be invisible initially
	LK.gui.topRight.addChild(currentProgressTxt);
	debugTxt = new Text2(isDebug ? 'Debug Mode' : '', {
		size: 50,
		fill: "#ff0000",
		dropShadow: true,
		dropShadowColor: "#000000",
		dropShadowBlur: 4,
		dropShadowDistance: 6
	});
	debugTxt.anchor.set(0.5, 1);
	LK.gui.bottom.addChild(debugTxt);
}
game.down = function (x, y, obj) {
	if (!isPlaying) {
		game.removeChild(startButton);
		isPlaying = true;
		babyShark.visible = true;
		currentTarget.visible = true;
		scoreTxt.visible = true; // Make score visible when game starts
		currentProgressTxt.visible = true; // Make currentProgressTxt visible when game starts
	}
	if (gameEnded) {
		return;
	}
	babyShark.velocityY = -20;
	LK.getSound('jump').play();
};
game.update = function () {
	if (!isPlaying) {
		return;
	}
	updateBackgrounds();
	spawnFishes();
	updateFishCollisions();
	loopBgMusic();
};
gameInitialize();

===================================================================
--- original.js
+++ change.js
@@ -260,9 +260,10 @@
 	if (LK.ticks % 360 == 0) {
 		spawnFish(sharkLevel + 1);
 	}
 	if (LK.ticks % 1200 == 0) {
-		spawnFish(sharkLevel + 2);
+		var randomFishType = Math.floor(Math.random() * (nbFishTypes - (sharkLevel + 2) + 1)) + (sharkLevel + 2);
+		spawnFish(randomFishType);
 	}
 }
 function updateFishCollisions() {
 	var currentTime = Date.now();