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); });

Xmas Dots and Boxes by Djam

Images