Javascript Question posted in
A very good W3school tutorial can be found here.

How to check for tic tac toe win through iterating comparison to nested array of winning combinations in Javascript?

I am attempting to create an in-browser tic-tac-toe game. I am stuck on checking for win conditions. The game board is a flat array of 9 empty strings which are replaced with ‘X’ or ‘O’ when a move is played. There shouldn’t be any errors here but i’ll include the code for it just in case.

const gameBoard = (function() {
    const board = [];
    for (let i = 0; i < 9; i++) {
        board.push("");
    }

    const setBoardSpace = (i, sign) => {
        board[i] = sign;
        return board;
    }
      
    const getBoardSpace = (i) => {
        return board[i];
    }

    const clearBoard = () => {
        for (let i = 0; i < 9; i++) {
            board[i] = "";
        }
    }

    return {setBoardSpace, getBoardSpace, clearBoard};
})();

I want to check for a winning move through comparing the board array to a nested array of all possible winning combinations. I’ve used two pointers to loop through the winCombos array. The part that has me stumped is how to use the right syntax to execute what I have laid out in pseudo code.

    const checkWin = () => {
        const winCombos = [
            [0,1,2],
            [3,4,5],
            [6,7,8],
            [0,3,6],
            [1,4,7],
            [2,5,8],
            [0,4,8],
            [2,4,6]
        ];

        const checkSameSign = () => {
            for (let i = 0; i < winCombos.length; i++) {
                for (let j = 0; j < winCombos[i].length; j++) {
                    console.log(gameBoard.getBoardSpace(winCombos[i][j]));
                    //if every element of a sub array is equal
                        //return win
                }
            }
        }
        return checkSameSign();
    }

I tried logging the value of the board indices after inputting some ‘X’ and ‘O’ strings into the board array: console.log(gameBoard.getBoardSpace(winCombos[i][j])); The result shows me that I am properly iterating through the winCombos array but I’m not sure how to move forward.

My current thought process is to output a new nested array containing the board array values at the winCombo indices and if one of them contains [‘X’,’X’,’X’] or [‘O’,’O’,’O’] then return a win. Can someone let me know how to accomplish that if this is a good way to go about it or point me in the right direction if my indented solution is inefficient or incorrect.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to trincot for his answer and explanation. I didn't use his code because I wasn't familiar with those array functions but his explanation helped me move forward. Here's what I ended up going with.

    const checkWin = () => {
    const winCombos = [
        [0,1,2],
        [3,4,5],
        [6,7,8],
        [0,3,6],
        [1,4,7],
        [2,5,8],
        [0,4,8],
        [2,4,6]
    ];

    const checkSameSign = () => {
        for (let i = 0; i < winCombos.length; i++) {
            const combo = winCombos[i];
            const values = combo.map(index => gameBoard.getBoardSpace(index));
    
            if (values.every(value => value === 'X')) {
                return 'X wins!';
            } else if (values.every(value => value === 'O')) {
                return 'O wins!';
            }
        }
    
        return null;
    }
    return checkSameSign();
}

  2. 0

    Make use of Array functions to get the string representation of each potential win, and check whether it is "XXX" or "OOO". Return a boolean (false/true):

           const checkSameSign = () =>
            winCombos.some(winCombo =>
                ["XXX", "OOO"].includes(
                    winCombo.map(cell => gameBoard.getBoardSpace(cell))
                            .join("")
                )
            );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search