Upit | Learn about creating the game Hyper Stocks with gen AI

/**** 
* Plugins
****/ 
var storage = LK.import("@upit/storage.v1", {
	bestScore: 0
});

/**** 
* Classes
****/ 
var al = Container.expand(function (value) {
	var self = Container.call(this);
	self.value = value;
	var label = new Text2('$' + value, {
		size: 70,
		fill: 0xFFFFFF
	});
	label.anchor.set(0.5, 0.5);
	self.addChild(label);
	self.alpha = 0;
	self.updatePosition = function (axisY) {
		var newY = axisY - self.value * epx - alfs / 2;
		if (newY > j.height * 0.82) {
			self.value += (nbMarkers - 1) * 25;
			label.setText('$' + self.value);
		} else if (newY < j.height * 0.07) {
			self.value -= (nbMarkers - 1) * 25;
			label.setText('$' + self.value);
		}
		self.y = axisY - self.value * epx - alfs / 2;
	};
});
var ax = Container.expand(function (ev) {
	var self = Container.call(this);
	var vin = 0.02;
	self.ev = ev;
	self.yValue = 0;
	self.updateSlide = function () {
		var sd = Math.max(0, svh[gi + 1] - 100);
		var targetY = ll + sd * epx;
		if (!self.ev) {
			var deltaY = (targetY - self.y) * vin;
			self.y += deltaY;
			if (Math.abs(deltaY) < 1) {
				self.y = targetY;
			}
			if (msv && self.y <= ll) {
				self.y = ll;
				msv = 0;
			}
			self.alpha = self.y > j.height * 0.85 ? 0 : 1;
		}
	};
	self.drawAxis = function () {
		var axisGraphics = self.addChild(LK.getAsset('axis', {
			height: 4
		}));
	};
});
var bb = Container.expand(function () {
	var self = Container.call(this);
	self.currentText = "Buy";
	self.updateButtonState = function () {
		var stockPrice = svh[gi];
		var canBuy = p.getBalance() >= stockPrice && stockPrice > 0 && mar;
		this.alpha = canBuy ? 1 : 0.5;
		this.interactive = canBuy;
	};
	self.setText = function (text, isPressed) {
		self.currentText = text;
		var buttonTextSize = isPressed ? 230 : 250;
		var buttonText = new Text2(text, {
			size: buttonTextSize,
			fill: 0xFFFFFF,
			font: "'Arial-BoldMT', 'Arial', sans-serif"
		});
		buttonText.anchor.set(0.5, 0.5);
		self.addChild(buttonText);
	};
	var buttonGraphics = self.attachAsset('bigButton', {
		anchorX: 0.5,
		anchorY: 0.5,
		tint: 0xFFA500
	});
	self.on('down', function () {
		if (self.interactive) {
			buttonGraphics = self.attachAsset('bigButtonPressed', {
				anchorX: 0.5,
				anchorY: 0.5,
				tint: 0xFFA500
			});
			LK.effects.flashScreen(0xFFA500, 100);
			self.setText(self.currentText, true);
			buyStock(1);
		}
	}).on('up', function () {
		buttonGraphics = self.attachAsset('bigButton', {
			anchorX: 0.5,
			anchorY: 0.5,
			tint: 0xFFA500
		});
		self.setText(self.currentText);
		self.updateButtonState();
	});
	self.updateButtonState();
});
var bi = Container.expand(function () {
	var self = Container.call(this);
	var iconGraphics = self.attachAsset('balanceIcon', {
		anchorX: 0.5,
		anchorY: 0.5
	});
});
var cf = Container.expand(function () {
	var self = Container.call(this);
	self.particles = [];
	var confettiColors = [0xFF0000, 0xFF7F00, 0xFFFF00, 0x00FF00, 0x0000FF, 0x4B0082, 0x9400D3];
	for (var i = 0; i < 50; i++) {
		var particle = self.addChild(new cp(confettiColors[i % confettiColors.length]));
		particle.x = Math.random() * j.width;
		particle.y = Math.random() * j.height;
		particle.vx = (Math.random() - 0.5) * 10;
		particle.vy = (Math.random() - 0.5) * 10;
		self.particles.push(particle);
	}
	self._update_migrated = function () {
		self.particles.forEach(function (particle) {
			particle.x += particle.vx;
			particle.y += particle.vy;
			particle.vy += 0.2;
			if (particle.y > j.height) {
				particle.y = 0;
				particle.vy = (Math.random() - 0.5) * 10;
			}
		});
	};
});
var cp = Container.expand(function (color) {
	var self = Container.call(this);
	var confettiGraphics = self.attachAsset('confetti', {
		width: 40,
		height: 40,
		color: color,
		anchorX: 0.5,
		anchorY: 0.5
	});
	confettiGraphics.rotation = Math.random() * Math.PI * 2;
});
var gs = Container.expand(function () {
	var self = Container.call(this);
	self.index1 = null;
	self.pad = 0;
	self.paf = 0;
	self.x1 = 0;
	self.y1 = 0;
	self.x2 = 0;
	self.y2 = 0;
	self.ater = false;
	var vin = .2;
	self.updateSlide = function () {
		if (ms) {
			if (self.index1 == gi) {
				var dsa1 = Math.abs(self.x - j.width * 0.25) / (j.width * 0.5);
				if (self.x < j.width * 0.35) {
					sa = Math.max(1, sa * (1 - dsa1));
				} else if (self.x > j.width * 0.65) {
					sa = Math.min(15, sa * (1 + dsa1));
				}
			}
			self.x -= sa * 1;
		}
		if (msv) {
			var currentDelta = horizontalAxis.y - ll;
			var targetY = ll - self.pad * epx + currentDelta;
			var deltaY = (targetY - self.y) * vin;
			self.y += deltaY;
			if (Math.abs(deltaY) <= 1) {
				self.y = targetY;
			}
		}
	};
	var segmentGraphics = self.attachAsset('segment', {
		anchorY: 0.5
	});
});
var pr = Container.expand(function () {
	var self = Container.call(this);
	self.balance = 100;
	self.stocks = 0;
	self.orders = 0;
	self.liquidate = function () {
		while (self.stocks > 0) {
			self.sellStock(1);
		}
		updateBalanceDisplay();
	};
	self.buyStock = function (quantity) {
		var price = svh[gi];
		var cost = price * quantity;
		if (self.balance >= cost) {
			self.balance -= cost;
			self.stocks += quantity;
			self.orders++;
			sellButton.updateButtonState();
			LK.getSound('buy').play(); // Play buy sound
		} else {
			LK.effects.flashScreen(0xFF0000, 100);
		}
	};
	self.sellStock = function (quantity) {
		if (self.stocks > 0) {
			var price = svh[gi];
			self.balance += price * quantity;
			self.stocks -= quantity;
			self.orders++;
			sellButton.updateButtonState();
			LK.getSound('sell').play(); // Play sell sound
		}
	};
	self.getBalance = function () {
		return self.balance;
	};
	self.getStockCount = function () {
		return self.stocks;
	};
	self.getPortfolio = function () {
		return self.stocks;
	};
});
var sb = Container.expand(function () {
	var self = Container.call(this);
	self.currentText = "ON";
	self.setText = function (text, isPressed) {
		self.currentText = text;
		var buttonTextSize = isPressed ? 230 : 250;
		var buttonText = new Text2(text, {
			size: buttonTextSize,
			fill: 0xFFFFFF,
			font: "'Arial-BoldMT', 'Arial', sans-serif"
		});
		buttonText.anchor.set(0.5, 0.5);
		self.addChild(buttonText);
	};
	var buttonGraphics = self.attachAsset('bigButton', {
		anchorX: 0.5,
		anchorY: 0.5,
		tint: 0x008000
	});
	self.on('down', function () {
		buttonGraphics = self.attachAsset('bigButtonPressed', {
			anchorX: 0.5,
			anchorY: 0.5,
			tint: 0x008000
		});
		LK.effects.flashScreen(0x008000, 100);
		self.setText(self.currentText, true);
		sellStock(1);
	}).on('up', function () {
		buttonGraphics = self.attachAsset('bigButton', {
			anchorX: 0.5,
			anchorY: 0.5,
			tint: 0x008000
		});
		self.setText(self.currentText);
	});
});
var si = Container.expand(function () {
	var self = Container.call(this);
	var iconGraphics = self.attachAsset('stockIcon', {
		anchorX: 0.5,
		anchorY: 0.5
	});
});
var ti = Container.expand(function () {
	var self = Container.call(this);
	var iconGraphics = self.attachAsset('timerIcon', {
		anchorX: 0.5,
		anchorY: 0.5
	});
});

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

