connect-four.html

<head>
<style>
td { width: 30px; height: 30px; background: #eee;}
table button { background: lightblue; width: 30px; height: 30px; }

div {width: 30px; height: 30px; border-radius: 50%;}
.red { background: red;}
.black { background: black; }
</style>
<body>

<p id="msg">Red: It is your turn</p>

<table>
  <tr>
    <th><button data-col=0></button>
    <th><button data-col=1></button>
    <th><button data-col=2></button>
    <th><button data-col=3></button>
    <th><button data-col=4></button>
      <tbody id="board">
      <tr>  <td><div></div> <td><div></div> <td><div></div> <td><div></div> <td><div></div> 
      <tr>  <td><div></div> <td><div></div> <td><div></div> <td><div></div> <td><div></div> 
      <tr>  <td><div></div> <td><div></div> <td><div></div> <td><div></div> <td><div></div> 
      <tr>  <td><div></div> <td><div></div> <td><div></div> <td><div></div> <td><div></div> 
   <tr><td><div></div> <td><div></div> <td><div></div> <td><div></div> <td><div></div> 
</table>
   
     <p id="msg">To place a piece, click one of the buttons at the top of the board.</p>
   
     <button id="start_over">Start over</button>
     
     
<script>
let currentPlayer = 'red';
let msg = document.getElementById('msg');
let board = [
  ['', '', '', '', ''],
  ['', '', '', '', ''],
  ['', '', '', '', ''],
  ['', '', '', '', ''],
  ['', '', '', '', ''],
];
let falling = false;

function switchPlayer() {
  currentPlayer = (currentPlayer == 'red') ? 'black' : 'red';
  msg.innerText = currentPlayer + ': It is your turn';
}

function render() {
  let tbody = document.querySelector('#board');
  for (let row=0; row<5; row++)
    for (let col=0; col<5; col++)
      tbody.children[row].children[col].children[0].className = board[row][col];
}

function addPiece(col, color) {
 if (board[0][col]) return 'Blocked';
 board[0][col] = color;
 render();
 falling = true;
}

document.querySelectorAll('table button').forEach(b => b.addEventListener('click', (e) => {
  let col = e.target.dataset['col'];
  addPiece(col, currentPlayer);
  switchPlayer();
}));


function gravity() {
  falling = false;
  for (let row=4; row>=1; row--)
    for (let col=4; col>=0; col--) {
      if (board[row][col] == '' &&
          board[row-1][col] != '') {
        board[row][col] = board[row-1][col];
        board[row-1][col] = '';
        falling = true;
      }
    }
  if (falling) render();
}

function check4(r, c, dr, dc) {
  if (board[r][c] == '') return;
  let color = board[r][c];
    if (board[r + 1 * dr][c + 1 * dc] == color &&
        board[r + 2 * dr][c + 2 * dc] == color &&
        board[r + 3 * dr][c + 3 * dc] == color) {
      msg.innerText = color + ' has won!'
    }
}

function checkWinner() {
  if (falling) return;
  for (let r=0; r<5; r++) {
    check4(r, 0, 0, 1);
    check4(r, 1, 0, 1);
  }
  for (let c=0; c<5; c++) {
    check4(0, c, 1, 0);
    check4(1, c, 1, 0);
  }  
  for (let r=0; r<2; r++) {
    check4(r, 0, 1, 1);
    check4(r, 1, 1, 1);
  }
  for (let r=3; r<5; r++) {
    check4(r, 0, -1, 1);
    check4(r, 1, -1, 1);
  }
}

function gameloop() {
  gravity();
  checkWinner();
}

setInterval(gameloop, 1000);

document.getElementById('start_over').addEventListener('click', (e) => {
  switchPlayer();
  for (let i = 0; i < 6; i++) {
    setTimeout(() => {
      board[4] = ['', '', '', '', ''];
    gravity(); render();},
                500 * i);
  }
});
</script>
</body?