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()
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 consists of:
- 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!)
See the Pen Connect4 Challenge by 101 Computing (@101Computing) on CodePen.