Learning to Vibe-Code Pt 2 (Connect 4)

After Tic Tac Toe, I asked around for the next game to vibe-code, and Connect 4 came up almost unanimously. 

I tried to recall the last time I played Connect 4, and it was at McDonalds with my 3-year old son. A mini Connect 4  was the free toy of the week that came with the Happy Meal. The next memory of Connect 4 was a year later playing a full-sized version I bought with a 4-year old. Unlike Tic Tac Toe where all you need is paper and pen, Connect 4 required a vertical 6 by 7 game board thingy, and lots of tokens (that you can lose).

Milton Bradley (now part of Hasbro) must have made lots of money selling the game to families multiple times since 1974. Perhaps it make sense to build a computer version of it…

Going First Always Win

Doing a little research on the game, I learnt that in Connect 4, the first player can always force a win, but only if they start in the center column (column 4). If Player 1 opens anywhere else, Player 2 can force at least a draw, and in some cases even win.

This “tip” isn’t based just on hearsay, but two people independently proved this in 1988:

  • James Dow Allen, working it out largely through hand analysis and pattern rules
  • Victor Allis, in his master’s thesis, using an exhaustive computer search combined with clever pruning rules (his “Victory” solver)


“Solved” here means: with perfect play by both sides, the outcome of the game is known in advance from the very first move, regardless of what the opponent does.

My Frist Vibe-Debugging Experience

So with the experience from my vibe-coded Tic Tact Toe, I opened up Claude and typed: Make me a Connect 4 game

Again, Claude paused for a short few seconds and started spewing out a bunch of code and within a few minutes, Connect 4 showed up on my browser. This time though, it wasn’t perfect. This time it was actually broken, and there was a javascript error being reported.

Here’s a little tip I learnt from a friend, that you can tell AI any problems you see in your vibe-coded program, and it can try to fix it for you. Why it didn’t not make the error happen, is part of how these LLM works. I copy and pasted the error message intot he chat, and Claude starting thinking, and within seconds gave a reason for the error, and started fixing the game. WIthin another minute, a new version of Connect 4 refreshed in my browser, error free.

Wow, Honestly that blew my mind as a programmer. Imagine the time spent debugging a javascript error like that by myself.

Trying out the game, I discovered other errors (with no error message) so I told Claude about it as best as I can, and it also corrected them. The result after about 20 minutes, is the Connect 4 game below:

CONNECT FOUR

Skyline Drop
PLAYER ONE
0
PLAYER TWO
0
PLAYER ONE'S TURN
CONNECT FOUR
Click / tap a column, or use ← → and Enter/Space
Drop discs to connect four in a row — across, up-down, or diagonal
Choose 2 Player or Vs CPU above
— PRESS ANY KEY —

What did I learn?

If I’d learnt anything from this 2nd attempt at vibe-coding, its that AI isn’t perfect, yet? It is very “intelligent” but in a one-tracked kinda way. With apologies to my friends who are on the spectrum, AI feels a bit like the autistic Raymond in the 1988 movie Rain Man. It can do wonderful things at super speed, but stumble at some simple ones that we just take for granted.

Nevertheless, the usefulness of using AI in programming is becoming apparent. There are things we programmers hate the most and that’s catching bugs and the subsequent work of fixing them. If there’s any tool that can help reduce the time spent on that alone, it’s a tool worthy of consideration, at least. 

Have you tried asking AI to debug an application? I’m not saying it works all the time, but the time savings is real.