Connect4 Challenge

In this blog post you will use HTML, CSS, and JavaScript to complete this game of connect 4 for two players. (Rules of the game)

You will first need to reverse-engineer the code provided. The code so far is used to:

• Display the 6×7 grid using HTML and CSS.
• Add a token on the bottom row of the grid when the user clicks on a column of the grid using the selectColumn()
  function in JavaScript.
• Refresh the grid on the screen using the refreshGrid() function in JavaScript.

The code provided uses a variable called grid, use to store a two-dimensional array (6×7) of integer values. Within this array, a 0 represents an empty place, a 1 represents a yellow token and a 2 represents a red token.

Your Task

• Amend the selectColumn() function in JavaScript in order to:
  • Check if the column is not already full and if it is ask the user to chose another column.
  • Place the token on top of any existing token in the selected column.
  • Check if after placing the token the game continues or if the player has aligned 4 tokens. (Current player wins!)
  • Check if the grid is full (Game ends on a draw!)
• Add code to the resetGrid() JavaScript function to start a new game with an empty grid.

HTML, CSS and JavaScript Code

See the Pen Connect4 Challenge by 101 Computing (@101Computing) on CodePen.