Learning to Vibe-Code Pt 1 (Tic Tac Toe)

What do you do when you have to learn something when you don’t feel like it. You pick something fun to learn it with.

Computer games has always been the draw for me, and that light at the end of the monitor screen has led me down the software engineering path many years ago. I can’t see how it wouldn’t do the same for bringing me through this new challenge once again.

WarGames

In 1983, Hollywood released a sci-fi movie called WarGames. In the movie, a young Matthew Broderick plays a student called David Lightman who hacked into the national missile defense computer and made it look as if the enemy is about to attack.

In order to combat the threat, the defense people descided to automate the missile launch. In a series of wargames, the automated systems somehow got hold of the actual missile launch codes. In order to deactivate the automated system, David Lightman came up with a ploy that made the computer play Tic-Tac-Toe over and over untill it was decided that there can be no winner, only losers in a nuclear war.

The movie captivated me with advanced (at that time) themes of Network Computing, AI and hackers. It also gave me a new perspective of the simple Tic-Tac-Toe from a simple game for children to a simulation of nuclear war.

My Frist Vibe-Coded Software (Game)

So without a lot of thought, I decided to make a simple Tic-Tac-Toe game with the AI I had which happened to be Claude. Instinctively, I started thinking about setting up React, and considered a few ways I could render the graphical part of the gameboard and pieces. I could see in my minds eye how some of the code will look like, but then I realise I do not know how to communicate that to the AI? All I see in front of me is a chatbot, waiting for my instruction, or prompt.

Not knowing what else to do, I typed the following instruction into the chat box: Make me a Tic-Tac-Toe game

Claude paused for a short few seconds and started spewing out a bunch of javascript and html code. Within a minute or two, a side panel appeared and a Tic-Tac-Toe, fully playable, appeared on my browser. There was also an option to download a zip file containing the game code to install on a server.

I played Tic-Tac-Toe with the computer for a few minutes and drew all the games except for one that I lost on purpose. I got an idea to make a simpler mode so the player can actually win a game or two. I typed in the chat box: Can you make a few difficulty levels?

Again, Claude started spewing out javascript and html after a short pause and a new Tic-Tac-Toe game, now with the option to select difficulty levels appeared in the side panel.

Getting the hang of it, I started adding features such as a scoreboard, and the option to go first or second, and finalized on the version that you can play below:

Tic-Tac-Toe

Your move — you're X
You (X)
0
Draws
0
CPU (O)
0

An interesting first attempt

To be honest, I was pretty impressed with the game that was vibe-coded with just a few prompts.  For a simple and common program like this, detailed instructions were hardly needed, and coding felt like making an order at a restaurant, hoping that what appears meets your standards. But what about more complex software? Will the AI be able to execute code as intuitively?

In any case, this first experiment have shown that AI can code simple games and probably calculator-like web apps that run in your browser. News of people creating complex games like Minecraft with the latest LLM with just one instruction are also being shared on social media, hinting of the path that AI will take with regards to coding in the future.

Have you tried coding up an app with your version of AI? Even if you’re not a programmer, something you thought will take a Skillsfuture course may just be a sentence or two from being made.