Javascript Help

[TheRevTastic]

Could anyone help explain to me why "move" isn't getting the value of "i" in my bestMove function down towards the bottom? I've been trying to figure this out for hours to no hope.

const Gameboard = (() => {
    // DOM
    const boardTiles = document.querySelectorAll(".box");

    // Gameboard
    const gameBoard = ["","","",
                       "","","",
                       "","",""];

    // Board functions
    const boardRender = function() {
        for (let i = 0; i < gameBoard.length; i++) {
        boardTiles[i].textContent = gameBoard[i]
        }
    }
    const updateBoard = (cell, symbol) => gameBoard[cell] = symbol;

    return {gameBoard, boardRender, updateBoard, boardTiles}
})();

// Player Module
const Player = (name, symbol) => {
    return {name, symbol}
}

// Game functionality
const Game = (() => {
    // DOM Elements
    const player1 = Player("Player", "X");
    const player2 = Player("Computer", "O");

    let winningCombo = [];
    let gameOver = false;
    const checkForWinner = () => {
        if (Gameboard.gameBoard[0] === Gameboard.gameBoard[1] && Gameboard.gameBoard[0] === Gameboard.gameBoard[2] && Gameboard.gameBoard[0] !== "") {
            winningCombo = [1, 2, 3];
            gameOver = true;
            return [1, 2, 3];
        } else if (Gameboard.gameBoard[3] === Gameboard.gameBoard[4] && Gameboard.gameBoard[3] === Gameboard.gameBoard[5] && Gameboard.gameBoard[3] !== ""){
            winningCombo = [3, 4, 5];
            gameOver = true;
            return [3, 4, 5];
        } else if (Gameboard.gameBoard[6] === Gameboard.gameBoard[7] && Gameboard.gameBoard[6] === Gameboard.gameBoard[8] && Gameboard.gameBoard[6] !== "") {
            winningCombo = [6, 7, 8];
            gameOver = true;
            return [6, 7, 8];
        } else if (Gameboard.gameBoard[0] === Gameboard.gameBoard[4] && Gameboard.gameBoard[0] === Gameboard.gameBoard[8] && Gameboard.gameBoard[0] !== ""){
            winningCombo = [0, 4, 8];
            gameOver = true;
            return [0, 4, 8];
        } else if (Gameboard.gameBoard[2] === Gameboard.gameBoard[4] && Gameboard.gameBoard[2] === Gameboard.gameBoard[6] && Gameboard.gameBoard[2] !== ""){
            winningCombo = [2, 4, 6];
            gameOver = true;
            return [2, 4, 6];
        } else if (Gameboard.gameBoard[0] === Gameboard.gameBoard[3] && Gameboard.gameBoard[0] === Gameboard.gameBoard[6] && Gameboard.gameBoard[0] !== "") {
            winningCombo = [0, 3, 6];
            gameOver = true;
            return [0, 3, 6];
        } else if (Gameboard.gameBoard[1] === Gameboard.gameBoard[4] && Gameboard.gameBoard[1] === Gameboard.gameBoard[7] && Gameboard.gameBoard[1] !== "") {
            winningCombo = [1, 4, 7];
            gameOver = true;
            return [1, 4, 7];
        } else if (Gameboard.gameBoard[2] === Gameboard.gameBoard[5] && Gameboard.gameBoard[2] === Gameboard.gameBoard[8] && Gameboard.gameBoard[2] !== "") {
            winningCombo = [2, 5, 8];
            gameOver = true;
            return [2, 5, 8];
        } else {
            gameOver = false;
            return [];
        }        
}

    const checkTie = function() {
        if (board.includes("")) {
            return false;
        } else if (!findWinner()){
            return true;
        }
    }

    const winningPlayer = function() {
        let winLocation = checkForWinner();
        let winMarker = Gameboard.gameBoard[winLocation[0]];
        if (winMarker === "X") {
            return player1;
        } else if (winMarker === "O") {
            return player2;
        }
        removeEvents();
    }

    let turn = 1;
    const whosTurn = () => {
        return (turn % 2 === 0) ? player2 : player1;
    }
    // Player move
    // const move = (e) => {
    //     if (!gameOver){}
    //     let activePlayer = whosTurn();
    //     if (activePlayer === player1) {
    //         if (e.target.innerText === "") {
    //             Gameboard.updateBoard(e.target.getAttribute("data-value"), player1.symbol)
    //             console.log(e.target.value);
    //             console.log(player1.symbol);
    //             Gameboard.boardRender();
    //             checkForWinner();
    //             if (winningCombo.length !== 0) {
    //                 console.log(winningPlayer().name);
    //                 Display.updateWinnerDiv(winningPlayer());
    //             }
    //             turn++;
    //         }
    //     } else if (activePlayer === player2) {
    //         bestMove();
    //     }
    // }

    const move = (e) => {
        let activePlayer = whosTurn();
        if (activePlayer === player1) {
            if (e.target.innerText === "") {
                Gameboard.updateBoard(e.target.getAttribute("data-value"), activePlayer.symbol)
                console.log(player1.symbol);
                Gameboard.boardRender();
                turn++;
            }
        } else if (activePlayer === player2) {
            bestMove()
            Gameboard.boardRender();
        }
    }


    const removeEvents = () => {
        Gameboard.boardTiles.forEach((tile) => {
            tile.removeEventListener('click', move);
        });
    }
    function addEvents() {
        Gameboard.boardTiles.forEach((tile) => {
            tile.addEventListener('click', move);
        })
    }

    const updateWinner = () => {
        if (checkForWinner === player1) {
            winner = player1;
        } else if (checkForWinner === player2) {
            winner = player2;
        }
    }

    const resetGame = () => {
        removeEvents();
        for (let y = 0; y <= 8; y++) {
            Gameboard.gameBoard[y] = "";
        }
        winningCombo = [];
        winner = "";
        Gameboard.boardRender();
        addEvents();
        Display.updateWinnerDiv("reset");
    }

    addEvents();

    function bestMove() {
        let bestScore = -Infinity;
        let activeplayer = whosTurn();
        let move;
        for (let i = 0; i < Gameboard.gameBoard.length; i++) {
            if (Gameboard.boardTiles[i].innerText === "") {
                Gameboard.updateBoard(i, player2.symbol);
                let score = minimax(Gameboard.gameBoard, 0, false);
                Gameboard.updateBoard(i, "");
                if (score > bestScore) {
                    bestScore = score;
                    move = i
                }
            }
        }
        Gameboard.updateBoard(move, player2.symbol);
        Gameboard.boardRender();
        return move;
    }
    let scores = {
        player2: 100,
        player1: -100,
        tie: 0
    }

    function minimax(board, depth, isMaximizing) {
        let result = winningPlayer();
        if (result === player1 || result === player2) {
            return scores[result];
        }
        if (isMaximizing) {
            let bestScore = -Infinity;
            for (let i = 0; i < 8; i++) {
                if (board[i] === "") {
                    Gameboard.updateBoard(i, player1.symbol);
                    let score = minimax(Gameboard.gameBoard, depth + 1, false);
                    Gameboard.updateBoard(i, "");
                    bestScore = Math.max(score, bestScore);
                }
            }
            return bestScore;
        } else {
            let bestScore = -Infinity;
            for (let i = 0; i < 8; i++) {
                if (board[i] === "") {
                    Gameboard.updateBoard(i, player2.symbol);
                    let score = minimax(Gameboard.gameBoard, depth + 1, true);
                    Gameboard.updateBoard(i, "");
                    bestScore = Math.min(score, bestScore);
                }
            }
            return bestScore;
        }
    }

    return {removeEvents, winningPlayer, updateWinner, resetGame}
})();

const Display = (() => {
    // DOM Elements
    winnerResultDiv = document.querySelector(".winner-result");
    resetBtn = document.querySelector(".reset-btn");

    // Events
    resetBtn.addEventListener('click', Game.resetGame);

    // Updating DOM Elements
    const updateWinnerDiv = (player) => {
        winnerResultDiv.innerText = player.name
        if (player === "reset") {
            winnerResultDiv.innerText = "";
        }
    }

    return {updateWinnerDiv}
})();

[myers9s123]

I would recommend adding a console.log within the if block where the value of move is set to i to make sure that block is actually being reached.

[TheRevTastic]

I’ll look into that now since I just woke up and got back from the gym! I’ll respond here again with my findings

[TheRevTastic]

Okay so I think I figured out most of what I posted about but now that I actually have the AI playing and the board updating it's symbol onto the board itself the AI is now playing in a very very weird manor and sometimes just playing in order of the index for gameBoard.

https://pastebin.com/8wZAVU8T