Upit | Learn about creating the game Tribble Trouble with gen AI

var Exit = Container.expand(function (x, y) {
	var self = Container.call(this);
	var exitGraphics = self.createAsset('exit', 'Exit Button Graphics', 0.5, 0.5);
	self.addChild(exitGraphics);
	self.x = x || 0;
	self.y = y || 0;
	self.on('down', function () {
		LK.showGameOver();
	});
});
var Button = Container.expand(function (onClick, x, y) {
	var self = Container.call(this);
	var buttonGraphics = self.createAsset('button', 'Button Graphics', 1, 0.5);
	self.addChild(buttonGraphics);
	self.x = x || 0;
	self.y = y || 0;
	self.on('down', function () {
		if (!self.interval) {
			self.interval = LK.setInterval(onClick, 500);
			buttonGraphics.tint = 0xff0000;
		} else {
			LK.clearInterval(self.interval);
			self.interval = null;
			buttonGraphics.tint = 0x00ff00;
		}
	});
});
var Cell = Container.expand(function () {
	var self = Container.call(this);
	self.filled = false;
	var empty = self.createAsset('cell', 'Filled with a cell (empty)', .5, .5);
	empty.alpha = .0;
	var filled;
	var currentOffset;
	empty.y = 2;
	self.setFill = function (isFilled, asset, offset) {
		self.filled = isFilled;
		empty.visible = !self.filled;
		if (isFilled) {
			if (asset) {
				asset.x = 0;
				asset.y = [-25, -10, -20, -25, -25, -20][offset] || -15;
				currentOffset = offset;
				self.addChild(asset);
				filled = asset;
			}
		} else {
			if (filled) {
				filled.destroy();
				filled = null;
			}
		}
	};
	self.tick = function (i, j) {
		if (filled) {
			var offset = Math.cos(((i + j) * 3 + LK.ticks / 2) / 6) / 20;
			var ty = [-25, -10, -20, -25, -25, -20][currentOffset] || -15;
			filled.y = ty + Math.abs(offset * 200) - 5;
			filled.rotation = offset;
		}
	};
	self.setFill(false);
});
var Block = Container.expand(function (board) {
	var self = Container.call(this);
	var ColorUtils = {
		hsvToRgb: function (h, s, v) {
			var r, g, b;
			var i = Math.floor(h * 6);
			var f = h * 6 - i;
			var p = v * (1 - s);
			var q = v * (1 - f * s);
			var t = v * (1 - (1 - f) * s);
			switch (i % 6) {
				case 0:
					(r = v, g = t, b = p);
					break;
				case 1:
					(r = q, g = v, b = p);
					break;
				case 2:
					(r = p, g = v, b = t);
					break;
				case 3:
					(r = p, g = q, b = v);
					break;
				case 4:
					(r = t, g = p, b = v);
					break;
				case 5:
					(r = v, g = p, b = q);
					break;
			}
			return (Math.round(r * 255) << 16) + (Math.round(g * 255) << 8) + Math.round(b * 255);
		}
	};
	var ShapeTypes = {
		Alpha: [[1, 0, 1, 0], [0, 1, 0, 1]],
		Beta: [[1, 1, 1]],
		Gamma: [[1, 1, 1], [1, 0, 1], [1, 1, 1]],
		Delta: [[1, 0, 0], [1, 0, 0], [1, 1, 1]],
		Zeta: [[1, 1], [1, 1]],
		Eta: [[1, 0], [1, 1], [0, 1]]
	};
	var shapes = Object.values(ShapeTypes);
	var offset = Math.floor(Math.random() * shapes.length);
	self.offset = offset;
	self.shape = shapes[offset];
	var hue = offset % shapes.length / shapes.length;
	self.color = ColorUtils.hsvToRgb(hue, 0.6, 1);
	var ShapeUtils = {
		rotateShapeRandomly: function (shape) {
			var rotations = Math.floor(Math.random() * 4);
			for (var r = 0; r < rotations; r++) {
				shape = shape[0].map((val, index) => shape.map(row => row[index]).reverse());
			}
			return shape;
		}
	};
	self.shape = ShapeUtils.rotateShapeRandomly(self.shape);
	self.blocks = [];
	var background = self.createAsset('background', 'Background Graphics', .5, .5);
	background.alpha = 0;
	var blockSize = 100;
	background.width = 4 * blockSize;
	background.height = 4 * blockSize;
	self.addChild(background);
	self.offsetX = 0;
	self.offsetY = 0;
	var blockOffsetX = (background.width / 2 - self.shape[0].length * blockSize) / 2 - blockSize / 2;
	var blockOffsetY = (background.height / 2 - self.shape.length * blockSize) / 2 - blockSize / 2;
	for (var i = 0; i < self.shape.length; i++) {
		for (var j = 0; j < self.shape[i].length; j++) {
			if (self.shape[i][j] === 1) {
				var block = self.createAsset('block_' + offset, 'Block Graphics', .5, .5);
				block.x = j * blockSize + blockOffsetX;
				block.y = i * blockSize + blockOffsetY;
				self.blocks.push(block);
				self.addChild(block);
			}
		}
	}
	self.startX = 0;
	self.startY = 0;
	self.moveTowardsHomePosition = function () {
		var dx = self.startX - self.x;
		var dy = self.startY - self.y;
		var distance = Math.sqrt(dx * dx + dy * dy);
		if (distance > 1) {
			self.x += dx * 0.3;
			self.y += dy * 0.3;
		} else {
			self.x = self.startX;
			self.y = self.startY;
		}
	};
	var currentX = 0;
	var currentY = 0;
	self.moveToDragTarget = function () {
		var ox = -this.targetX;
		var oy = (LK.is.mobile ? 400 : 0) - this.targetY;
		this.targetX += ox / 5;
		this.targetY += oy / 5;
		this.x = currentX - this.targetX;
		this.y = currentY - this.targetY;
	};
	self.move = function (x, y) {
		currentX = x;
		currentY = y;
		self.x = x - this.targetX;
		self.y = y - this.targetY;
	};
	self.setStartPosition = function (x, y) {
		self.startX = x;
		self.startY = y;
	};
	self.getOverlappingCells = function () {
		var cells = [];
		var boardPos = {
			x: -board.x + self.x + 200 * 4 + blockOffsetX + 200,
			y: -board.y + self.y + 200 * 4 + blockOffsetY + 200
		};
		var startX = Math.floor(boardPos.x / 100);
		var startY = Math.floor(boardPos.y / 100);
		for (var i = 0; i < self.shape.length; i++) {
			for (var j = 0; j < self.shape[i].length; j++) {
				if (self.shape[i][j] === 1) {
					var cell = board.grid && board.grid[startY + i] && board.grid[startY + i][startX + j];
					if (cell && !cell.filled) {
						cells.push(cell);
					} else {
						return null;
					}
				}
			}
		}
		return cells;
	};
	self.rotateShapeRandomly = function () {
		var rotations = Math.floor(Math.random() * 4);
		for (var r = 0; r < rotations; r++) {
			self.shape = self.shape[0].map((val, index) => self.shape.map(row => row[index]).reverse());
		}
	};
});
var Board = Container.expand(function () {
	var self = Container.call(this);
	self.particles = [];
	var boardBackground = self.createAsset('boardBackground', 'Board Background Graphics', 0.5, 0.5);
	boardBackground.width = 20 * 98;
	boardBackground.height = 20 * 98;
	boardBackground.x = 0;
	boardBackground.y = 0;
	boardBackground.alpha = 0.5;
	self.grid = new Array(20).fill(null).map(() => new Array(20).fill(null));
	var size = 98;
	var totalWidth = 20 * size;
	var totalHeight = 20 * size;
	for (var i = 0; i < 20; i++) {
		for (var j = 0; j < 20; j++) {
			var cell = new Cell();
			cell.x = i * size - totalWidth / 2 + size / 2;
			cell.y = j * size - totalHeight / 2 + size / 2;
			self.grid[j][i] = cell;
			self.addChild(cell);
		}
	}
	self.checkLines = function () {
		var changes = [];
		var countNeighbors = function (x, y) {
			var count = 0;
			for (var dx = -1; dx <= 1; dx++) {
				for (var dy = -1; dy <= 1; dy++) {
					if (dx == 0 && dy == 0) continue;
					var nx = x + dx, ny = y + dy;
					if (nx >= 0 && nx < 20 && ny >= 0 && ny < 20 && self.grid[ny][nx].filled) count++;
				}
			}
			return count;
		};
		for (var y = 0; y < 20; y++) {
			for (var x = 0; x < 20; x++) {
				var cell = self.grid[y][x];
				var neighbors = countNeighbors(x, y);
				if (cell.filled) {
					if (neighbors < 2 || neighbors > 3) changes.push({
						cell: cell,
						filled: false
					});
				} else {
					if (neighbors == 3) {
						var blockAssetIndex = Math.floor(Math.random() * 6);
						var blockAsset = self.createAsset('block_' + blockAssetIndex, 'Block Graphics', .5, .5);
						changes.push({
							cell: cell,
							filled: true,
							asset: blockAsset,
							offset: blockAssetIndex
						});
					}
				}
			}
		}
		changes.forEach(function (change) {
			change.cell.setFill(change.filled, change.asset, change.offset);
			if (change.filled) {}
		});
		if (LK.getScore() < 1 && self.parent.highestScore > 1) {
			LK.showGameOver();
		}
	};
	self.tick = function () {
		var filledCellsCount = 0;
		for (var i = self.particles && self.particles.length - 1; i >= 0; i--) {
			var particle = self.particles[i];
			if (particle) {
				particle.tick();
				if (particle.alpha <= 0) {
					self.particles.splice(i, 1);
				}
			}
		}
		for (var i = 0; i < 20; i++) {
			for (var j = 0; j < 20; j++) {
				self.grid[i][j].tick(i, j);
				if (self.grid[i][j].filled) {
					filledCellsCount++;
				}
			}
		}
		LK.setScore(filledCellsCount);
		self.parent.updateScoreText(filledCellsCount);
	};
	self.placeBlock = function () {};
});
var Game = Container.expand(function () {
	var self = Container.call(this);
	self.highestScore = 0;
	Game.prototype.updateScoreText = function (score) {
		this.scoreTxt.setText(score.toString());
		this.updateHighestScore(score);
		if (score > 100) {
			this.blockCounter += 3;
		}
	};
	var gameBackground = self.createAsset('gameBackground', 'Background Graphics', .5, .5);
	gameBackground.x = 2048 / 2;
	gameBackground.y = 2732 / 2 + 65;
	var boardBackground = self.createAsset('boardBackground', 'Board Background Graphics', 0.5, 0.5);
	boardBackground.width = 20 * 98;
	boardBackground.height = 20 * 98;
	boardBackground.x = 0;
	boardBackground.y = 0;
	boardBackground.alpha = 0.0;
	var bottomStrip = self.createAsset('whiteStrip', 'White Background Strip', 0.5, 1);
	bottomStrip.width = boardBackground.width;
	bottomStrip.height = 410;
	bottomStrip.alpha = 0.3;
	bottomStrip.x = 2048 / 2;
	bottomStrip.y = 2732 - bottomStrip.height + 390;
	self.addChildAt(bottomStrip, 1);
	var exitButton = new Exit(200, bottomStrip.y - 200);
	self.addChild(exitButton);
	var checkLinesButton = new Button(function () {
		board.checkLines();
	});
	checkLinesButton.x = bottomStrip.width - 50;
	checkLinesButton.y = bottomStrip.y - checkLinesButton.height - 10;
	self.addChild(checkLinesButton);
	var blocks = [];
	var blockCounter = 12;
	var dragTarget;
	var board = self.addChild(new Board());
	board.x = 2048 / 2;
	board.y = 2732 / 2 - 250 + 30 + 150;
	var targetOffset;
	self.createBlock = function (index) {
		var block = new Block(board);
		block.x = 2048 / 2 + (index - 1) * (block.width + 30);
		block.y = 2732 + block.height;
		block.setStartPosition(block.x, 2732 - block.height / 2 - 30);
		blocks.push(block);
		self.addChild(block);
		block.on('down', function (obj) {
			dragTarget = this;
			var pos = obj.event.getLocalPosition(this);
			var targetPos = obj.event.getLocalPosition(self);
			this.targetX = pos.x;
			this.targetY = pos.y;
			dragTarget.move(targetPos.x, targetPos.y);
		});
	};
	stage.on('move', function (obj) {
		if (dragTarget) {
			var pos = obj.event.getLocalPosition(self);
			dragTarget.move(pos.x, pos.y);
		}
	});
	stage.on('up', function (obj) {
		if (dragTarget) {
			var cells = dragTarget.getOverlappingCells();
			if (cells) {
				for (var a = 0; a < cells.length; a++) {
					cells[a].setFill(true, dragTarget.blocks[a], dragTarget.offset);
				}
				blocks[blocks.indexOf(dragTarget)] = undefined;
				dragTarget.destroy();
				blockCounter--;
				if (blockCounter <= 0) {
					var noMoreBlocksText = new Text2('No More Seed Blocks', {
						size: 60,
						fill: "#ffffff",
						font: 'Impact',
						stroke: '#2a636e',
						strokeThickness: 8
					});
					noMoreBlocksText.anchor.set(0.5, 1);
					noMoreBlocksText.x = bottomStrip.width / 2;
					noMoreBlocksText.y = bottomStrip.y - noMoreBlocksText.height - 10;
					self.addChild(noMoreBlocksText);
				} else if (!blocks.some(block => block)) {
					self.createBlocks();
				}
				do {
					board.checkLines();
				} while (board.checkLines());
			}
			dragTarget = undefined;
		}
	});
	self.createBlocks = function () {
		if (blockCounter >= 0) {
			for (var i = 0; i < 3; i++) {
				self.createBlock(i);
			}
		}
	};
	var highestScore = 0;
	Game.prototype.updateHighestScore = function (currentScore) {
		if (currentScore > highestScore) {
			highestScore = currentScore;
			this.highestScoreTxt.setText('High Score: ' + highestScore.toString());
		}
	};
	self.highestScoreTxt = new Text2('High Score: 0', {
		size: 60,
		fill: "#ffffff",
		font: 'Impact',
		stroke: '#2a636e',
		strokeThickness: 8
	});
	self.highestScoreTxt.anchor.set(0, 0);
	LK.gui.topLeft.addChild(self.highestScoreTxt);
	self.createBlocks();
	self.scoreTxt = new Text2('0', {
		size: 150,
		fill: "#ffffff",
		font: 'Impact',
		stroke: '#2a636e',
		strokeThickness: 16
	});
	self.scoreTxt.anchor.set(.5, 0);
	LK.gui.topCenter.addChild(self.scoreTxt);
	LK.on('scoreUpdated', function (score) {
		scoreTxt.setText(score);
	});
	self.isMovePossible = function () {
		for (var a = 0; a < blocks.length; a++) {
			if (blocks[a]) {
				for (var i = 0; i < 20; i++) {
					for (var j = 0; j < 20; j++) {
						if (board.grid[i][j].filled) continue;
						var canPlace = true;
						for (var k = 0; k < blocks[a].shape.length; k++) {
							for (var l = 0; l < blocks[a].shape[k].length; l++) {
								if (blocks[a].shape[k][l] === 1) {
									if (i + k < 0 || i + k >= 20 || j + l < 0 || j + l >= 20 || board.grid[i + k][j + l].filled) {
										canPlace = false;
										break;
									}
								}
							}
							if (!canPlace) break;
						}
						if (canPlace) return true;
					}
				}
			}
		}
		return false;
	};
	var isGameOver = false;
	LK.on('tick', function () {
		board.tick();
		for (var a = blocks.length - 1; a >= 0; a--) {
			if (blocks[a]) {
				if (blocks[a] != dragTarget) {
					blocks[a].moveTowardsHomePosition();
				} else {
					blocks[a].moveToDragTarget();
				}
			}
		}
	});
});
Images
