Using Free Claude.ai chat interface to Vibe Code a Browser Javascript Game

TLDR; Can we use the free version of claude.ai with chat prompts to vibe code a browser based game? Yes, so long as we keep the game small. Oh, and you better save your artifacts because claude might lose your conversation details.

Vibe Coding With Claude

This video shows how I used Claude.ai to Vibe code a game:

Watch on YouTube

Vibing

I’ve successfully used Code augmentation tools like co-pilot, and locally with continue.dev paired with ollama and CodeLlama.

I never really felt comfortable with Vibing the code though.

In a professional setting, we work as a team and ‘Vibing’ is very much a solo pursuit. Also, since I can code, and I care about the quality, the automated execution coverage, the design, etc. etc. Why would I delegate that to AI Tooling?

But… I don’t have time to write games, so if the AI Tooling can help me do that with minimal effort that might be fun.

I don’t really care about the code coverage or maintenance. I don’t want to spend long on it. I just want something in my head, out and playable in the browser.

The Experiment confirmed to me that:

the AI Tools are good at generating code, but less good a fixing code.
the AI Tools do not check their own work. “Hey I added the game over screen!” “errr, No, you did not”
do not trust the AI output explanations, only trust the generated output.
we need Humans in the loop to recover quickly from errors.

Artifacts

I have a tendency to make lots of notes - a beneficial side-effect of working as a Consultant and performing lots of Exploratory Testing.

So I kept a log of my prompts, the results, and released it to Github.

github.com/eviltester/ai-supported-testing-experiments/tree/main/claude.ai/tanks-game

And it was a good thing I did because the conversation records of the Claude.ai chat interface are corrupt and missing information.

I spread the coding over six chat sessions:

On the free plan, I had to split the coding across multiple chat sessions:

Chat 1 - https://claude.ai/share/77ad5213-83b6-43f0-8295-c401598caee6
Chat 2 - https://claude.ai/share/c7855cff-59a9-4b2a-9109-4bfb89f46ee5
Chat 3 - https://claude.ai/share/01b0e3ae-e07a-42fa-ae85-f99c83e00b27
chat 4 - https://claude.ai/share/5516b6a4-9b5d-4abb-a42d-a9b48c82d468
chat 5 - https://claude.ai/share/42e2ed0f-b23a-4805-a85c-de6761ba7955
chat 6 - https://claude.ai/share/39c6bbdb-8469-4f42-96bd-cb30d59e55da

Chat 3, 4, and 5 are missing all the artifacts and most of the conversation. Chat 6 is incomplete, I think that possibly the code base is too large for the model context window, or the output of the code is too large for the messaging interface.

In order to continue Vibe coding the game with Claude I would have to upgrade to the paid plan.

The final version of the game generated by AI can be played here:

Version 503 of Angry Tank Arena

Download the game source here:

github.com/eviltester/ai-supported-testing-experiments/tree/main/claude.ai/tanks-game/503

Al the iterations of the game are available in the github repo.

I found some online Diff tools useful for comparing the different versions to see the changes made in the source. It is not possible to see a diff in the chat artifacts view on Claude.ai:

If you want to compare the generated code then you can use the raw urls e.g. https://raw.githubusercontent.com/eviltester/ai-supported-testing-experiments/refs/heads/main/claude.ai/tanks-game/010/tank_game.html

Experiment

I approached this as an Experiment with a few simple aims:

Try to create a browser based game written in plain JavaScript
No game frameworks used
- Because I know the basics of how to write simple JavaScript games so I can fix the code if needed
Create in small chunks rather than large prompts. Each prompt should result in a working game. To build incrementally and recover from errors.
- this is also how I would work if I was a human
- this also means that if the process fails I will still have a working game up to the point that it fails
Test the output after every iteration

Learning

There are limits to the message size in the chat interface which interferes with code generation as the code becomes larger.
There are limits on conversation size so I had to create new chat sessions and export the code from one session, then attach it to a new converstion. The AI Tooling didn’t seem to have issues picking up again from scratch, so all the context it needs is in the prompt and the code.
It is possible to create simple games through the chat interface. But they eventually get too large for this interface to handle.
The AI tooling does not spot when it has messed up. A non-working, non-rendering output is still reported as being ‘done’.
Some fixes which would be simple for a human take a long time for the AI Tooling and I was doubtful at times that it would fix them.
It is very hard to review code in the chat interface because there is no in-built diff.
The AI Tooling generates ‘more’ than you ask for, and creates a very visually polished output, which suggests the training is on ‘finished’ stuff rather than ’the steps in the middle, that lead to finished stuff’.
Save your work to disk regularly, because I found that some of my chats were empty and it lost the generated code.

Results

Pros

I did get a game out
It was fun to create this way until an error happened
It was fun to create this way until the game became too large

Cons

Every so often the game would be broken - often after adding a new ‘screen’ (intro screen, end screen). This is probably because the code wasn’t structured to handle this easily and the AI Tooling got lost during the process. Repeat prompting did fix this.
More ‘versions’ were required to create simple features than I would have expected. I suspect the code is ‘rewritten’ rather than amended, which would also consume more tokens.
As the game code got larger the tooling was more flakey. The output was no longer an HTML game and was completely broken. I think this is due to the message limits on the chat interface.
creating a new conversation and importing the code was a pain.
Eventually the chat process just failed completely.
The chat history can be lost. When I went back and reviewed some of the listed chats, they are incomplete, some of the versions are lost. Fortunately I was saving them to disk after each iteration. But if I hadn’t then the code would be lost. The code for verion 503 which is the last I could create through the chat interface is not available to me in the chat interface.

Follow on Experiments

would need to upgrade to the paid plan and see if that improves the chat experience
with the paid plan gain access to the CLI and see if that makes it possible to go further
try other code generation tools and compare
it might have generated less code if I had used a game framework, perhaps I could get further into the game creation by building on a framework or game library?

Vibe Coding pros and cons

If it goes wrong, and you don’t know how to fix it, you might be completely stuck.
The AI Tooling often took a long time to get unstuck.
You end up not reading the code, and not really reading the output, because you want to get on to the ’next’ thing.
This is not a team sport, particularly in the chat interface, this is one person building it.
There are no tests.
Given that it says it is ‘done’ when it clearly isn’t, should I trust any of the text output?
It’s fun until it goes wrong.

Conclusion

I was actually impressed by claude.ai. The code generated seemed good enough. It was faster to create the game using Claude than if I had coded it myself.

I was able to fix errors if claude made them, and perhaps I should have done to speed up some of the sessions, but I wanted to Vibe my way through and gain some insight into the process of delegating fully to AI Tooling rather than using it as an augmentation mechanism.

I’m tempted to upgrade to the pro plan and see how far I get.

I was disappointed that the Chat conversations are lost. This might be because I was pushing it to the limit, but I don’t expect end user facing basic functionality like that to be broken. Fortunately I have learned to keep lots of notes and save intermediate results. Other people using the chat interface might not be so lucky. Someone needs to creat a Chrome plugin to extract Chat interface conversations into a markdown, readable and persistable format.

Vibe coding is fun when it works, and incredibly frustrating when it doesn’t. It isn’t like normal coding where, if you have an issue you battle through it. Instead you are sitting trying to coax a result out of a tool and not knowing if it is making progress, or just repeating the same issue again and again.