AI-coding a decent asteroids game

Part 9 of 22 in the Experiments in Vibecoding series.

I’ve been using Claude a lot for almost a year, but had never gotten around to trying the Claude Code version that integrates with Terminal to directly edit files. That sounds scary, and I’d been having luck with just copying/pasting stuff out of Regular Claude via the web interface. Anyway. I decided to try it out.

Anthropic’s instructions say to just run:

npm install -g @anthropic-ai/claude-code

to get started. macOS doesn’t ship with npm, but brew.sh can install npm and all of the Node.js nonsense that’s involved. So, I got to run this first:

brew install npm

It chewed for a few seconds, installed a ridiculous number of dependencies, and then was ready for me to run the Claude Code npm install bit (above). Worked like a charm.

I created a separate directory in ~/temp/claude-test so I didn’t accidentally set Claude free on my entire filesystem. So my terminal session started like this (with the output omitted for clarity):

brew install npm
npm install -g @anthropic-ai/claude-code
mkdir ~/temp/claude-test
cd ~/temp/claude-test
claude

After Claude fired up, it walked me through some initial setup and then gave me a prompt. This was the start of a session that took less than 30 minutes, with 75% of that time being Claude Code building stuff on its own (I’d enabled the automatic mode so it would just do what it needed without waiting for confirmation from me).

In that 30 minutes, the only thing I had to do was give it the initial prompt, some follow-up prompts, and try to play the game. I never opened the HTML or JS files it generated, didn’t edit any code. All I did was open the index.html file in my browser and keep reloading it as needed.

What did I want to try to build? How about a playable version of Asteroids, just to see what it could do? Again. All I did was give Claude a total of 9 prompts, and reload a page in my browser.

Initial prompt:

Build an arcade game like Asteroids - it needs to be fun, inspired by the original game, and easy to play while still being challenging.

Claude chewed on this a bunch, (very) verbosely telling me what it was doing. I’ve saved the chat output, but it’s many many pages of text so I’m not including it here.

It made 2 new files - index.html and game.js. It had decided to build the game as HTML using canvas and javascript. I never suggested how the game should be built, or on what platforms or stacks or whatever. It could have built a native iOS game, for all I knew. It decided on a regular old web game, which was actually exactly what I wanted. The initial game was actually playable, but not quite complete.

amazing. can you add enemy spaceships at higher levels?

More chewing. Automatically editing files and saving them and displaying the diff changes while it worked. I reloaded the browser tab.

amazing! Let’s call it “AISteroids”. The enemy ships should look like UFOs rather than clones of the player’s ship. Is it possible to add sounds?

More crunching. More automated editing and saving. I reloaded the tab and the game was better and had some rudimentary sounds!

AMAZING!!! Is it possible to have the shooting sound be more realistic? And when the player’s ship dies, the next one should appear in a safe spot so it doesn’t immediately get clobbered by appearing in the middle of an asteroid.

Up until this point, all edits worked perfectly, with no errors. Until now. The game wouldn’t start playing. I checked the javascript debugger in Safari and saw an error message.

I get a javascript error of “unexpected token ‘{’” on line 454 of game.js

Lots of apologies and edits later, I reload the tab and get a slightly different error.

I get “Unexpected token ‘{’” on line 455. Is there a bracket out of place somewhere before that point?

More apologies. Lots of edits and auto-saves. I reload the tab, and it works perfectly.

AMAZINGGGGG!!!! Let’s rename it to “AIsteroids”. And the ship needs to have flames coming out the back when under thrust.

I reload the tab when it’s done, and the flames don’t show up for some reason. I figure why not go for a complete remake of the original Asteroids game while we’re at it:

Looks good - but the flames don’t appear? And can we add a Teleport feature, so the player can hit Shift and have the ship jump to a new safe location (using the same process that respawning uses)? A player can only teleport 3 times per life.

LOTS of edits later, and it’s perfect. Gameplay is pretty decent, but it needs a leaderboard. It’s just simple HTML but maybe it can remember scores played on that device/browser.

this is perfect! Can you add a leaderboard that saves high scores? players can enter 3 letters and see their previous high scores?

Done. It’s surprisingly good.

Anyway. I’ll leave the game online on my sandbox website.

AIsteroids main screen

AIsteroids game screen