/**** 
* Game Code
****/ 
var j = game;
function ce() {
	return j.children.some(function (child) {
		return child.name === 'confetti';
	});
}
function gr() {
	mar = false;
	p.liquidate();
	var profit = p.getBalance() - md;
	LK.setScore(profit);
	var popup = j.addChild(LK.getAsset('popup', {
		anchorX: 0.5,
		anchorY: 0.5
	}));
	popup.x = j.width / 2;
	popup.y = j.height / 2 - 300;
	resultText = 'Initial:\t$' + md + '\r\n' + 'Final:\t\t$' + p.getBalance().toFixed(0) + '\r\n' + 'Profit:' + '\r\n' + 'Best:';
	var finalBalanceText = new Text2(resultText, {
		size: 100,
		fill: 0xFFFFFF,
		anchorX: 0.5,
		anchorY: 0.5
	});
	finalBalanceText.x = j.width / 2 - 500;
	finalBalanceText.y = j.height / 2 - 900;
	j.addChild(finalBalanceText);
	var profitTextColor = profit > 0 ? '#00ff00' : profit < 0 ? '#ff0000' : '#ffffff';
	var profitText = new Text2('$' + profit.toFixed(0), {
		size: 120,
		fill: profitTextColor,
		anchorX: 0.5,
		anchorY: 0.5
	});
	profitText.x = j.width / 2 - 200;
	profitText.y = j.height / 2 - 700;
	j.addChild(profitText);
	//// 
	if (profit > bestScore) {
		bestScore = profit;
		storage.bestScore = bestScore;
	}
	var bestText = new Text2('$' + parseInt("" + bestScore), {
		size: 100,
		fill: 0xFFFFFF,
		anchorX: 0.5,
		anchorY: 0.5
	});
	bestText.x = j.width / 2 - 200;
	bestText.y = j.height / 2 - 550;
	j.addChild(bestText);
	//// 
	if (profit > 0 && !ce()) {
		var confetti = j.addChild(new cf());
		confetti.name = 'confetti';
		LK.on('tick', function () {
			confetti._update_migrated();
		});
		LK.setTimeout(function () {
			LK.showYouWin();
		}, 3000);
	} else {
		LK.setTimeout(function () {
			LK.showGameOver();
		}, 3000);
	}
	if (!endSoundPlayed) {
		if (profit > 0) {
			LK.getSound('victory').play(); // Play victory sound
		} else if (profit < 0) {
			LK.getSound('failed').play(); // Play failed sound
		}
		endSoundPlayed = true; // Set flag to true after playing sound
	}
}
var sa = 6.5;
var sav = 0.10;
var msv = 0;
var vst = 500;
var ul = j.height * 0.5;
var ll = j.height * 0.75;
var alfs = 70;
var mar = false;
var ms = false;
var dip = false;
var p = new pr();
var ntv = 180;
var ss = [];
var svh = [50];
var gi = 0;
var gss = [];
var cs = null;
var gp = [];
var jl = j.width;
var sl = jl / 5;
var epx = j.height * 0.5 / 100;
var md = 100;
var mde = 10;
var dmx = 100;
var sdi = null;
var sps = 2.0;
var sds = [];
var endSoundPlayed = false;
var bestScore = storage.bestScore || 0;
var farBackground = j.addChild(LK.getAsset('farBackground', {
	anchorX: 0.5,
	anchorY: 0.5,
	alpha: 0.25
}));
farBackground.x = j.width / 2;
farBackground.y = j.height / 2;
var boardBackground = j.addChild(LK.getAsset('board', {
	anchorX: 0.5,
	anchorY: 0.5
}));
boardBackground.x = j.width / 2;
boardBackground.y = j.height * 0.9;
var boardBorder = j.addChild(LK.getAsset('boardBorder', {
	anchorX: 0.5,
	anchorY: 0.5
}));
boardBorder.x = j.width / 2;
boardBorder.y = j.height * 0.85;
var background = j.addChild(LK.getAsset('background', {
	anchorX: 0.5,
	anchorY: 0.5
}));
background.x = 1024;
background.y = 2732 * 0.71;
var horizontalAxis = j.addChild(new ax(false));
horizontalAxis.yValue = j.height * 0.75;
horizontalAxis.drawAxis();
horizontalAxis.y = horizontalAxis.yValue;
horizontalAxis.width = j.width;
horizontalAxis.height = 10;
horizontalAxis.x = 0;
var verticalAxis = new ax(true);
verticalAxis.drawAxis();
verticalAxis.rotation = Math.PI / 2;
verticalAxis.x = 20;
verticalAxis.width = j.height;
verticalAxis.height = 10;
verticalAxis.y = 0;
var axisLabels = [];
var nbMarkers = 7;
for (var i = 0; i < nbMarkers; i++) {
	var axisLabel = new al(i * 25);
	axisLabel.x = verticalAxis.x + 60;
	axisLabel.updatePosition(horizontalAxis.y);
	axisLabel.alpha = 1;
	axisLabels.push(axisLabel);
	j.addChild(axisLabel);
}
var buyButton = j.addChild(new bb());
buyButton.setText('Buy');
buyButton.x = j.width * 0.25;
buyButton.y = j.height - buyButton.height / 2 - 20;
var sellButton = j.addChild(new sb());
sellButton.setText('Sell');
sellButton.x = j.width * 0.75;
sellButton.y = j.height - sellButton.height / 2 - 20;
sellButton.updateButtonState = function () {
	if (p.getStockCount() > 0) {
		this.alpha = 1;
		this.interactive = true;
	} else {
		this.alpha = 0.5;
		this.interactive = false;
	}
};
sellButton.updateButtonState();
var timerIcon = j.addChild(new ti());
var timerText = new Text2('000', {
	size: 100,
	fill: 0xFFFFFF,
	anchorX: 0.5
});
timerText.anchor.set(-.95, -0.7);
LK.gui.topLeft.addChild(timerText);
timerIcon.x = j.width * 0.165;
timerIcon.y = j.height * 0.025;
var balanceIcon = j.addChild(new bi());
balanceIcon.x = j.width * 0.5;
balanceIcon.y = j.height * 0.025;
var stockIcon = j.addChild(new si());
stockIcon.x = j.width * 0.94;
stockIcon.y = j.height * 0.028;
var balanceText = new Text2('$' + p.getBalance() + ' ', {
	size: 100,
	fill: 0xFFFFFF,
	anchorX: 0.5
});
balanceText.anchor.set(.5, -0.7);
LK.gui.top.addChild(balanceText);
var stocksNumber = new Text2(p.getPortfolio(), {
	size: 100,
	fill: 0xFFFFFF,
	anchorX: 0.5
});
stocksNumber.anchor.set(1.6, -0.7);
LK.gui.topRight.addChild(stocksNumber);
var verticalSlideAmount = 0;
var vsaText = new Text2('', {
	size: 50,
	fill: 0xFFFFFF
});
vsaText.anchor.set(0, 0);
LK.gui.topLeft.addChild(vsaText);
var stockValueText = new Text2('', {
	size: 75,
	fill: 0xFFFFFF
});
stockValueText.anchor.set(1, 4);
stockValueText.alpha = 0;
LK.gui.right.addChild(stockValueText);
function updateStockValueText() {
	if (gi < svh.length) {
		stockValueText.setText('$' + svh[gi + 1].toFixed(0));
	}
}
function updateBalanceDisplay() {
	balanceText.setText('$' + p.getBalance() + ' ');
	stocksNumber.setText(p.getStockCount());
	buyButton.updateButtonState();
}
function buyStock(stock) {
	p.buyStock(stock, 1);
	updateBalanceDisplay();
}
function sellStock(stock) {
	p.sellStock(stock, 1);
	updateBalanceDisplay();
}
function dss() {
	var hasFinished = hasFinished || gi >= gp.length - 1;
	if (hasFinished) {
		gr();
		return;
	}
	if (!dip) {
		var previousValue = svh[gi];
		var newValue = svh[gi + 1];
		if (newValue > previousValue) {
			LK.getSound('increase').play();
		} else if (newValue < previousValue) {
			LK.getSound('decrease').play();
		}
		updateStockValueText();
		buyButton.updateButtonState();
		var prp = gp[gi];
		var sep = gp[gi + 1];
		var ec1 = sep.y - prp.y;
		var ec2 = sep.x - prp.x;
		var aes = Math.atan2(ec1, ec2);
		var lon = Math.sqrt(Math.pow(sep.x - prp.x, 2) + Math.pow(sep.y - prp.y, 2));
		var pres = gss.length > 0 ? gss[gss.length - 1] : null;
		var pr1 = pres ? pres.x + Math.cos(pres.rotation) * pres.width : gp[gi].x;
		var pr2 = pres ? pres.y + Math.sin(pres.rotation) * pres.width : gp[gi].y;
		prp.x = pr1;
		prp.y = pr2 > ll ? ll : pr2;
		var fie = prp.y + Math.sin(aes) * lon;
		if (fie > ll) {
			lon = (ll - prp.y) / Math.sin(aes);
		}
		if (fie < ul || fie >= j.height * 0.5 && svh[gi + 1] >= 100 && ec1 != 0) {
			msv = -1 * Math.sign(ec1);
		} else {
			msv = 0;
		}
		dip = true;
		dar(j, gi, prp.x, prp.y, aes, lon, 0.5);
	}
}
function dar(jr, nu, p1, p2, an, lon, du) {
	var arre = jr.addChild(new gs());
	arre.index1 = nu;
	arre.pad = svh[nu];
	arre.paf = svh[nu + 1];
	arre.x1 = p1;
	arre.y1 = p2;
	arre.rotation = an;
	arre.width = 1;
	arre.height = 20;
	gss.push(arre);
	arre.x = p1;
	arre.y = p2;
	var startTime = Date.now();
	var endTime = startTime + du * 1000 * sps;
	var mlg = function mlg() {
		if (!mar) {
			return;
		}
		var currentTime = Date.now();
		var timeElapsed = currentTime - startTime;
		var nlo = Math.min(timeElapsed / (du * 1000 * sps) * lon, lon);
		arre.width = nlo;
		if (currentTime < endTime) {
			LK.setTimeout(mlg, 16);
		} else {
			if (!ms && arre.x + arre.width / 2 >= j.width * 0.5) {
				ms = true;
			}
			arre.ater = true;
			gi++;
			dip = false;
		}
	};
	mlg();
}
function sj() {
	var previousValue = svh[svh.length - 1];
	for (var i = 0; i < 5; i++) {
		var delta = Math.floor((Math.random() - 0.5) * mde);
		var newValue = Math.max(1, previousValue + (previousValue == 1 ? Math.abs(delta) : delta));
		if (newValue > previousValue) {
			LK.getSound('increase').play();
		}
		svh.push(newValue);
		previousValue = newValue;
	}
	previousValue = svh[svh.length - 1];
	for (var i = 5; i < ntv; i++) {
		var delta = Math.floor((Math.random() - 0.5) * dmx);
		var newValue = Math.max(1, previousValue + (previousValue == 1 ? Math.abs(delta) : delta));
		if (newValue < previousValue) {
			LK.getSound('decrease').play();
		}
		svh.push(newValue);
		previousValue = newValue;
	}
	buyButton.updateButtonState();
	var x, y;
	for (var i = 0; i < svh.length; i++) {
		x = sl * i;
		y = j.height * 0.75 - svh[i] * epx;
		gp.push({
			x: x,
			y: y
		});
	}
	mar = true;
	LK.setTimeout(function () {
		stockValueText.alpha = 1;
	}, 100);
	sdi = LK.setInterval(dss, 10);
	var timerUpdateInterval = LK.setInterval(function () {
		var currentTime = Math.max(0, ntv - gi - 1);
		timerText.setText(currentTime.toString().padStart(3, '0'));
		// Play countdown sound during the last 5 seconds
		if (currentTime < 5 && currentTime > 0) {
			LK.getSound('finalCountdown').play();
		}
	}, 1000);
}
LK.on('tick', function () {
	if (!mar) {
		return;
	}
	gss.forEach(function (segment) {
		segment.updateSlide();
	});
	horizontalAxis.updateSlide();
	axisLabels.forEach(function (label) {
		label.updatePosition(horizontalAxis.y);
	});
});
var startTime = Date.now();
var countdownText = new Text2('3', {
	size: 300,
	fill: 0xFFFFFF,
	anchorX: 0.5,
	anchorY: 0.5
});
countdownText.x = j.width / 2 - 100;
countdownText.y = j.height / 3;
j.addChild(countdownText);
var countdown = 3;
var countdownInterval = LK.setInterval(function () {
	countdown--;
	if (countdown > 0) {
		countdownText.setText(countdown.toString());
		LK.getSound('countdown').play(); // Play countdown sound
	} else {
		LK.clearInterval(countdownInterval);
		countdownText.destroy();
		LK.getSound('countdownGo').play(); // Play final countdown sound
		sj();
	}
}, 1000);
Images

Sounds & Music
