How to implement a basic computer opponent in a Tic Tac Toe game

Other Questions ai employee
1

I’m developing a Tic Tac Toe project that requires both single-player and multiplayer modes. The multiplayer part works fine, allowing users to enter their names and select symbols. When one player chooses X, they go first, and if they choose O, the other player starts. Now, I need assistance with implementing the single-player mode. I want to add a simple AI that selects random empty spots on the board. The same rules for turn order should apply: if the user chooses X, they start first, whereas if they pick O, the computer will go first.

Here’s the working multiplayer code:

// Global variables
let cross = 'X';
let circle = 'O';
let playerOne = cross;
let playerTwo = circle;
let currentPlayer = cross;
let gameState = "active";

// Selecting grid cells
const cells = document.getElementsByClassName("cell");

function showSettings() {
    if (playerOne == circle) {
        document.getElementById("selectX").checked = false;
        document.getElementById("selectO").checked = true;
    } else {
        document.getElementById("selectX").checked = true;
        document.getElementById("selectO").checked = false;
    }
    document.getElementById("settingsModal").style.display = "block";
}

function applyOptions() {
    if (document.getElementById('selectX').checked) {
        playerOne = cross;
        playerTwo = circle;
        currentPlayer = playerOne;
    } else {
        playerOne = circle;
        playerTwo = cross;
        currentPlayer = playerTwo;
    }
    document.getElementById("settingsModal").style.display = "none";
}

for (let j = 0; j < cells.length; j++) {
    cells[j].addEventListener("click", function() {
        if (cells[j].innerHTML.trim() == "" && gameState == "active") {
            cells[j].innerHTML = currentPlayer;
            let name1 = document.getElementById('player1').value;
            let name2 = document.getElementById('player2').value;
            
            currentPlayer = currentPlayer == playerOne ? playerTwo : playerOne;
            
            if(currentPlayer == playerOne) {
                document.getElementById("currentTurn").innerHTML = name1.toUpperCase();
            } else {
                document.getElementById("currentTurn").innerHTML = name2.toUpperCase();
            }
            
            checkForWinner();
        }
    });
}

function checkForWinner() {
    // Check rows, columns, diagonals
    if (cells[0].innerHTML == cells[1].innerHTML && cells[1].innerHTML == cells[2].innerHTML && cells[0].innerHTML.trim() != "") {
        highlightWinner(0, 1, 2);
    }
    // ... additional win conditions
}

Here’s my unfinished single-player code:

let cross = 'X';
let circle = 'O';
let player = cross;
let ai = circle;
let activeTurn = cross;

function aiTurn() {
    // Need assistance to implement random move logic here
}

Can anyone help me complete the AI move function?

2

For the AI function, just grab all empty cells and pick one randomly. Here’s what I did in my tic tac toe game:

function aiTurn() {
    let emptyCells = [];
    
    // Find all empty cells
    for (let i = 0; i < cells.length; i++) {
        if (cells[i].innerHTML.trim() === "") {
            emptyCells.push(i);
        }
    }
    
    // Pick random empty cell
    if (emptyCells.length > 0) {
        let randomIndex = Math.floor(Math.random() * emptyCells.length);
        let selectedCell = emptyCells[randomIndex];
        
        cells[selectedCell].innerHTML = ai;
        activeTurn = player; // Switch back to player
        
        checkForWinner();
    }
}

After the player moves, check if it’s the AI’s turn in your click handler. Use setTimeout(aiTurn, 500) to add a small delay - otherwise the AI move happens instantly and feels weird. Players need a second to see their move before the computer responds.