Day 1 with Claude: Local Pong

I tried to see how far a non-technical user could get with Claude Haiku to make a simple game and put it on the web. Interesting results!

A friend recommended I step away from RAG for a moment to see how far someone non-technical can get with GenAI out-of-the-box. He recommended Claude. My goal (and also my prompt):

i want your help to make a game of Pong that I can share via a URL. Let's start with a simple one for desktop web. One player should be human, and be able to control the paddle. The other player should be the computer and should be just OK at the game, so the human can win sometimes, but I would like to adjust difficulty. The game should keep count of the score. First to 3 points wins.

How did Claude do?

tl;dr:

1. Although this is a simple prompt, and there must be thousands of Pong games in the training data, it didn’t one-shot it. It did get pretty close though.

2. The same issues that bedevil non-technical people: compatibility, versioning, setup, continue to be a problem with GenAI, even though the AI can try and help you debug. It may be better to specify a platform like Replit that takes care of more of that for you.

3. I got further, faster, than I would have alone.

Details

Claude responded:

I'll help you create a React-based Pong game that meets your requirements. I'll use React with some basic game mechanics and styling.
... 
[lots of code] 
... 
[summary of what it created] 
... 
To use this game, you would need to: 
1. Set up a new React project 
2. Install Tailwind CSS (for styling) 
3. Create this component in your project 
4. Render the PongGame component 

Would you like me to elaborate on how to set up the project or explain any part of the game implementation?  

You can see the game above. It worked pretty well, rendering in the Claude webview. The difficulty setting seemed to work, but the collisions (and by extension scoring) wasn’t quite right. Easy enough to fix.

Next prompt from me:

I've never used React before. Walk me through how I can get this running via a URL on the desktop web. We can start with a local machine and then figure out how to host it for remote browsers.

It responded

I'll walk you through the process step by step. We'll use Create React App to set up the project, which makes it easy to get started.

1. Prerequisites: You'll need to have Node.js installed on your computer. If you don't have it:

   1. Go to https://nodejs.org/

   2. Download the LTS (Long Term Support) version

   3. Install it by following the installation wizard

2. Create a New React Project: Open your terminal/command prompt and run:

npx create-react-app pong-game

cd pong-game

This worked and I got React to work, but though the installation it threw up a bunch of errors that seemed serious, but I ignored.

Also, my computer wanted me to get python3. I started on that sidequest, but couldn’t wait 4 hours, so continued anyway. Not sure if it’s done.

The main console suggested I keep going, which I did

I got something running on localhost (progress) but it wasn’t what I wanted.

Looking through the instructions, the issue was I neglected to actually copy and paste the code in (doh!) so I could either use TextEdit or get VSCode. I got VSCode. Claude was very helpful in supporting me through this btw. which hints at their potential value in distribution.

First there was SEO. Now there is ADO (Agent Decision Optimization) ie. how do you get an agent to recommend you?

It wanted me to install tailwind, but this totally failed and neither Claude nor I could figure out how to fix it. In the end I gave up.

I could understand enough of the errors to locate the calls to tailwind and just strip them out. I ended up with a web version of the game (on localhost) that didn’t have the styling, and somehow lost the ability to score correctly and stop the game.

But it kind of works.

Next steps:

1. Get it into a public URL

2. Debug it so it works as it should

3. See if Claude can step me through what I did so I understand it

4. BONUS: Dig deeper into the Atari back catalog to see how it does with content that’s less common in training data.