/****
* Classes
****/
var Cell = Container.expand(function () {
var self = Container.call(this);
self.value = null; // 'X', 'O', or null
self.graphics = self.attachAsset('cell', {
anchorX: 0.5,
anchorY: 0.5
});
self.cellAsset = self.attachAsset('cell', {
anchorX: 0.5,
anchorY: 0.5
});
self.setValue = function (val) {
self.value = val;
if (val === 'X') {
self.graphics = self.attachAsset('player', {
anchorX: 0.5,
anchorY: 0.5,
width: 400,
height: 400
});
self.cellAsset.visible = false;
} else if (val === 'O') {
self.graphics = self.attachAsset('robot', {
anchorX: 0.5,
anchorY: 0.5,
width: 400,
height: 400
});
self.cellAsset.visible = false;
} else {
self.cellAsset.visible = true;
}
};
self.isEmpty = function () {
return self.value === null;
};
});
//<Assets used in the game will automatically appear here>
// Class for a Tic Tac Toe cell
// Class for the draw screen
var DrawScreen = Container.expand(function () {
var self = Container.call(this);
self.graphics = self.attachAsset('drawScreen', {
anchorX: 0.5,
anchorY: 0.5
});
self.visible = false;
});
// Class for the lose screen
var LoseScreen = Container.expand(function () {
var self = Container.call(this);
self.graphics = self.attachAsset('loseScreen', {
anchorX: 0.5,
anchorY: 0.5
});
self.visible = false;
});
// Class for the restart button
var RestartButton = Container.expand(function () {
var self = Container.call(this);
self.graphics = self.attachAsset('restartButton', {
anchorX: 0.5,
anchorY: 0.5
});
self.visible = false;
self.down = function (x, y, obj) {
if (gameOver) {
restartGame();
}
};
});
// Class for the win screen
var WinScreen = Container.expand(function () {
var self = Container.call(this);
self.graphics = self.attachAsset('winScreen', {
anchorX: 0.5,
anchorY: 0.5
});
self.visible = false;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0xD3D3D3
});
/****
* Game Code
****/
var board = [];
var currentPlayer = 'X'; // Player starts first
var gameOver = false;
// Initialize the board
function initBoard() {
var startX = 2048 / 2 - 600; // Center the board horizontally
var startY = 2732 / 2 - 600; // Center the board vertically
var cellSize = 600;
for (var i = 0; i < 3; i++) {
board[i] = [];
for (var j = 0; j < 3; j++) {
var cell = new Cell();
cell.x = startX + j * cellSize;
cell.y = startY + i * cellSize;
game.addChild(cell);
board[i][j] = cell;
}
}
}
// Check for a win or draw
function checkGameState() {
// Check rows, columns, and diagonals
for (var i = 0; i < 3; i++) {
if (board[i][0].value && board[i][0].value === board[i][1].value && board[i][1].value === board[i][2].value) {
return board[i][0].value;
}
if (board[0][i].value && board[0][i].value === board[1][i].value && board[1][i].value === board[2][i].value) {
return board[0][i].value;
}
}
if (board[0][0].value && board[0][0].value === board[1][1].value && board[1][1].value === board[2][2].value) {
return board[0][0].value;
}
if (board[0][2].value && board[0][2].value === board[1][1].value && board[1][1].value === board[2][0].value) {
return board[0][2].value;
}
// Check for draw
var draw = true;
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
if (board[i][j].isEmpty()) {
draw = false;
break;
}
}
}
return draw ? 'Draw' : null;
}
// Handle player move
function playerMove(x, y) {
if (gameOver) {
return;
}
var startX = (2048 - 3 * 600) / 2; // Center the board horizontally
var startY = (2732 - 3 * 600) / 2; // Center the board vertically
var cellX = Math.floor((x - startX) / 600);
var cellY = Math.floor((y - startY) / 600);
if (cellX < 0 || cellX > 2 || cellY < 0 || cellY > 2) {
return;
}
if (cellX >= 0 && cellX < 3 && cellY >= 0 && cellY < 3 && board[cellY][cellX].isEmpty()) {
// Show the selecting cell asset before setting the value
var selectingCell = LK.getAsset('selectingcell', {
anchorX: 0.5,
anchorY: 0.5,
width: 600,
height: 600
});
selectingCell.x = board[cellY][cellX].x;
selectingCell.y = board[cellY][cellX].y;
game.addChild(selectingCell);
board[cellY][cellX].setValue(currentPlayer);
var result = checkGameState();
if (result) {
game.removeChild(selectingCell);
gameOver = true;
game.addChild(restartButton);
restartButton.visible = true;
if (result === 'Draw') {
drawScreen.x = restartButton.x - 500; // Move to the left of the restart button
drawScreen.y = restartButton.y; // Align vertically with the restart button
game.addChild(drawScreen);
drawScreen.visible = true;
} else if (result === 'X') {
winScreen.x = restartButton.x - 500; // Align to the left of the restart button
game.addChild(winScreen);
winScreen.visible = true;
} else if (result === 'O') {
loseScreen.visible = false; // Ensure lose screen is not displayed
}
} else {
game.removeChild(selectingCell);
currentPlayer = 'O';
robotMove();
}
}
}
// Simple AI for robot move
function robotMove() {
if (gameOver) {
return;
}
// Random move for simplicity
var emptyCells = [];
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
if (board[i][j].isEmpty()) {
emptyCells.push(board[i][j]);
}
}
}
if (emptyCells.length > 0) {
var randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
randomCell.setValue(currentPlayer);
var result = checkGameState();
if (result) {
gameOver = true;
game.addChild(restartButton);
restartButton.visible = true;
if (result === 'Draw') {
game.addChild(drawScreen);
drawScreen.visible = true;
} else if (result === 'X') {
winScreen.graphics = winScreen.attachAsset('winScreen', {
anchorX: 0.5,
anchorY: 0.5
});
winScreen.visible = true;
} else if (result === 'O') {
game.addChild(loseScreen);
loseScreen.visible = true;
}
} else {
currentPlayer = 'X';
}
}
}
// Initialize the game
initBoard();
// Initialize the draw screen
var drawScreen = game.addChild(new DrawScreen());
drawScreen.x = 2048 / 2;
drawScreen.y = 2732 / 2 - 300; // Position above the restart button
// Initialize the win screen
var winScreen = game.addChild(new WinScreen());
winScreen.x = 2048 / 2 - 300; // Position to the left of the restart button
winScreen.y = 2732 / 2;
// Initialize the restart button
var restartButton = game.addChild(new RestartButton());
restartButton.x = 2048 / 2 + 300; // Position to the right of the win, lose, and draw asset
restartButton.y = 2732 / 2;
restartButton.scaleX = 2; // Double the size of the restart button horizontally
restartButton.scaleY = 2; // Double the size of the restart button vertically
// Initialize the lose screen
var loseScreen = game.addChild(new LoseScreen());
loseScreen.x = restartButton.x - 600; // Move to the left of the restart button
loseScreen.y = restartButton.y; // Align vertically with the restart button
// Function to restart the game
function restartGame() {
// Clear the board
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
game.removeChild(board[i][j]);
}
}
board = [];
// Reset game variables
currentPlayer = 'X';
gameOver = false;
restartButton.visible = false;
// Hide win, lose, and draw assets
winScreen.visible = false;
loseScreen.visible = false;
drawScreen.visible = false;
// Initialize the board again
initBoard();
}
// Add event listeners
game.down = function (x, y, obj) {
playerMove(x, y);
};
the letter x. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
the letter o. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
explosion. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
button with the word restart on it. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
confetti popper. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
sad face. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
handshake. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.