Connect4 Challenge

connect4In 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.

2-dimensional array

Your Task


Your task consists of:

  • 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.

Did you like this challenge?

Click on a star to rate it!

Average rating 4.2 / 5. Vote count: 5

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!

Tagged with: , , , , ,