class ConnectFour extends Phaser.Scene { constructor() { super('ConnectFour'); this.boardWidth = 10; this.boardHeight = 11; this.cellSize = 50; this.currentPlayer = 1; this.elapsedTime = 0; this.timerText = null; this.bestTimes = { Easy: Infinity, Normal: Infinity, Hard: Infinity, 'X-Hard': Infinity }; this.bestTimeText = null; // Text object for displaying best times this.colors = { 1: 0x7FDBFF, // Light blue 2: 0x2ECC40 // Green }; this.highlightColor = 0xB19CD9; // Lighter shade of purple highlight this.isDropping = false; // Flag to prevent rapid clicking this.gameOver = false; // Flag to track if the game is over this.humanPlayer = 1; // Human player is always player 1 this.cpuPlayer = 2; // CPU player is always player 2 this.fixedDepth = 4; this.quiescenceDepth = 4; this.initialFixedDepth = 2; this.initialQuiescenceDepth = 2; this.allowHighlight = true; // New property to control highlighting this.cpuMoveCount = 0; // Counter for CPU moves this.selectedDifficulty = null; // Default difficulty set to null } preload() { this.load.image('background', 'https://play.rosebud.ai/assets/WyomingField.png?3ToL'); } create() { // Disable right-click context menu this.input.mouse.disableContextMenu(); // Add background image const background = this.add.image(this.sys.game.config.width / 2, this.sys.game.config.height / 2, 'background'); background.setDisplaySize(this.sys.game.config.width, this.sys.game.config.height); // Add instruction text in upper left corner this.add.text(10, 10, 'Make five\nin a line.', { fontSize: '24px', fontFamily: 'Arial, sans-serif', color: '#ffffff', align: 'left', fontStyle: 'bold' }); // Add instruction text in bottom left corner this.add.text(10, this.sys.game.config.height - 50, 'Mouse click\nto move.', { fontSize: '24px', fontFamily: 'Arial, sans-serif', color: '#ffffff', align: 'left', fontStyle: 'bold' }); // Add a semi-transparent overlay to dim the background const overlay = this.add.rectangle(0, 0, this.sys.game.config.width, this.sys.game.config.height, 0x000000, 0.3); overlay.setOrigin(0, 0); // Add "New Game" menu this.createNewGameMenu(); // Add message box const message = 'Select Difficulty'; const textStyle = { fontSize: '32px', fontFamily: 'Arial, sans-serif', fontStyle: 'bold', fill: '#ffffff' }; // Create a temporary text object to measure its width const tempText = this.add.text(0, 0, message, textStyle); const textWidth = tempText.width; const textHeight = tempText.height; tempText.destroy(); // Create the message box with appropriate dimensions const boxWidth = textWidth + 40; // Add some padding const boxHeight = textHeight + 20; // Add some padding this.messageBox = this.add.rectangle(this.sys.game.config.width / 2, this.sys.game.config.height / 2, boxWidth, boxHeight, 0x000000, 1); this.messageBox.setDepth(1000); // Set a high depth value to ensure it's on top this.messageLetters = []; for (let i = 0; i < message.length; i++) { const letter = this.add.text( this.sys.game.config.width / 2 + (i - message.length / 2) * (textWidth / message.length), this.sys.game.config.height / 2, message[i], textStyle ); letter.setOrigin(0.5); letter.setDepth(1001); this.messageLetters.push(letter); // Create wave animation for each letter this.tweens.add({ targets: letter, y: letter.y - 10, duration: 500, ease: 'Sine.easeInOut', yoyo: true, repeat: -1, delay: i * 100 // Delay each letter to create wave effect }); } // Disable game interaction this.gameEnabled = false; // Create difficulty text this.difficultyText = this.add.text(this.sys.game.config.width - 10, 10, '', { fontSize: '24px', fontFamily: 'Arial, sans-serif', fontStyle: 'bold', fill: '#ffff00', align: 'right' }); this.difficultyText.setOrigin(1, 0); this.difficultyText.setDepth(1000); // Create timer text this.timerText = this.add.text(this.sys.game.config.width - 10, 40, '00:00.0', { fontSize: '32px', fontFamily: 'Arial, sans-serif', fontStyle: 'bold', fill: '#ffff00', align: 'right' }); this.timerText.setOrigin(1, 0); this.timerText.setDepth(1000); // Create "Best Time" text this.bestTimeText = this.add.text(this.sys.game.config.width - 10, this.sys.game.config.height - 50, 'Best Time', { fontSize: '24px', fontFamily: 'Arial, sans-serif', fontStyle: 'bold', fill: '#ffff00', align: 'right' }); this.bestTimeText.setOrigin(1, 1); this.bestTimeText.setDepth(1000); // Create smaller font text for best time stats this.bestTimeStatsText = this.add.text(this.sys.game.config.width - 10, this.sys.game.config.height - 10, 'Easy: --:--.-\nNormal: --:--.-\nHard: --:--.-\nX-Hard: --:--.-', { fontSize: '16px', fontFamily: 'Arial, sans-serif', fontStyle: 'bold', fill: '#ffff00', align: 'right' }); this.bestTimeStatsText.setOrigin(1, 1); this.bestTimeStatsText.setDepth(1000); // Position "Best Time" text above stats text this.bestTimeText.y -= this.bestTimeStatsText.height; this.bestTimeStatsText.y -= this.bestTimeText.height; // Create "Please wait" text this.waitText = this.add.text(this.sys.game.config.width - 0, this.sys.game.config.height / 2 - 50, 'Please wait', { fontSize: '28px', fontFamily: 'Arial, sans-serif', fontWeight: 'bold', fill: '#ffff00' // Changed to yellow }); this.waitText.setOrigin(1, 0.5); this.waitText.setDepth(1000); this.waitText.setVisible(false); // Calculate the starting position to center the board const boardPixelWidth = this.boardWidth * this.cellSize; const boardPixelHeight = this.boardHeight * this.cellSize; const startX = (this.sys.game.config.width - boardPixelWidth) / 2; // Adjust startY to ensure the bottom of the board is inside the screen const startY = this.sys.game.config.height - boardPixelHeight - 5; // Create the game board this.board = []; this.pieces = []; // New array to store piece graphics for (let y = 0; y < this.boardHeight; y++) { this.board[y] = []; this.pieces[y] = []; for (let x = 0; x < this.boardWidth; x++) { const cellX = startX + x * this.cellSize + this.cellSize / 2; const cellY = startY + y * this.cellSize + this.cellSize / 2; // Create a hollow circle const cell = this.add.graphics(); cell.lineStyle(2, 0xffffff); cell.strokeCircle(0, 0, this.cellSize / 2 - 2); cell.setPosition(cellX, cellY); this.board[y][x] = { graphics: cell, filled: false, player: null }; this.pieces[y][x] = null; // Initialize piece slot as empty } } // Create highlight graphics this.highlightGraphics = this.add.graphics(); // Add click listeners and hover effects to each column this.columnRects = []; for (let x = 0; x < this.boardWidth; x++) { const columnX = startX + x * this.cellSize + this.cellSize / 2; const columnRect = this.add.rectangle(columnX, startY + boardPixelHeight / 2, this.cellSize, boardPixelHeight); columnRect.setInteractive(); columnRect.on('pointerdown', () => { if (this.gameEnabled) this.humanMove(x); }); columnRect.on('pointerover', () => { if (this.gameEnabled) this.highlightColumn(x); }); columnRect.on('pointerout', () => { if (this.gameEnabled) this.clearHighlight(); }); this.columnRects.push(columnRect); } // Human player always moves first, so we don't need to call cpuMove here } humanMove(column) { if (this.isDropping || this.gameOver || this.currentPlayer !== this.humanPlayer) return; // Check if the column is full if (this.isColumnFull(column)) { // Column is full, don't do anything but keep the highlight return; } this.allowHighlight = false; // Disable highlighting after move initiation this.clearHighlight(); // Clear any existing highlight this.toggleNewGameMenu(false); // Hide "New Game" button when human starts their move this.dropPiece(column); } isColumnFull(column) { return this.board[0][column].filled; } cpuMove() { if (this.gameOver) return; // Pause the timer and show "Please wait" message this.pauseTimer(); this.waitText.setVisible(true); this.toggleNewGameMenu(false); // Ensure "New Game" button is hidden during CPU's turn // Use a slight delay before the CPU makes its move this.time.delayedCall(500, () => { // Check for immediate winning move or blocking move const immediateMove = this.findImmediateMove(); if (immediateMove !== -1) { this.dropPiece(immediateMove); } else { // Set depths for the first two CPU moves const currentFixedDepth = this.cpuMoveCount < 2 ? this.initialFixedDepth : this.fixedDepth; const currentQuiescenceDepth = this.cpuMoveCount < 2 ? this.initialQuiescenceDepth : this.quiescenceDepth; const bestMove = this.minimax(this.board, currentFixedDepth, -Infinity, Infinity, true, true, currentQuiescenceDepth); this.dropPiece(bestMove.column); } // Increment the CPU move counter this.cpuMoveCount++; }); } findImmediateMove() { // Check for winning move for (let col = 0; col < this.boardWidth; col++) { const row = this.findLastEmptyRow(this.board, col); if (row !== -1) { let newBoard = this.makeMove(this.board, col, this.cpuPlayer); if (this.checkWinForBoard(newBoard, row, col)) { return col; } } } // Check for blocking opponent's winning move for (let col = 0; col < this.boardWidth; col++) { const row = this.findLastEmptyRow(this.board, col); if (row !== -1) { let newBoard = this.makeMove(this.board, col, this.humanPlayer); if (this.checkWinForBoard(newBoard, row, col)) { return col; } } } return -1; // No immediate move found } pauseTimer() { if (this.timerEvent) { this.timerEvent.paused = true; } } resumeTimer() { if (this.timerEvent) { this.timerEvent.paused = false; } } dropPiece(column) { for (let y = this.boardHeight - 1; y >= 0; y--) { if (!this.board[y][column].filled) { const cellX = this.board[y][column].graphics.x; const cellY = this.board[y][column].graphics.y; const piece = this.add.circle(cellX, 0, this.cellSize / 2 - 4, this.colors[this.currentPlayer]); this.board[y][column].filled = true; this.board[y][column].player = this.currentPlayer; this.pieces[y][column] = piece; // Store the piece graphic this.isDropping = true; this.tweens.add({ targets: piece, y: cellY, duration: 500, ease: 'Bounce.easeOut', onComplete: () => { this.isDropping = false; const winningCoords = this.checkWin(y, column); if (winningCoords) { this.gameOver = true; this.time.removeAllEvents(); // Stop the timer console.log(`Player ${this.currentPlayer} wins!`); // Draw the winning line const startCoord = winningCoords[0]; const endCoord = winningCoords[winningCoords.length - 1]; const startX = this.board[startCoord[0]][startCoord[1]].graphics.x; const startY = this.board[startCoord[0]][startCoord[1]].graphics.y; const endX = this.board[endCoord[0]][endCoord[1]].graphics.x; const endY = this.board[endCoord[0]][endCoord[1]].graphics.y; this.drawWinningLine(startX, startY, endX, endY); this.endGame(true); //Pass true to indicate a win } else if (this.isBoardFull()) { this.gameOver = true; this.endGame(false); // Pass false to indicate a draw this.time.removeAllEvents(); // Stop the timer console.log("It's a draw!"); } else { this.currentPlayer = this.currentPlayer === 1 ? 2 : 1; if (this.currentPlayer === this.cpuPlayer && !this.gameOver) { this.cpuMove(); } else { // Resume the timer and hide "Please wait" message when it's the human's turn this.resumeTimer(); this.waitText.setVisible(false); this.allowHighlight = true; // Re-enable highlighting for human's turn this.toggleNewGameMenu(true); // Show "New Game" button when it's the human's turn this.refreshHighlight(); // Refresh the highlight state } } } }); return; } } } highlightColumn(column) { if (this.gameOver || !this.allowHighlight) return; this.highlightGraphics.clear(); this.highlightGraphics.fillStyle(this.highlightColor, 0.3); const startX = (this.sys.game.config.width - this.boardWidth * this.cellSize) / 2; const startY = this.sys.game.config.height - this.boardHeight * this.cellSize - 5; const columnX = startX + column * this.cellSize; this.highlightGraphics.fillRect(columnX, startY, this.cellSize, this.boardHeight * this.cellSize); } clearHighlight() { if (this.highlightGraphics) { this.highlightGraphics.clear(); } } drawWinningLine(startX, startY, endX, endY) { this.winningLine = this.add.graphics(); const graphics = this.winningLine; graphics.lineStyle(5, this.colors[this.currentPlayer], 1); graphics.beginPath(); graphics.moveTo(startX, startY); graphics.lineTo(endX, endY); graphics.strokePath(); // Create a timer event to change the line color this.time.addEvent({ delay: 100, // Change color every 100ms callback: () => { const randomColor = Phaser.Display.Color.RandomRGB(); graphics.clear(); graphics.lineStyle(5, randomColor.color, 1); graphics.beginPath(); graphics.moveTo(startX, startY); graphics.lineTo(endX, endY); graphics.strokePath(); }, loop: true }); } checkWin(row, col) { const directions = [ [0, 1], // horizontal [1, 0], // vertical [1, 1], // diagonal down-right [1, -1] // diagonal down-left ]; for (let [dx, dy] of directions) { let count = 1; let forwardCoords = this.countDirection(row, col, dx, dy); let backwardCoords = this.countDirection(row, col, -dx, -dy); count += forwardCoords.length + backwardCoords.length; if (count >= 5) { return [...backwardCoords.reverse(), [row, col], ...forwardCoords]; } } return false; } countDirection(row, col, dx, dy) { let coords = []; let x = col + dx; let y = row + dy; while ( y >= 0 && y < this.boardHeight && x >= 0 && x < this.boardWidth && this.board[y][x].player === this.currentPlayer ) { coords.push([y, x]); x += dx; y += dy; } return coords; } minimax(board, depth, alpha, beta, maximizingPlayer, allowQuiescence, quiescenceDepth) { if (depth === 0 || this.isTerminalNode(board)) { if (allowQuiescence && this.isVolatilePosition(board)) { return this.quiescenceSearch(board, quiescenceDepth, alpha, beta, maximizingPlayer); } return { score: this.evaluateBoard(board) }; } let validMoves = this.getValidMoves(board); validMoves = this.filterDangerousMoves(board, validMoves); validMoves.sort((a, b) => b.score - a.score); // Move ordering if (this.selectedDifficulty === 'Easy' || this.selectedDifficulty === 'Normal') { return this.selectPercentileMove(validMoves, this.selectedDifficulty); } if (maximizingPlayer) { let maxEval = { score: -Infinity, column: null }; for (let move of validMoves) { let newBoard = this.makeMove(board, move.column, this.cpuPlayer); let evaluation = this.minimax(newBoard, depth - 1, alpha, beta, false, allowQuiescence, quiescenceDepth); if (evaluation.score > maxEval.score) { maxEval = { score: evaluation.score, column: move.column }; } alpha = Math.max(alpha, evaluation.score); if (beta <= alpha) break; } return maxEval; } else { let minEval = { score: Infinity, column: null }; for (let move of validMoves) { let newBoard = this.makeMove(board, move.column, this.humanPlayer); let evaluation = this.minimax(newBoard, depth - 1, alpha, beta, true, allowQuiescence, quiescenceDepth); if (evaluation.score < minEval.score) { minEval = { score: evaluation.score, column: move.column }; } beta = Math.min(beta, evaluation.score); if (beta <= alpha) break; } return minEval; } } selectPercentileMove(validMoves, difficulty) { if (difficulty === 'Easy') { // Select the 5th best move return validMoves[Math.min(4, validMoves.length - 1)]; } else if (difficulty === 'Normal') { // Select the 3rd best move return validMoves[Math.min(2, validMoves.length - 1)]; } else if (difficulty === 'Hard') { // For Hard difficulty, always return the best move return validMoves[0]; } else { // For X-Hard difficulty, return the best move (unchanged) return validMoves[0]; } } filterDangerousMoves(board, validMoves) { let safeMoves = validMoves.filter(move => { let newBoard = this.makeMove(board, move.column, this.cpuPlayer); let row = this.findLastEmptyRow(board, move.column); // Check if this move allows the human player to win in the next move for (let col = 0; col < this.boardWidth; col++) { if (!newBoard[0][col].filled) { let humanMoveBoard = this.makeMove(newBoard, col, this.humanPlayer); let humanMoveRow = this.findLastEmptyRow(newBoard, col); if (this.checkWinForBoard(humanMoveBoard, humanMoveRow, col)) { return false; // This move is dangerous } } } return true; // This move is safe }); // If there are no safe moves, return all valid moves return safeMoves.length > 0 ? safeMoves : validMoves; } quiescenceSearch(board, depth, alpha, beta, maximizingPlayer) { let standPat = this.evaluateBoard(board); if (depth === 0) return { score: standPat }; if (maximizingPlayer) { if (standPat >= beta) return { score: beta }; if (alpha < standPat) alpha = standPat; } else { if (standPat <= alpha) return { score: alpha }; if (beta > standPat) beta = standPat; } let validMoves = this.getValidMoves(board); validMoves = validMoves.filter(move => this.isCapturingMove(board, move.column)); if (validMoves.length === 0) return { score: standPat }; if (maximizingPlayer) { let maxEval = { score: standPat }; for (let move of validMoves) { let newBoard = this.makeMove(board, move.column, this.cpuPlayer); let evaluation = this.quiescenceSearch(newBoard, depth - 1, alpha, beta, false); if (evaluation.score > maxEval.score) { maxEval = { score: evaluation.score, column: move.column }; } alpha = Math.max(alpha, evaluation.score); if (beta <= alpha) break; } return maxEval; } else { let minEval = { score: standPat }; for (let move of validMoves) { let newBoard = this.makeMove(board, move.column, this.humanPlayer); let evaluation = this.quiescenceSearch(newBoard, depth - 1, alpha, beta, true); if (evaluation.score < minEval.score) { minEval = { score: evaluation.score, column: move.column }; } beta = Math.min(beta, evaluation.score); if (beta <= alpha) break; } return minEval; } } isVolatilePosition(board) { for (let x = 0; x < this.boardWidth; x++) { if (!board[0][x].filled) { let newBoard = this.makeMove(board, x, this.cpuPlayer); if (this.checkWinForBoard(newBoard, this.findLastEmptyRow(board, x), x)) { return true; } newBoard = this.makeMove(board, x, this.humanPlayer); if (this.checkWinForBoard(newBoard, this.findLastEmptyRow(board, x), x)) { return true; } // Check for double threats if (this.hasDoubleThreat(newBoard, this.cpuPlayer) || this.hasDoubleThreat(newBoard, this.humanPlayer)) { return true; } } } return false; } hasDoubleThreat(board, player) { let threats = 0; for (let x = 0; x < this.boardWidth; x++) { if (!board[0][x].filled) { let newBoard = this.makeMove(board, x, player); if (this.checkWinForBoard(newBoard, this.findLastEmptyRow(board, x), x)) { threats++; if (threats >= 2) return true; } } } return false; } isCapturingMove(board, column) { const row = this.findLastEmptyRow(board, column); if (row === -1) return false; let newBoard = this.makeMove(board, column, this.cpuPlayer); if (this.checkWinForBoard(newBoard, row, column)) return true; newBoard = this.makeMove(board, column, this.humanPlayer); return this.checkWinForBoard(newBoard, row, column); } findLastEmptyRow(board, column) { for (let y = this.boardHeight - 1; y >= 0; y--) { if (!board[y][column].filled) { return y; } } return -1; } getValidMoves(board) { let moves = []; for (let col = 0; col < this.boardWidth; col++) { if (!board[0][col].filled) { let newBoard = this.makeMove(board, col, this.cpuPlayer); let score = this.evaluateBoard(newBoard); moves.push({ column: col, score: score }); } } return moves; } makeMove(board, column, player) { let newBoard = JSON.parse(JSON.stringify(board)); for (let y = this.boardHeight - 1; y >= 0; y--) { if (!newBoard[y][column].filled) { newBoard[y][column].filled = true; newBoard[y][column].player = player; break; } } return newBoard; } isTerminalNode(board) { // Check for a win for (let y = 0; y < this.boardHeight; y++) { for (let x = 0; x < this.boardWidth; x++) { if (board[y][x].player && this.checkWinForBoard(board, y, x)) { return true; } } } // Check for a draw for (let x = 0; x < this.boardWidth; x++) { if (!board[0][x].filled) { return false; } } return true; } checkWinForBoard(board, row, col) { const directions = [ [0, 1], // horizontal [1, 0], // vertical [1, 1], // diagonal down-right [1, -1] // diagonal down-left ]; for (let [dx, dy] of directions) { let count = 1; count += this.countDirectionForBoard(board, row, col, dx, dy); count += this.countDirectionForBoard(board, row, col, -dx, -dy); if (count >= 5) { return true; } } return false; } countDirectionForBoard(board, row, col, dx, dy) { let count = 0; let x = col + dx; let y = row + dy; while ( y >= 0 && y < this.boardHeight && x >= 0 && x < this.boardWidth && board[y][x].player === board[row][col].player ) { count++; x += dx; y += dy; } return count; } evaluateBoard(board) { let score = 0; // Evaluate horizontal, vertical, and diagonal lines score += this.evaluateLines(board); // Add score for center control score += this.evaluateCenterControl(board); // Evaluate threats score += this.evaluateThreats(board); return score; } evaluateLines(board) { let score = 0; // Evaluate horizontal for (let y = 0; y < this.boardHeight; y++) { score += this.evaluateLine(board[y]); } // Evaluate vertical for (let x = 0; x < this.boardWidth; x++) { let column = board.map(row => row[x]); score += this.evaluateLine(column); } // Evaluate diagonals score += this.evaluateDiagonals(board); return score; } evaluateLine(line) { let score = 0; for (let i = 0; i <= line.length - 5; i++) { let window = line.slice(i, i + 5); score += this.evaluateWindow(window); } return score; } evaluateWindow(window) { let cpuCount = window.filter(cell => cell.player === this.cpuPlayer).length; let humanCount = window.filter(cell => cell.player === this.humanPlayer).length; let emptyCount = window.filter(cell => !cell.filled).length; if (cpuCount === 5) return 1000000; if (humanCount === 5) return -1000000; let score = 0; if (this.selectedDifficulty === 'Easy') { // Less punishing evaluation for Easy mode if (cpuCount === 4 && emptyCount === 1) score += 1000; if (humanCount === 4 && emptyCount === 1) score -= 5000; if (cpuCount === 3 && emptyCount === 2) score += 100; if (humanCount === 3 && emptyCount === 2) score -= 500; if (cpuCount === 2 && emptyCount === 3) score += 10; if (humanCount === 2 && emptyCount === 3) score -= 50; score += cpuCount * 2 - humanCount * 2; } else { // Normal evaluation for other difficulties if (cpuCount === 4 && emptyCount === 1) score += 10000; if (humanCount === 4 && emptyCount === 1) score -= 50000; if (cpuCount === 3 && emptyCount === 2) score += 1000; if (humanCount === 3 && emptyCount === 2) score -= 5000; if (cpuCount === 2 && emptyCount === 3) score += 100; if (humanCount === 2 && emptyCount === 3) score -= 500; score += cpuCount * 10 - humanCount * 10; } return score; } evaluateDiagonals(board) { let score = 0; // Evaluate diagonals (top-left to bottom-right) for (let i = 0; i <= this.boardHeight - 5; i++) { for (let j = 0; j <= this.boardWidth - 5; j++) { let diagonal = []; for (let k = 0; k < 5; k++) { diagonal.push(board[i + k][j + k]); } score += this.evaluateWindow(diagonal); } } // Evaluate diagonals (top-right to bottom-left) for (let i = 0; i <= this.boardHeight - 5; i++) { for (let j = this.boardWidth - 1; j >= 4; j--) { let diagonal = []; for (let k = 0; k < 5; k++) { diagonal.push(board[i + k][j - k]); } score += this.evaluateWindow(diagonal); } } return score; } evaluateCenterControl(board) { let score = 0; const centerColumns = [3, 4, 5, 6]; for (let x of centerColumns) { for (let y = 0; y < this.boardHeight; y++) { if (board[y][x].player === this.cpuPlayer) { score += 3; } else if (board[y][x].player === this.humanPlayer) { score -= 3; } } } return score; } evaluateThreats(board) { let score = 0; if (this.hasDoubleThreat(board, this.cpuPlayer)) { score += 1000; } if (this.hasDoubleThreat(board, this.humanPlayer)) { score -= 1000; } return score; } update() { // Game logic will go here } createNewGameMenu() { const menuWidth = 100; // Reduced from 120 const menuHeight = 160; const padding = 5; const buttonHeight = 30; const buttonWidth = 80; // New width for buttons const buttonSpacing = 5; // Calculate the vertical center position const centerY = this.sys.game.config.height / 2 - menuHeight / 2; // Create "New Game" title this.newGameTitle = this.add.text(menuWidth / 2 + 15, centerY, 'New Game:', { fontSize: '24px', fontWeight: 'bold', fill: '#ffffff' }); this.newGameTitle.setOrigin(0.5, 0.8); // Create "Easy" button this.easyButton = this.createButton(menuWidth / 2, this.newGameTitle.y + this.newGameTitle.height + buttonSpacing, 'Easy', buttonWidth, buttonHeight); // Create "Normal" button this.normalButton = this.createButton(menuWidth / 2, this.easyButton.y + buttonHeight + buttonSpacing, 'Normal', buttonWidth, buttonHeight); // Create new "Hard" button this.hardButton = this.createButton(menuWidth / 2, this.normalButton.y + buttonHeight + buttonSpacing, 'Hard', buttonWidth, buttonHeight); // Create "X-Hard" button this.xHardButton = this.createButton(menuWidth / 2, this.hardButton.y + buttonHeight + buttonSpacing, 'X-Hard', buttonWidth, buttonHeight); // Create warning text for X-Hard mode this.xHardWarningText = this.add.text(menuWidth / 2, this.xHardButton.y + buttonHeight + 5, '(X-Hard is\nVERY SLOW)', { fontSize: '14px', fill: '#ffffff', align: 'center' }); this.xHardWarningText.setOrigin(0.5, 0); this.xHardWarningText.setLineSpacing(2); // Initialize the menu visibility this.toggleNewGameMenu(true); } createButton(x, y, text, width, height) { const button = this.add.text(x, y, text, { fontSize: '20px', fontWeight: 'bold', fill: '#ffffff', backgroundColor: '#4a4a4a', padding: { left: 10, right: 10, top: 5, bottom: 5 }, fixedWidth: width }); button.setOrigin(0.5, 0); // Center the button horizontally button.setInteractive({ useHandCursor: true }); button.on('pointerdown', () => { console.log(`${text} selected`); this.selectedDifficulty = text; this.startGame(); }); button.on('pointerover', () => button.setStyle({ backgroundColor: '#666666' })); button.on('pointerout', () => button.setStyle({ backgroundColor: '#4a4a4a' })); return button; } toggleNewGameMenu(visible) { this.newGameTitle.setVisible(visible); this.easyButton.setVisible(visible); this.normalButton.setVisible(visible); this.hardButton.setVisible(visible); this.xHardButton.setVisible(visible); this.xHardWarningText.setVisible(visible); } updateTimer() { this.elapsedTime += 0.1; // Increment by 0.1 seconds const minutes = Math.floor(this.elapsedTime / 60); const seconds = Math.floor(this.elapsedTime % 60); const tenths = Math.floor((this.elapsedTime % 1) * 10); this.timerText.setText(`${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${tenths}`); } startGame() { this.gameEnabled = true; this.currentPlayer = this.humanPlayer; // Ensure human player moves first this.gameOver = false; this.elapsedTime = 0; this.timerText.setText('00:00.0'); // Reset timer text style this.timerText.setStyle({ fontSize: '32px', fontFamily: 'Arial, sans-serif', fontStyle: 'bold', fill: '#ffff00', align: 'right' }); this.timerEvent = this.time.addEvent({ delay: 100, // Update every 100ms for smoother tenths of a second callback: this.updateTimer, callbackScope: this, loop: true }); this.waitText.setVisible(false); this.toggleNewGameMenu(true); // Show menu at the start of a new game // Update difficulty text this.difficultyText.setText(this.selectedDifficulty); // Set difficulty levels switch (this.selectedDifficulty) { case 'Easy': this.fixedDepth = 1; this.quiescenceDepth = 0; break; case 'Normal': this.fixedDepth = 2; this.quiescenceDepth = 2; break; case 'Hard': this.fixedDepth = 3; this.quiescenceDepth = 3; break; case 'X-Hard': this.fixedDepth = 4; this.quiescenceDepth = 4; break; } // Reset the game state to allow the "New Game" menu to be visible again this.isFirstMove = true; // Clear all pieces and reset the board for (let y = 0; y < this.boardHeight; y++) { for (let x = 0; x < this.boardWidth; x++) { if (this.board[y][x].filled) { // Remove the piece graphic if (this.pieces[y][x]) { this.pieces[y][x].destroy(); this.pieces[y][x] = null; } // Reset the cell state this.board[y][x].filled = false; this.board[y][x].player = null; } } } // Remove the winning line if it exists if (this.winningLine) { this.winningLine.destroy(); this.winningLine = null; } // Stop any ongoing animations or timers this.tweens.killAll(); this.time.removeAllEvents(); //Fade out the message box and letters if they exist if (this.messageBox) { this.tweens.add({ targets: [this.messageBox, ...this.messageLetters], alpha: 0, duration: 500, onComplete: () => { this.messageBox.destroy(); this.messageLetters.forEach(letter => letter.destroy()); this.messageLetters = []; this.messageBox = null; } }); } console.log('Starting new game'); // Reset the CPU move counter this.cpuMoveCount = 0; // Enable highlighting and refresh the highlight state this.allowHighlight = true; this.refreshHighlight(); } endGame(isWin) { this.toggleNewGameMenu(true); this.allowHighlight = false; this.waitText.setVisible(false); // Remove "Please wait" text if (this.currentPlayer === this.cpuPlayer || this.isBoardFull()) { // Player lost or it's a draw, replace timer with "GAME OVER" this.timerText.setText('GAME\nOVER'); this.timerText.setStyle({ fontSize: '28px', fontFamily: 'Arial, sans-serif', fontStyle: 'bold', fill: '#ff0000', align: 'center' }); } // Update best time if the player won if (isWin && this.currentPlayer === this.humanPlayer) { if (this.elapsedTime < this.bestTimes[this.selectedDifficulty]) { this.bestTimes[this.selectedDifficulty] = this.elapsedTime; this.updateBestTimeDisplay(); } } } isBoardFull() { for (let x = 0; x < this.boardWidth; x++) { if (!this.board[0][x].filled) { return false; } } return true; } refreshHighlight() { if (this.gameEnabled && this.allowHighlight && !this.gameOver) { const pointer = this.input.activePointer; const hoveredColumn = this.columnRects.findIndex(rect => rect.getBounds().contains(pointer.x, pointer.y)); if (hoveredColumn !== -1) { this.highlightColumn(hoveredColumn); } else { this.clearHighlight(); } } } updateBestTimeDisplay() { let bestTimeString = ''; for (let difficulty of ['Easy', 'Normal', 'Hard', 'X-Hard']) { if (this.bestTimes[difficulty] === Infinity) { bestTimeString += `${difficulty}: --:--.-\n`; } else { const minutes = Math.floor(this.bestTimes[difficulty] / 60); const seconds = Math.floor(this.bestTimes[difficulty] % 60); const tenths = Math.floor((this.bestTimes[difficulty] % 1) * 10); bestTimeString += `${difficulty}: ${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${tenths}\n`; } } this.bestTimeStatsText.setText(bestTimeString.trim()); } } const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, scene: ConnectFour, physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: false } } }; window.phaserGame = new Phaser.Game(config);