Upit | Learn about creating the game Xmas Dots and Boxes with gen AI

var Gift = Container.expand(function (playerNumber) {
	var self = Container.call(this);
	var giftGraphics = self.createAsset('gift', 'Gift Graphics', 0.5, 0.5);
	giftGraphics.tint = playerNumber === 1 ? 0xFF0000 : 0x00FF00;
	return self;
});
var Line = Container.expand(function (row, col, isHorizontal, gameInstance) {
	var self = Container.call(this);
	var lineGraphics = self.createAsset(isHorizontal ? 'lineHorizontal' : 'lineVertical', 'Line Graphics', isHorizontal ? 0 : 0.5, isHorizontal ? 0.5 : 0);
	lineGraphics.alpha = 0.3;
	self.lineGraphics = lineGraphics;
	self.playerNumber = null;
	self.col = col;
	self.row = row;
	self.isSet = false;
	self.setLength = function (length) {
		if (isHorizontal) {
			lineGraphics.width = length;
		} else {
			lineGraphics.height = length;
		}
	};
	self.on('down', function () {
		if (!self.isSet) {
			self.isSet = true;
			activateLine(self, currentPlayer, lineGraphics, gameInstance);
		}
	});
	return self;
});
var Dot = Container.expand(function () {
	var self = Container.call(this);
	var dotGraphics = self.createAsset('dot', 'Dot Graphics', .5, .5);
	self.connect = function () {};
});
var Square = Container.expand(function () {
	var self = Container.call(this);
	var squareGraphics = self.createAsset('square', 'Square Graphics', .5, .5);
	self.isComplete = function () {
		var topLineComplete = this.topLine && this.topLine.playerNumber !== null;
		var bottomLineComplete = this.bottomLine && this.bottomLine.playerNumber !== null;
		var leftLineComplete = this.leftLine && this.leftLine.playerNumber !== null;
		var rightLineComplete = this.rightLine && this.rightLine.playerNumber !== null;
		return topLineComplete && bottomLineComplete && leftLineComplete && rightLineComplete;
	};
});
var PlayerIcon = Container.expand(function (playerNumber) {
	var self = Container.call(this);
	var iconAsset = playerNumber === 1 ? 'player1Icon' : 'player2Icon';
	var playerIconGraphics = self.createAsset(iconAsset, 'Player ' + playerNumber + ' Icon', 0.5, 0.5);
	playerIconGraphics.tint = playerNumber === 2 ? 0x00FF00 : playerIconGraphics.tint;
	playerIconGraphics.tint = playerNumber === 1 ? 0xFF0000 : playerIconGraphics.tint;
	return self;
});
var RoundIndicator = Container.expand(function () {
	var self = Container.call(this);
	RoundIndicator.prototype.tintBorderCircle = function (playerNumber) {
		var tint = playerNumber === 1 ? 0xFF0000 : 0x00FF00;
		var index = playerNumber === 1 ? (roundNumber - 1) * 2 + 1 : 5 - (roundNumber - 1) * 2;
		this.children[index].tint = tint;
	};
	var circleDistance = 160;
	var circleRadius = 50;
	for (var i = 0; i < 3; i++) {
		var circle = self.addChild(LK.getAsset('circle', 'Circle Graphic', 0.5, 0.5));
		circle.width = circle.height = circleRadius * 2;
		circle.x = 2048 / 2 - circleDistance + i * circleDistance;
		circle.y = 0;
		var borderCircle = self.addChild(LK.getAsset('circle', 'Border Circle Graphic', 0.5, 0.5));
		borderCircle.width = borderCircle.height = (circleRadius - 10) * 2;
		borderCircle.tint = 0x000000;
		borderCircle.x = circle.x;
		borderCircle.y = circle.y;
		self.addChild(borderCircle);
	}
	return self;
});
function BoardLine(row, col, line, lineGraphics) {
	this.col = col;
	this.row = row;
	this.isSet = false;
	this.line = line;
	this.lineGraphics = lineGraphics;
}
function BoardBox(row, col, borderLines) {
	this.col = col;
	this.row = row;
	this.top = borderLines[0];
	this.right = borderLines[1];
	this.bottom = borderLines[2];
	this.left = borderLines[3];
	this.isFilled = false;
	this.playerFilled = 0;
	this.gift = null;
}
function checkSquares(gameInstance) {
	var setBoxesCount = 0;
	var previousCount = player1Score + player2Score;
	gameInstance.boxes.forEach(function (box) {
		if (box.top.isSet && box.right.isSet && box.bottom.isSet && box.left.isSet) {
			if (!box.isFilled) {
				box.isFilled = true;
				box.playerFilled = currentPlayer;
				box.gift = new Gift(currentPlayer);
				box.gift.x = gameInstance.offsetX + box.col * 300 + 150;
				box.gift.y = gameInstance.offsetY + box.row * 300 + 150;
				gameInstance.addChild(box.gift);
			}
			setBoxesCount++;
		}
	});
	var newSquares = setBoxesCount - previousCount;
	if (newSquares > 0) {
		if (currentPlayer === 1) {
			player1Score += newSquares;
		} else if (currentPlayer === 2) {
			player2Score += newSquares;
		}
	}
	updatePlayerScores(gameInstance);
	return newSquares;
}
function updateRounds(gameInstance) {
	if (nbRoundsPlayer1 + nbRoundsPlayer2 > 3) {
		return;
	}
	for (var i = 0; i < nbRoundsPlayer1; i++) {
		gameInstance.roundIndicator.children[i * 2 + 1].tint = 0xFF0000;
	}
	for (var j = 0; j < nbRoundsPlayer2; j++) {
		gameInstance.roundIndicator.children[5 - j * 2].tint = 0x00FF00;
	}
}
function updatePlayerScores(gameInstance) {
	gameInstance.player1ScoreText.setText(player1Score < 10 ? ' ' + player1Score : player1Score.toString());
	gameInstance.player2ScoreText.setText(player2Score < 10 ? ' ' + player2Score : player2Score.toString());
}
function updatePlayerIcons(gameInstance, playingPlayer) {
	gameInstance.player1Icon.scale.set(playingPlayer === 1 || playingPlayer === 0 ? 1.2 : 0.8);
	gameInstance.player2Icon.scale.set(playingPlayer === 2 || playingPlayer === 0 ? 1.2 : 0.8);
	gameInstance.player1Icon.alpha = playingPlayer === 1 || playingPlayer === 0 ? 1 : 0.6;
	gameInstance.player2Icon.alpha = playingPlayer === 2 || playingPlayer === 0 ? 1 : 0.6;
}
function updateLines(gameInstance) {
	for (var i = 0; i < boardRows; i++) {
		for (var j = 0; j < boardCols; j++) {
			var box = gameInstance.boxes[i * boardCols + j];
			var topLine = gameInstance.lines.find(function (l) {
				return l.col === box.top.col && l.row === box.top.row;
			});
			if (topLine) {
				topLine.lineGraphics.alpha = box.top.isSet ? 1 : 0.3;
				topLine.lineGraphics.tint = !topLine.playerNumber ? 0xFFFFFF : topLine.playerNumber == 1 ? 0xFF0000 : 0x00FF00;
			}
			var rightLine = gameInstance.lines.find(function (l) {
				return l.col === box.right.col && l.row === box.right.row;
			});
			if (rightLine) {
				rightLine.lineGraphics.alpha = box.right.isSet ? 1 : 0.3;
				rightLine.lineGraphics.tint = !rightLine.playerNumber ? 0xFFFFFF : rightLine.playerNumber == 1 ? 0xFF0000 : 0x00FF00;
			}
			var bottomLine = gameInstance.lines.find(function (l) {
				return l.col === box.bottom.col && l.row === box.bottom.row;
			});
			if (bottomLine) {
				bottomLine.lineGraphics.alpha = box.bottom.isSet ? 1 : 0.3;
				bottomLine.lineGraphics.tint = !bottomLine.playerNumber ? 0xFFFFFF : bottomLine.playerNumber == 1 ? 0xFF0000 : 0x00FF00;
			}
			var leftLine = gameInstance.lines.find(function (l) {
				return l.col === box.left.col && l.row === box.left.row;
			});
			if (leftLine) {
				leftLine.lineGraphics.alpha = box.left.isSet ? 1 : 0.3;
				leftLine.lineGraphics.tint = !leftLine.playerNumber ? 0xFFFFFF : leftLine.playerNumber == 1 ? 0xFF0000 : 0x00FF00;
			}
		}
	}
}
function activateLine(line, playerNumber, lineGraphics, gameInstance) {
	if (line.playerNumber === null) {
		line.playerNumber = playerNumber;
		lineGraphics.alpha = 1;
		lineGraphics.tint = playerNumber === 1 ? 0xFF0000 : 0x00FF00;
		var boardLine = gameInstance.lines.find(function (l) {
			return l.col === line.col && l.row === line.row;
		});
		if (boardLine) {
			boardLine.isSet = true;
		}
		var newSquares = checkSquares(gameInstance);
		if (!newSquares) {
			currentPlayer = currentPlayer === 1 ? 2 : 1;
			updatePlayerIcons(gameInstance, currentPlayer);
		} else {
			if (player1Score + player2Score >= nbBoardBoxes) {
				handleRoundEnd(gameInstance);
			}
		}
	}
}
function handleRoundEnd(gameInstance) {
	var winner = player1Score > player2Score ? 1 : player1Score < player2Score ? 2 : 0;
	nbRoundsPlayer1 += winner === 1 ? 1 : 0;
	nbRoundsPlayer2 += winner === 2 ? 1 : 0;
	if (winner !== 0) {
		updateRounds(gameInstance);
	}
	currentPlayer = 0;
	updatePlayerIcons(gameInstance, currentPlayer);
	roundEndAnimation(gameInstance, winner);
}
function roundEndAnimation(gameInstance, winner) {
	var winnerIcon = null;
	var popup = gameInstance.createAsset('lineHorizontal', 'Popup', 0.5, 0.5);
	popup.width = 2048;
	popup.height = 2732;
	popup.x = 2048 / 2;
	popup.y = 2732 / 2 + 500;
	popup.tint = 0x000000;
	gameInstance.addChild(popup);
	var winText = new Text2("It's a Tie", {
		size: 200,
		fill: "#ffffff",
		anchor: {
			x: 0.5,
			y: 0
		}
	});
	winText.x = 680;
	winText.y = 2732 / 2;
	gameInstance.addChild(winText);
	if (winner) {
		if (roundNumber == 3) {
			winnerIcon = nbRoundsPlayer1 > nbRoundsPlayer2 ? new PlayerIcon(1) : new PlayerIcon(2);
		} else {
			winnerIcon = winner === 1 ? new PlayerIcon(1) : new PlayerIcon(2);
		}
		winnerIcon.x = 2048 / 2;
		winnerIcon.y = 2732 / 2 - 200;
		var scaleAnimationDuration = 60;
		var scaleAnimationStartTick = 0;
		var scaleAnimationTickCount = 0;
		var scaleAnimationTickHandler = function () {
			var elapsedTicks = scaleAnimationTickCount - scaleAnimationStartTick;
			if (elapsedTicks <= scaleAnimationDuration) {
				var scale = 1 + 2 * (elapsedTicks / scaleAnimationDuration);
				winnerIcon.scale.set(scale);
			} else {
				LK.off('tick', scaleAnimationTickHandler);
				winnerIcon.scale.set(3);
			}
			scaleAnimationTickCount++;
		};
		LK.on('tick', scaleAnimationTickHandler);
		gameInstance.addChild(winnerIcon);
		if (roundNumber == 3) {
			winText.setText("VICTORY");
			winText.x = 680;
		} else {
			winText.setText("Wins");
			winText.x = 800;
		}
		winText.y = 1700;
	}
	var fireworksDuration = 200;
	var startTime = 0;
	var count = 0;
	var fireworksTickHandler = function () {
		if (count - startTime > fireworksDuration) {
			LK.off('tick', fireworksTickHandler);
			roundNumber -= winner === 0 ? 1 : 0;
			if (roundNumber < 3) {
				winText.destroy();
				popup.destroy();
				if (winnerIcon) {
					winnerIcon.destroy();
				}
				nextRound(gameInstance);
			} else {
				LK.showGameOver();
			}
			return;
		}
		count++;
	};
	LK.on('tick', fireworksTickHandler);
}
function nextRound(gameInstance) {
	roundNumber++;
	for (var i = 0; i < boardRows; i++) {
		for (var j = 0; j < boardCols; j++) {
			var box = gameInstance.boxes[i * boardCols + j];
			box.top.isSet = false;
			box.right.isSet = false;
			box.bottom.isSet = false;
			box.left.isSet = false;
			box.top.line.isSet = false;
			box.right.line.isSet = false;
			box.bottom.line.isSet = false;
			box.left.line.isSet = false;
			box.top.line.playerNumber = null;
			box.right.line.playerNumber = null;
			box.bottom.line.playerNumber = null;
			box.left.line.playerNumber = null;
			box.isFilled = false;
			box.playerFilled = 0;
			if (box.gift) {
				box.gift.destroy();
			}
			box.gift = null;
		}
	}
	updateLines(gameInstance);
	player2Score = 0;
	player1Score = 0;
	currentPlayer = 1;
	updatePlayerScores(gameInstance);
	updatePlayerIcons(gameInstance, currentPlayer);
}
var currentPlayer = 1;
var player2Score = 0;
var player1Score = 0;
var boardRows = 6;
var boardCols = 6;
var rounds = [0, 0, 0];
var roundNumber = 0;
var nbRoundsPlayer1 = 0;
var nbRoundsPlayer2 = 0;
var nbBoardBoxes = boardRows * boardCols;
var Game = Container.expand(function () {
	var self = Container.call(this);
	var dots = [];
	var squares = [];
	var lines = [];
	var player1Icon, player2Icon;
	var boardSize = 6 * 300;
	self.offsetX = (2048 - boardSize) / 2;
	self.offsetY = (2732 - boardSize) / 2 + 150;
	self.player1Icon = self.addChild(new PlayerIcon(1));
	self.player1Icon.x = 2048 * 0.25;
	self.player1Icon.y = 250;
	self.player1Icon.scale.set(1.2);
	self.player1ScoreText = new Text2(' 0', {
		size: 200,
		fill: "#ffffff",
		anchor: {
			x: 0.5,
			y: 0
		}
	});
	self.player1ScoreText.x = 750;
	self.player1ScoreText.y = 150;
	self.addChild(self.player1ScoreText);
	self.player2Icon = self.addChild(new PlayerIcon(2));
	self.player2Icon.x = 2048 * 0.75;
	self.player2Icon.y = 250;
	self.player2Icon.scale.set(1);
	self.player2ScoreText = new Text2(' 0', {
		size: 200,
		fill: "#ffffff",
		anchor: {
			x: 0.5,
			y: 0
		}
	});
	self.player2ScoreText.x = 1070;
	self.player2ScoreText.y = 150;
	self.addChild(self.player2ScoreText);
	player1Icon = self.player1Icon;
	player2Icon = self.player2Icon;
	for (var i = 0; i < boardRows * 2 + 1; i++) {
		for (var j = 0; j < boardCols * 2 + 1; j++) {
			if (i % 2 == 0 && j % 2 != 0) {
				var hLine = new Line(i, j, true, self);
				hLine.x = j / 2 * 300;
				hLine.y = self.offsetY + i / 2 * 300;
				hLine.setLength(300);
				self.addChild(hLine);
				boardLine = new BoardLine(i, j, hLine, hLine.lineGraphics);
				lines.push(boardLine);
			}
			if (i % 2 != 0 && j % 2 == 0) {
				var vLine = new Line(i, j, false, self);
				vLine.x = self.offsetX + j / 2 * 300;
				vLine.y = self.offsetY * 0.75 + i / 2 * 300;
				vLine.setLength(300);
				self.addChild(vLine);
				boardLine = new BoardLine(i, j, vLine, vLine.lineGraphics);
				lines.push(boardLine);
			}
		}
	}
	self.lines = lines;
	self.boxes = [];
	for (var i = 0; i < boardRows; i++) {
		for (var j = 0; j < boardCols; j++) {
			var topLine = lines.find(line => line.row === i * 2 && line.col === 1 + j * 2);
			var bottomLine = lines.find(line => line.row === i * 2 + 2 && line.col === 1 + j * 2);
			var leftLine = lines.find(line => line.row === 1 + i * 2 && line.col === j * 2);
			var rightLine = lines.find(line => line.row === 1 + i * 2 && line.col === j * 2 + 2);
			var box = new BoardBox(i, j, [topLine, rightLine, bottomLine, leftLine]);
			self.boxes.push(box);
		}
	}
	for (var i = 0; i < boardRows + 1; i++) {
		for (var j = 0; j < boardCols + 1; j++) {
			var dot = new Dot();
			var boardLine = null;
			dot.x = self.offsetX + i * 300;
			dot.y = self.offsetY + j * 300;
			dots.push(dot);
			self.addChild(dot);
		}
	}
	self.roundIndicator = self.addChild(new RoundIndicator());
	self.roundIndicator.y = 60;
	nextRound(self);
});
Images
