/**** * 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); };
/****
* 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.