class TicTacToe extends Phaser.Scene { constructor () { super(); this.board = [ ['', '', ''], ['', '', ''], ['', '', ''] ]; this.currentPlayer = 'X'; this.gameOver = false; this.marks = []; this.winLine = null; this.playingWithBot = false; this.botStarts = false; this.botDifficulty = 'impossible'; } preload () { // No need to preload background image } create () { // Add white background this.add.rectangle(200, 200, 400, 400, 0xFFFFFF); // Add game mode selection text this.add.text(200, 100, 'Choose game mode:', { fontSize: '28px', fontStyle: 'bold', fill: '#000' }).setOrigin(0.5); // Add buttons for game mode selection this.createButton(200, 150, 'Play with Friend', () => this.startGame(false)); this.createButton(200, 200, 'Play with Medium Bot', () => this.startGame(true, 'medium')); this.createButton(200, 250, 'Play with Impossible Bot', () => this.startGame(true, 'impossible')); } createButton(x, y, text, callback) { let button = this.add.text(x, y, text, { fontSize: '24px', fontStyle: 'bold', fill: '#000' }) .setOrigin(0.5) .setInteractive() .on('pointerdown', callback); button.setBackgroundColor('#DDDDDD'); button.setPadding(10); } startGame(withBot, botDifficulty = 'impossible') { this.playingWithBot = withBot; this.botDifficulty = botDifficulty; this.children.removeAll(); this.add.rectangle(200, 200, 400, 400, 0xFFFFFF); this.createGrid(); // Initialize the game state this.board = [['', '', ''], ['', '', ''], ['', '', '']]; this.gameOver = false; this.marks = []; this.winLine = null; if (this.playingWithBot) { this.botStarts = !this.botStarts; // Alternate starting player this.currentPlayer = this.botStarts ? 'O' : 'X'; } else { this.currentPlayer = 'X'; } // Add text for current player this.playerText = this.add.text(200, 30, `Current Player: ${this.currentPlayer}`, { fontSize: '28px', fontStyle: 'bold', fill: this.currentPlayer === 'X' ? '#FF0000' : '#0000FF' }).setOrigin(0.5); // Add reset button this.resetButton = this.add.text(200, 370, 'Reset Game', { fontSize: '24px', fontStyle: 'bold', fill: '#000' }) .setOrigin(0.5) .setInteractive() .on('pointerdown', () => this.resetGame()); if (this.playingWithBot && this.botStarts) { this.time.delayedCall(500, this.botMove, [], this); } } createGrid() { for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { let cell = this.add.rectangle(100 + j * 100, 100 + i * 100, 90, 90, 0xFFFFFF) .setInteractive() .on('pointerdown', () => this.placeMark(i, j)); cell.setStrokeStyle(2, 0x000000); } } } placeMark(row, col) { if (this.board[row][col] === '' && !this.gameOver) { this.board[row][col] = this.currentPlayer; let mark = this.add.text(100 + col * 100, 100 + row * 100, this.currentPlayer, { fontSize: '72px', fontStyle: 'bold', fill: this.currentPlayer === 'X' ? '#FF0000' : '#0000FF' }).setOrigin(0.5); this.marks.push(mark); if (this.checkWin(row, col)) { this.playerText.setText(`Player ${this.currentPlayer} wins!`); this.gameOver = true; this.drawWinLine(); } else if (this.checkDraw()) { this.playerText.setText("It's a draw!"); this.gameOver = true; } else { this.currentPlayer = this.currentPlayer === 'X' ? 'O' : 'X'; this.playerText.setText(`Current Player: ${this.currentPlayer}`); this.playerText.setColor(this.currentPlayer === 'X' ? '#FF0000' : '#0000FF'); if (this.playingWithBot && this.currentPlayer === 'O') { this.time.delayedCall(500, this.botMove, [], this); } } } } botMove() { if (!this.gameOver) { let move; if (this.botDifficulty === 'impossible') { move = this.getBestMove(); } else { move = this.getMediumMove(); } if (move) { this.placeMark(move.row, move.col); } } } getBestMove() { let bestScore = -Infinity; let bestMove; for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (this.board[i][j] === '') { this.board[i][j] = 'O'; let score = this.minimax(this.board, 0, false); this.board[i][j] = ''; if (score > bestScore) { bestScore = score; bestMove = { row: i, col: j }; } } } } return bestMove; } getMediumMove() { // 50% chance to make the best move, 50% chance to make a random move if (Math.random() < 0.5) { return this.getBestMove(); } else { let emptyCells = []; for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (this.board[i][j] === '') { emptyCells.push({row: i, col: j}); } } } return emptyCells[Math.floor(Math.random() * emptyCells.length)]; } } minimax(board, depth, isMaximizing) { let result = this.checkWinningState(); if (result !== null) { return result; } if (isMaximizing) { let bestScore = -Infinity; for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (board[i][j] === '') { board[i][j] = 'O'; let score = this.minimax(board, depth + 1, false); board[i][j] = ''; bestScore = Math.max(score, bestScore); } } } return bestScore; } else { let bestScore = Infinity; for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (board[i][j] === '') { board[i][j] = 'X'; let score = this.minimax(board, depth + 1, true); board[i][j] = ''; bestScore = Math.min(score, bestScore); } } } return bestScore; } } checkWinningState() { for (let i = 0; i < 3; i++) { if (this.board[i][0] === this.board[i][1] && this.board[i][1] === this.board[i][2] && this.board[i][0] !== '') { return this.board[i][0] === 'O' ? 10 : -10; } if (this.board[0][i] === this.board[1][i] && this.board[1][i] === this.board[2][i] && this.board[0][i] !== '') { return this.board[0][i] === 'O' ? 10 : -10; } } if (this.board[0][0] === this.board[1][1] && this.board[1][1] === this.board[2][2] && this.board[0][0] !== '') { return this.board[0][0] === 'O' ? 10 : -10; } if (this.board[0][2] === this.board[1][1] && this.board[1][1] === this.board[2][0] && this.board[0][2] !== '') { return this.board[0][2] === 'O' ? 10 : -10; } let openSpots = 0; for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (this.board[i][j] === '') { openSpots++; } } } if (openSpots === 0) { return 0; } return null; } checkWin(row, col) { const player = this.board[row][col]; // Check row if (this.board[row].every(cell => cell === player)) { this.winLine = {type: 'row', index: row}; return true; } // Check column if (this.board.every(r => r[col] === player)) { this.winLine = {type: 'col', index: col}; return true; } // Check diagonals if (row === col && this.board.every((r, i) => r[i] === player)) { this.winLine = {type: 'diag', index: 0}; return true; } if (row + col === 2 && this.board.every((r, i) => r[2-i] === player)) { this.winLine = {type: 'diag', index: 1}; return true; } return false; } drawWinLine() { let graphics = this.add.graphics(); graphics.lineStyle(5, 0x00FF00, 1); switch(this.winLine.type) { case 'row': graphics.moveTo(55, 100 + this.winLine.index * 100); graphics.lineTo(345, 100 + this.winLine.index * 100); break; case 'col': graphics.moveTo(100 + this.winLine.index * 100, 55); graphics.lineTo(100 + this.winLine.index * 100, 345); break; case 'diag': if (this.winLine.index === 0) { graphics.moveTo(55, 55); graphics.lineTo(345, 345); } else { graphics.moveTo(345, 55); graphics.lineTo(55, 345); } break; } graphics.strokePath(); } checkDraw() { return this.board.every(row => row.every(cell => cell !== '')); } resetGame() { this.scene.restart(); } } const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 400, height: 400, scene: TicTacToe }; window.phaserGame = new Phaser.Game(config);