Create script.js

TicTacToe-Game/script.js

@@ -0,0 +1,207 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const boardElement = document.getElementById('board');
+    const modeSelector = document.getElementById('mode');
+    const turnElement = document.getElementById('turn');
+    const statusElement = document.getElementById('status');
+    const playerXScoreElement = document.getElementById('playerXScore');
+    const playerOScoreElement = document.getElementById('playerOScore');
+    const modalElement = document.getElementById('modal');
+    const modalMessageElement = document.getElementById('modal-message');
+    const playAgainButton = document.getElementById('play-again');
+
+    let board = ['', '', '', '', '', '', '', '', ''];
+    let currentPlayer = 'X';
+    let gameActive = true;
+    let playerMode = modeSelector.value; // Default: Player vs Player
+    let playerXScore = 0;
+    let playerOScore = 0;
+
+    const winPatterns = [
+        [0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
+        [0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns
+        [0, 4, 8], [2, 4, 6]             // Diagonals
+    ];
+
+    const renderBoard = () => {
+        boardElement.innerHTML = '';
+        board.forEach((value, index) => {
+            const cell = document.createElement('div');
+            cell.classList.add('cell');
+            if (value === 'X' || value === 'O') {
+                cell.textContent = value;
+            }
+            cell.addEventListener('click', () => handleCellClick(index));
+            boardElement.appendChild(cell);
+        });
+        updateBoardColors();
+    };
+
+    const handleCellClick = (index) => {
+        if (gameActive && board[index] === '') {
+            board[index] = currentPlayer;
+            renderBoard();
+
+            if (checkWinner()) {
+                endGame(`${currentPlayer} Wins!`);
+            } else if (board.every(cell => cell !== '')) {
+                endGame('Draw!');
+            } else {
+                currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
+                updateTurn();
+                if (playerMode === 'pva' && currentPlayer === 'O') {
+                    makeAIMove();
+                }
+            }
+        }
+    };
+
+    const updateTurn = () => {
+        turnElement.textContent = `Turn: Player ${currentPlayer}`;
+    };
+
+    const checkWinner = () => {
+        for (const pattern of winPatterns) {
+            const [a, b, c] = pattern;
+            if (board[a] && board[a] === board[b] && board[a] === board[c]) {
+                highlightWinningCells(pattern);
+                return board[a];
+            }
+        }
+        return null;
+    };
+
+    const highlightWinningCells = (pattern) => {
+        pattern.forEach((index) => {
+            const cellElement = boardElement.children[index];
+            cellElement.classList.add('winner');
+        });
+    };
+
+    const endGame = (message) => {
+        gameActive = false;
+        statusElement.textContent = message;
+
+        if (message.includes('Wins')) {
+            currentPlayer === 'X' ? playerXScore++ : playerOScore++;
+            updateScore();
+        }
+
+        showModal(message);
+    };
+
+    const updateScore = () => {
+        playerXScoreElement.textContent = `Player X: ${playerXScore}`;
+        playerOScoreElement.textContent = `Player O: ${playerOScore}`;
+    };
+
+    const showModal = (message) => {
+        modalMessageElement.textContent = message;
+        modalElement.style.display = 'flex';
+    };
+
+    const hideModal = () => {
+        modalElement.style.display = 'none';
+    };
+
+    const makeAIMove = () => {
+        const bestMove = getBestMove();
+        handleCellClick(bestMove);
+    };
+
+    const getBestMove = () => {
+        let bestScore = -Infinity;
+        let bestMove;
+
+        for (let i = 0; i < 9; i++) {
+            if (board[i] === '') {
+                board[i] = 'O';
+                let score = minimax(board, 0, false);
+                board[i] = '';
+
+                if (score > bestScore) {
+                    bestScore = score;
+                    bestMove = i;
+                }
+            }
+        }
+
+        return bestMove;
+    };
+
+    const minimax = (board, depth, isMaximizing) => {
+        const scores = {
+            X: -1,
+            O: 1,
+            tie: 0
+        };
+
+        const winner = checkWinner();
+        if (winner !== null) {
+            return scores[winner];
+        }
+
+        if (isMaximizing) {
+            let bestScore = -Infinity;
+            for (let i = 0; i < 9; i++) {
+                if (board[i] === '') {
+                    board[i] = 'O';
+                    let score = minimax(board, depth + 1, false);
+                    board[i] = '';
+                    bestScore = Math.max(score, bestScore);
+                }
+            }
+            return bestScore;
+        } else {
+            let bestScore = Infinity;
+            for (let i = 0; i < 9; i++) {
+                if (board[i] === '') {
+                    board[i] = 'X';
+                    let score = minimax(board, depth + 1, true);
+                    board[i] = '';
+                    bestScore = Math.min(score, bestScore);
+                }
+            }
+            return bestScore;
+        }
+    };
+
+    const updateBoardColors = () => {
+        for (let i = 0; i < 9; i++) {
+            const cellElement = boardElement.children[i];
+            cellElement.classList.remove('winner');
+        }
+    };
+
+    modeSelector.addEventListener('change', () => {
+        const previousMode = playerMode;
+        playerMode = modeSelector.value;
+
+        if (previousMode !== playerMode) {
+            // Oyun modu değiştiğinde skorları sıfırla
+            playerXScore = 0;
+            playerOScore = 0;
+            updateScore();
+        }
+
+        resetGame();
+    });
+
+    playAgainButton.addEventListener('click', () => {
+        hideModal();
+        resetGame();
+    });
+
+    const resetGame = () => {
+        board = ['', '', '', '', '', '', '', '', ''];
+        currentPlayer = 'X';
+        gameActive = true;
+        statusElement.textContent = '';
+        renderBoard();
+
+        if (playerMode === 'pva' && currentPlayer === 'O') {
+            makeAIMove();
+        }
+    };
+
+    resetGame();
+});