Skip to content

A8 - Two Dimensional Arrays

Run the update, and check out the "Connect Four" style program that has been provided to you.

This uses a two dimensional array, which in reality is an array of arrays. These are very useful for storing grid data, and we use nested loops to access all their data.

Take some time to examine the code to get a feel for how it works with the board 2D array.

Your Task

Make the following updates:

  1. Make the grid 8x8. In addition to expanding the 2D array itself, you'll need to make some adjustments to where it is rendered within the draw() funciton.

  2. The grid looks a little awkward right at the top-left corner of the window. Move it to the right by 50 pixels and down by 50 pixels. Once again, you'll need to make changes in multiple places. As an added touch, consider drawing a rectangular border around your game board.

  3. You might notice a player currently is allowed to overwrite another player's token. Add logic so that a player can only place a token in an empty spot.

  4. Add text somewhere indicating whose turn it currently is. Use the p5js text function.

  5. Check to see if a player has one with either a horizontal or vertical row of four tokens, and dispaly some sort of message if a win is detected.

Possible Extensions

  • Checking for diagonal wins

  • Making this closer to real Connect Four where a player chooses just the column and the token occupies the lowest available row.