VB.NET Connect Four

Play the game by downloading and unzipping this file.

The Setup

The connect four board is an empty FlowLayoutPanel that has forty two customized PictureBoxes inserted into it. These PictureBoxes are also placed into a 7 x 6 two dimensional array, which is later used to control and access the picture boxes via x and y coordinates.

The Implementation

Where a chip would be dropped was determined by a variable called “hoveredcell”. Every time the user’s mouse entered a PictureBox cell, the MouseEnter event handler would run. Inside this event handler, the “hoveredcell” variable was updated to the lowest empty space (PictureBox) in the same column of the entered cell. The “hoveredcell” PictureBox’s Image was then changed to a transparent chip, showing the user where their chip will be placed if they click. When the user clicks, the chip is placed.

Detecting Wins

To detect wins, the program checks all possible four-in-a-row combinations of chips. This includes horizontal, vertical, and diagonal rows of four chips. This is done by iterating through every cell on the board and checking all the combinations that can be made with that cell as the starting point.

The game over screen

Originally I had planned on using a panel that was attached to the main form as the game over/win screen. But instead, I used another form as the win screen with the .Show method. I did this because I thought the panel was taking away from the neatness and aesthetic of the program. In the end I think I made the right decision.

Areas that gave me grief

There was one challenging thing I had to really think about, which the board’s grid generation. What I had in mind when I first started coding the grid generation was using two nested for loops, generating a new PictureBox for each loop, and then adding it to the 2-D board array at the index of the loop variables and then adding it to the FlowLayoutPanel. And that’s basically what I did, but it was much more complicated than that. When I ran the program, the cells were all jumbled up in a seemingly random order. I figured It had something to do with the flow direction of the FlowLayoutPanel, so I changed that property to LeftToRight. That almost solved the problem, but now the whole board was flipped and rotated (cell with coordinates 0,0 were at the top right when they should’ve been in the bottom left). I had no clue what the heck was going on and I just kept on changing properties and random stuff until it worked. In the end, all I had to do was to change one of the For loops to loop backwards, so it would start at 5 and go down to 0. It probably took a lot longer than it should have for me to figure that out.

One issue I couldn’t figure out (and neither could Mr. Klins) was a weird bug with the win dialog box. After a user places a winning piece on the board, there’s a popup (dialog box) telling the players which player won. For some WEIRD reason, when the pop up popped up, it would change the image of the winning cell back to the default cell image. Me and Mr. Klins couldn’t figure out why this was happening so I had to come up with a way to work around it. So, instead of using a dialog box popup, I made a custom form which would be used to mimic a dialog box. Now when a player won, the program would use the .Show method on the custom dialog box form, and it would pop up. However, this still did not have the same functionality as a dialog box. Usually when a dialog box pops up, it disables all interaction with the main form and plays a sound if the user tries to interact with it. To recreate this, I created a global boolean variable called “freezeboard” that when set to true, would disable all input with the main form, besides the playing of the system beep sound whenever something is interacted with. In the end, this weird bug was actually beneficial to the program, because it gave me the idea of using a custom form for the dialog box, which allowed for even further customization of my program.