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

var VerticalLine = Container.expand(function (playerNumber, gameInstance) {
	var self = Container.call(this);
	var lineGraphics = self.createAsset('lineVertical', 'Vertical Line Graphics', 0.5, 0);
	lineGraphics.alpha = 0.3;
	self.playerNumber = null;
	self.gameInstance = gameInstance;
	self.setLength = function (length) {
		lineGraphics.height = length;
	};
	self.on('down', function () {
		activateLine(self, currentPlayer, lineGraphics, self.gameInstance);
	});
	return self;
});
var HorizontalLine = Container.expand(function (playerNumber, gameInstance) {
	var self = Container.call(this);
	var lineGraphics = self.createAsset('lineHorizontal', 'Horizontal Line Graphics', 0, 0.5);
	lineGraphics.alpha = 0.3;
	self.status = 'inactive';
	self.playerNumber = null;
	self.gameInstance = gameInstance;
	self.setLength = function (length) {
		lineGraphics.width = length;
	};
	self.on('down', function () {
		activateLine(self, currentPlayer, lineGraphics, self.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;
});
function checkSquares(gameInstance) {
	gameInstance.lines.forEach(function (line) {
		if (line.playerNumber !== null) {
			var coordinates = line.coordinates;
			var squaresToCheck = [];
			if (line instanceof HorizontalLine) {
				if (coordinates.row > 0) squaresToCheck.push(self.squares[(coordinates.row - 1) * 6 + coordinates.col]);
				if (coordinates.row < 6) squaresToCheck.push(gameInstance.squares[coordinates.row * 6 + coordinates.col]);
			} else if (line instanceof VerticalLine) {
				if (coordinates.col > 0) squaresToCheck.push(self.squares[coordinates.row * 6 + (coordinates.col - 1)]);
				if (coordinates.col < 6) squaresToCheck.push(self.squares[coordinates.row * 6 + coordinates.col]);
			}
			squaresToCheck.forEach(function (square) {
				if (square && square.isComplete() && square.playerNumber === null) {
					square.playerNumber = currentPlayer;
					if (currentPlayer === 1) {
						gameInstance.player1Score++;
					} else if (currentPlayer === 2) {
						gameInstance.player2Score++;
					}
				}
			});
		}
	});
	updateScores(gameInstance);
}
function updatePlayerIcons(currentPlayer, player1Icon, player2Icon) {
	if (player1Icon && player2Icon) {
		player1Icon.scale.set(currentPlayer === 1 ? 1.2 : 0.8);
		player2Icon.scale.set(currentPlayer === 2 ? 1.2 : 0.8);
	}
}
function updateScores(gameInstance) {
	gameInstance.player1ScoreText.setText(gameInstance.player1Score.toString());
	gameInstance.player2ScoreText.setText(gameInstance.player2Score.toString());
}
function activateLine(line, playerNumber, lineGraphics, gameInstance) {
	if (line.playerNumber === null) {
		line.playerNumber = playerNumber;
		lineGraphics.alpha = 1;
		lineGraphics.tint = playerNumber === 1 ? 0xFF0000 : 0x00FF00;
		currentPlayer = currentPlayer === 1 ? 2 : 1;
		checkSquares(gameInstance);
		updatePlayerIcons(playerNumber, gameInstance.player1Icon, gameInstance.player2Icon);
	}
}
var currentPlayer = 1;
this.player2Score = 0;
this.player1Score = 0;
var Game = Container.expand(function () {
	var self = Container.call(this);
	var dots = [];
	var lines = [];
	self.squares = [];
	self.lines = lines;
	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 = self.player1Icon.x + self.player1Icon.width / 2 + 80;
	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 = self.player2Icon.x - self.player2Icon.width / 2 - 80 - self.player2ScoreText.width;
	self.player2ScoreText.y = 150;
	self.addChild(self.player2ScoreText);
	player1Icon = self.player1Icon;
	player2Icon = self.player2Icon;
	var boardSize = 6 * 300;
	var offsetX = (2048 - boardSize) / 2;
	var offsetY = (2732 - boardSize) / 2 + 150;
	for (var i = 0; i < 7; i++) {
		for (var j = 0; j < 7; j++) {
			var dot = new Dot();
			dot.x = offsetX + i * 300;
			dot.y = offsetY + j * 300;
			dots.push(dot);
			if (i < 6) {
				var hLine = new HorizontalLine(currentPlayer, self);
				hLine.x = dot.x;
				hLine.y = dot.y;
				hLine.setLength(300);
				hLine.coordinates = {
					row: j,
					col: i
				};
				lines.push(hLine);
				self.addChild(hLine);
			}
			if (j < 6) {
				var vLine = new VerticalLine(currentPlayer, self);
				vLine.x = dot.x;
				vLine.y = dot.y;
				vLine.setLength(300);
				vLine.coordinates = {
					row: j,
					col: i
				};
				lines.push(vLine);
				self.addChild(vLine);
			}
			self.addChild(dot);
		}
	}
	dots.forEach(function (dot) {
		dot.on('down', function (obj) {
			var event = obj.event;
			var pos = event.getLocalPosition(self);
		});
	});
});
Creation History

Images
