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))