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

Tic Tace Toe by amira

Images