Code edit (9 edits merged)
Please save this source code
Code edit (1 edits merged)
Please save this source code
User prompt
do the same for the other LK.off('tick'); instruction in roundEndAnimation
User prompt
update the winner scale animation to unregister only itseld and not all tick events by updating LK.off('tick'); instruction
Code edit (6 edits merged)
Please save this source code
User prompt
animate the scale of winner icon in round end animation
User prompt
Fix Bug: 'ReferenceError: utils is not defined' in this line: 'self.tint = utils.rgb2hex([colorShift, 1 - colorShift, 0.5]);' Line Number: 8
User prompt
bug : fireworks are not animating
User prompt
animate the fireworks colors and scale
User prompt
show fireworks during the tick loop in roundEndAnimation
Code edit (1 edits merged)
Please save this source code
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); });
===================================================================
--- original.js
+++ change.js
@@ -20,12 +20,9 @@
lineGraphics.height = length;
}
};
self.on('down', function () {
- console.log("Click " + row + "," + col + " by player " + currentPlayer);
if (!self.isSet) {
- console.log("Setting " + row + "," + col + " by player " + currentPlayer);
- console.log("boxes :", gameInstance.boxes);
self.isSet = true;
activateLine(self, currentPlayer, lineGraphics, gameInstance);
}
});
@@ -57,12 +54,10 @@
});
var RoundIndicator = Container.expand(function () {
var self = Container.call(this);
RoundIndicator.prototype.tintBorderCircle = function (playerNumber) {
- console.log("tintBorderCircle for player " + playerNumber);
var tint = playerNumber === 1 ? 0xFF0000 : 0x00FF00;
var index = playerNumber === 1 ? (roundNumber - 1) * 2 + 1 : 5 - (roundNumber - 1) * 2;
- console.log("roundNumber=" + roundNumber + " => index : " + index);
this.children[index].tint = tint;
};
var circleDistance = 160;
var circleRadius = 50;
@@ -98,9 +93,8 @@
this.playerFilled = 0;
this.gift = null;
}
function checkSquares(gameInstance) {
- console.log('checkSquares for current player:', currentPlayer);
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) {
@@ -117,23 +111,18 @@
});
var newSquares = setBoxesCount - previousCount;
if (newSquares > 0) {
if (currentPlayer === 1) {
- console.log(newSquares + ' Box for player 1');
player1Score += newSquares;
} else if (currentPlayer === 2) {
- console.log(newSquares + 'Box for player 1');
player2Score += newSquares;
}
}
updatePlayerScores(gameInstance);
- console.log('Total Number of set Boxes:', setBoxesCount);
return newSquares;
}
function updateRounds(gameInstance) {
- console.log("updateRounds :", rounds, gameInstance.roundIndicator, gameInstance.roundIndicator.children, nbRoundsPlayer1, nbRoundsPlayer2);
if (nbRoundsPlayer1 + nbRoundsPlayer2 > 3) {
- console.log("Game already ended");
return;
}
for (var i = 0; i < nbRoundsPlayer1; i++) {
gameInstance.roundIndicator.children[i * 2 + 1].tint = 0xFF0000;
@@ -152,9 +141,8 @@
gameInstance.player1Icon.alpha = playingPlayer === 1 || playingPlayer === 0 ? 1 : 0.6;
gameInstance.player2Icon.alpha = playingPlayer === 2 || playingPlayer === 0 ? 1 : 0.6;
}
function updateLines(gameInstance) {
- console.log('updateLines...');
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) {
@@ -189,9 +177,8 @@
}
}
function activateLine(line, playerNumber, lineGraphics, gameInstance) {
if (line.playerNumber === null) {
- console.log('Line click by player ', playerNumber);
line.playerNumber = playerNumber;
lineGraphics.alpha = 1;
lineGraphics.tint = playerNumber === 1 ? 0xFF0000 : 0x00FF00;
var boardLine = gameInstance.lines.find(function (l) {
@@ -205,18 +192,15 @@
currentPlayer = currentPlayer === 1 ? 2 : 1;
updatePlayerIcons(gameInstance, currentPlayer);
} else {
if (player1Score + player2Score >= nbBoardBoxes) {
- console.log("Round end!");
handleRoundEnd(gameInstance);
}
}
}
}
function handleRoundEnd(gameInstance) {
- console.log("handleRoundEnd...");
var winner = player1Score > player2Score ? 1 : player1Score < player2Score ? 2 : 0;
- console.log(winner === 1 ? "Winner 1" : winner === 2 ? "Winner 2" : "Tie");
nbRoundsPlayer1 += winner === 1 ? 1 : 0;
nbRoundsPlayer2 += winner === 2 ? 1 : 0;
if (winner !== 0) {
updateRounds(gameInstance);
@@ -225,9 +209,8 @@
updatePlayerIcons(gameInstance, currentPlayer);
roundEndAnimation(gameInstance, winner);
}
function roundEndAnimation(gameInstance, winner) {
- console.log("roundEndAnimation...", winner);
var winnerIcon = null;
var popup = gameInstance.createAsset('lineHorizontal', 'Popup', 0.5, 0.5);
popup.width = 2048;
popup.height = 2732;
@@ -246,9 +229,13 @@
winText.x = 680;
winText.y = 2732 / 2;
gameInstance.addChild(winText);
if (winner) {
- winnerIcon = winner === 1 ? new PlayerIcon(1) : new PlayerIcon(2);
+ 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;
@@ -265,40 +252,45 @@
scaleAnimationTickCount++;
};
LK.on('tick', scaleAnimationTickHandler);
gameInstance.addChild(winnerIcon);
- winText.setText("Wins");
- winText.x = 800;
+ 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;
- console.log("startTime...", startTime);
var fireworksTickHandler = function () {
if (count - startTime > fireworksDuration) {
LK.off('tick', fireworksTickHandler);
- winText.destroy();
- popup.destroy();
- if (winnerIcon) {
- winnerIcon.destroy();
- }
roundNumber -= winner === 0 ? 1 : 0;
- nextRound(gameInstance);
+ 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++;
- console.log("initRound N°" + roundNumber, gameInstance.boxes);
- console.log("board size" + boardRows + "x" + boardCols);
for (var i = 0; i < boardRows; i++) {
for (var j = 0; j < boardCols; j++) {
var box = gameInstance.boxes[i * boardCols + j];
- console.log("Top " + i + "," + j + " =>", box.top.line);
box.top.isSet = false;
box.right.isSet = false;
box.bottom.isSet = false;
box.left.isSet = false;
@@ -327,10 +319,10 @@
}
var currentPlayer = 1;
var player2Score = 0;
var player1Score = 0;
-var boardRows = 2;
-var boardCols = 2;
+var boardRows = 6;
+var boardCols = 6;
var rounds = [0, 0, 0];
var roundNumber = 0;
var nbRoundsPlayer1 = 0;
var nbRoundsPlayer2 = 0;
a b&w grinch icon Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
b&w smiling Santa Clauss' head icon Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
a white christmas star. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
top face of a white gift. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.