connect4/script.js

let board = Array(6).fill().map(() => Array(7).fill(0));
console.log(board);

let turn = 0;

function reset() {
    turn = 0;
    board = Array(6).fill().map(() => Array(7).fill(0));
}

function set(column) {
    if (column >= 0 && column < 7) {
        for (let i=5; i>=0; i+=-1) {
            if (board[i][column] == 0) {
                board[i][column] = turn+1;
                console.log(`Player ${turn+1} placed at (${i}, ${column})`);
                turn ^= 1;
                return i;
            }
        }
        console.log(`Player ${turn+1} could not place, column ${column} full`);
        return false;
    }
}

function render(win) {
    const tableContainer = document.querySelector("#table-container");
    tableContainer.innerHTML = '';
    if (win) {
        const winText = document.createTextNode(`player ${win[0][0]} won. Click on the board to reset the game.`);
        tableContainer.appendChild(winText);
    }
    const table = document.createElement("table");
    for (let i = 0; i < 6; i++) {
        const row = document.createElement("tr");
        for (let j = 0; j < 7; j++) {
            const cell = document.createElement("td");
            if (win && win.some(([_, x, y]) => x === i && y === j)) {
                const player = win.find(([_, x, y]) => x === i && y === j)[0];
                cell.classList.add(`winning${player}`);
            }
            if (board[i][j] === 1) {
                cell.classList.add("player1");
            } else if (board[i][j] === 2) {
                cell.classList.add("player2");
            }
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
    tableContainer.appendChild(table);
}

function playerMove(e) {
    if (turn == -1 || turn == -2) {
        reset()
        render()
    } else {
        column = e.target.cellIndex
        console.log(column)
        set(column)
        result = checkWin();
        if (result) {
            turn = (result[0][0])*-1
        }
        render(result)
    }
}

function checkColumns() {
    for (let j = 0; j < 7; j++) {
        let ctr = 0;
        let winningCells = [];
        for (let i = 0; i < 6; i++) {
            if (board[i][j] != 0 && (board[i][j] === board[i+1]?.[j])) {
                ctr++;
                winningCells.push([board[i][j], i, j]);
            } else {
                ctr = 0;
                winningCells = [];
            }
            if (ctr === 3) {
                winningCells.push([board[i+1][j], i+1, j]);
                return winningCells;
            }
        }
    }
    return null;
}

function checkRows() {
    for (let i = 0; i < 6; i++) {
        let ctr = 0;
        let winningCells = [];
        for (let j = 0; j < 7; j++) {
            if (board[i][j] != 0 && (board[i][j] === board[i][j+1])) {
                ctr++;
                winningCells.push([board[i][j], i, j]);
            } else {
                ctr = 0;
                winningCells = [];
            }
            if (ctr === 3) {
                winningCells.push([board[i][j+1], i, j+1]);
                return winningCells;
            }
        }
    }
    return null;
}

function checkDescendingDiagonals() {
    for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 4; j++) {
            let player = board[i][j];
            if (player !== 0 && player === board[i+1][j+1] && player === board[i+2][j+2] && player === board[i+3][j+3]) {
                return [
                    [player, i, j],
                    [player, i+1, j+1],
                    [player, i+2, j+2],
                    [player, i+3, j+3]
                ];
            }
        }
    }
    return null;
}

function checkAscendingDiagonals() {
    for (let i = 0; i < 3; i++) {
        for (let j = 3; j < 7; j++) {
            let player = board[i][j];
            if (player !== 0 && player === board[i+1][j-1] && player === board[i+2][j-2] && player === board[i+3][j-3]) {
                return [
                    [player, i, j],
                    [player, i+1, j-1],
                    [player, i+2, j-2],
                    [player, i+3, j-3]
                ];
            }
        }
    }
    return null;
}

function checkWin() {
    let winArray = [];

    let columnWin = checkColumns();
    if (columnWin) {
        winArray = winArray.concat(columnWin);
    }

    let rowWin = checkRows();
    if (rowWin) {
        winArray = winArray.concat(rowWin);
    }

    let descendingDiagonalWin = checkDescendingDiagonals();
    if (descendingDiagonalWin) {
        winArray = winArray.concat(descendingDiagonalWin);
    }

    let ascendingDiagonalWin = checkAscendingDiagonals();
    if (ascendingDiagonalWin) {
        winArray = winArray.concat(ascendingDiagonalWin);
    }

    return winArray.length > 0 ? winArray : null;
}

render(null);
document.querySelector("#table-container").addEventListener("click", (e) => playerMove(e))