Creating an online game with V0 by Vercel – Grabby Aliens
Iterations 1-10
There are a lot of misconceptions about AI as it applies to software development and, I suspect, most other industries. While it is worrying to see a sudden sharp decline in developer jobs, I believe AI will ultimately be a good thing. I wish we had a better transition path to get us from here to there, but that’s a separate discussion. My goal with this post is to show how much AI relies on human input to create something meaningful. It’s a collaborative process that requires creativity and thoughtful input on the human side combined with AI magic on the computer side.
We’re going to create a single-player game that I’m currently calling “Grabby Aliens”. It is loosely based on the Grabby Aliens hypothesis that “Loud” alien races should be rapidly expanding their spheres of influence as they eat up space in the universe. Your goal as a grabby alien federation is to colonize a quadrant of space as quickly as possible. I’ll share my chat input and V0’s output for each iteration.
Iteration #1
We’re starting with a blank canvas. V0 prefers creating a React app with Tailwind for styling, which works well for me. So, let’s use the defaults and dive right in.
Chat Input
Let's build a strategic single-player board game you play as an alien federation colonizing a quadrant of space.
Let's start with a 50x50 grid and 3 ships. Each uncolonized grid square is white. When a grid becomes colonized, it turns green.
Setup:
Each ship starts on a random square.
All grid squares are uncolonized (white).
The player starts with 10 "movement".
Gameplay:
Each turn, the player can select a ship and move it a number of squares equal to the remaining movement. Once they move the ship, their remaining available movement is updated.
When the player is done moving ships, they can press a "Colonize" button. Every ship will colonize all adjacent squares that weren't previously colonized. Then the movement is reset and the next turn starts.
When all squares are colonized, the game is over. The player sees an end-game screen that congratulates the player and displays the number of turns it took to colonize the quadrant.
V0 Output
This might not seem crazy. The game is clunky and not yet playable. But V0 understood the input and created a fantastic first iteration. We can work with this.
Iteration #2
There are a lot of potential improvements we can make. I’m not sure how many or how few instructions I should be giving V0 per iteration. I’ll start with 5-10 and see how that works.
Chat Input
Nice! Let's make a few improvements:
Let's rename "Movement" to "Energy". This will make the resource more generalizable and usable for other purposes later.
Instead of clicking on a ship in the nav, I think ship #1 should be selected by default. The player should be able to tab to cycle through ships. Or pressing the number corresponding to the ship should select it.
I think we should disable the ability to click on a grid square to move the ship. Instead, let's have the ship move 1 square at a time using arrow keys. Each movement should consume 1 energy.
When a ship moves into an uncolonized square, immediately colonize it.
It would be nice to show how far a ship can move when selected. Squares within range could have a semi-transparent black overlay.
The white border showing a selected ship is too subtle. Maybe the ship should slowly blink like a cursor.
The quadrant is a little too large. Let's try making it 30x30.
Hitting Enter should trigger the "Colonize & Next Turn" action.
V0 Output
An overall great iteration. V0 understood every request. The blinking ship request is way too subtle, but I don’t expect a design masterpiece out of V0. We’re really just looking for raw functionality. Once we get close to a playable demo, I’ll start manually editing the CSS to improve the design.
Iteration #3
There are a lot of directions we could go from here. Let’s try adding the ability to buy a ship with your energy.
Chat Input
Nice work! Here are a few improvements:
Let's make each square double the width and height of the current squares.
Try making the quadrant 40x20.
For every 20 colonized squares, increase energy by 1.
The map would be more interesting with random spaces that are not colonizable. Let's randomly make 2% of the squares obstacles that ships can't enter and can't be colonized. These squares should be transparent. (instead of white)
The player should be able to spend energy to buy additional ships. Let's try making it 15 energy to buy a ship. The new ship should be placed 1 square above the selected ship. If that would place the new ship off the map, try placing it to the right of the selected ship. If that puts the new ship off the map, then fall back to placing the new ship below the selected ship.
The "Reset Game" button isn't readable. Let's make the text black.
Remove the white border around the game.
V0 Output
Only 3 iterations in and we already have a hint of a playable game. You have to decide if/when to buy an additional ship and you have to be careful not to paint yourself into a corner. It’s a bit of a grind but introducing more things you can do with energy should make the process of “painting the grid” more interesting.
Iteration #4
We should try and make the map more visually interesting and see if we can add more things to do with energy. Maybe upgrading and scrapping ships.
Chat Input
Looking good. Here are a few improvements:
Change the grid size to 30x20.
Make fewer obstacles that are larger clusters of blank squares.
The range hint appears to be broken and only extends 1 square from the ship. It should extend the number of squares the ship could move this turn.
Let's increase the energy bonus to 1 additional energy for every 10 colonized squares.
The player should be able to scrap a ship for a temporary energy boost. Hitting the spacebar should scrap the currently selected ship. The energy for the current turn should go up by 10.
Ships should be upgradable. The cost of upgrading a ship should be 10 multiplied by the current ship level.
When ships colonize at the end of each turn, they should colonize a range equal to the ship level.
V0 Output
Now we’re getting somewhere! I like the new logic for the obstacles. It makes the maps feel a little more organic vs the dotted landscape. I’m not sure about the logic for adding a ship though. Ships are so expensive, and they appear next to an existing ship so it’s questionable how valuable they are. Maybe I should reduce the cost.
Iteration #5
Let’s try to make it feel a little more like a game by improving the visuals and adding sound effects.
Chat Input
Improvements:
It's hard to see what ship is selected based on movement hints. Maybe it would be better to make the existing movement hint lighter in opacity. To make the selected ship more obvious, there could be an innner movement hint that is darker and a max of 2 squares in range.
The map shouldn't scroll horizontally.
Let's try making the cost to buy a new ship 8 energy.
Let's add 4 energy boosts the player can pick up with ships randomly added to a non-obstacle square at the beginning of the game.
Instead of making the ships circles, could we try triangles facing in the direction of the ship's last movement? (up by default)
Is it possible to add a sound effect when moving a ship?
V0 Output
Visually, it looks nicer. I didn’t add a gameplay video because the navigation changes size while playing so the map annoyingly jumps up/down based on the size of the nav. I’m tempted to dive in and make some manual design adjustments. But let's continue to focus on functionality at this stage.
Iteration #6
The still feels a little large. It can be a bit of a grind to clear all 486 squares. Maybe a smaller map and the ability to warp from one edge to the opposite edge will help.
Chat Input
Improvements:
Let's try a 25x15 grid size.
When ships colonize, the radius should be 1 plus the level.
Ships should start every turn moving 1 space forward for free.
Hitting an arrow key should scroll you up/down the page.
Moving a ship onto another ship should cause the ships to merge into 1 ship with the level being the sum of the previous ship levels.
It should be able to warp from the edges of the grid to the opposite edge if it isn't an obstacle.
V0 Output
Maybe this is too small of a map. I think an ideal number of moves required to clear the map should be somewhere in the 30 range. This took 9 moves to clear.
Iteration #7
The binary colonized/uncolonized might be more interesting if we try to implement the Kardashev scale and have type I, II, and III civilizations.
Chat Input
Improvements:
Let's try a 30x20 grid.
The player should start with 2 ships instead of 3.
Instead of a binary colonized/uncolonized status. Let's take inspiration from the Kardashev scale and have type 1, 2, and 3 civilizations. The first time a square is colonized, it becomes a type 1 civilization (light green), the second time, it becomes a type 2 civilization (darker green), the third time it becomes a type 3 civilization (darkest green).
If a type 3 civilization is colonized, it creates war and the civilization is wiped out making the square uncolonized.
Instead of colonizing every square to win, let's have a colonization score. Every type 1 civilization adds 1 point, 2 points for type 2, and 3 points for type 3. To win, you need a score equal to the number of available squares multiplied by 2.
The large movement hint path should be slightly darker.
V0 Output
This was a tricky iteration. Maybe I got a little lazy with the prompt because I’ve been getting great results with somewhat ambiguous instructions. In this case, I had to regenerate 3 times and add extra prompts to get the desired result. It would have taken way longer to write this code manually.
Iteration #8
Having 3 types of civilizations is interesting, but it’s visually too noisy. I think we need to bring it back to the binary colonized/uncolonized mechanic. I do like the war mechanic to wipe out colonies that the player attempts to recolonize.
Chat Input
Improvements:
Let's go back to the binary colonized/uncolonized gameplay. If a ship enters or colonizes an uncolonized square, it flips to colonized.
If an already colonized square is colonized, it triggers a war and flips it back to uncolonized.
Instead of squares, let's call them sectors to use sci-fi terminology.
instead of a Colonization Score, let's call it "Colonized Sectors". To win you need to colonize all sectors.
To start prepping for mobile play, lets add a D-pad to right right of the grid for moving the ship.
Let's go back to starting with 3 ships.
V0 Output
The gameplay feels cleaner. Simpler is often better. As I narrow in on a gameplay style, I’ll do less exploration and more refining.
Iteration #9
Buying and upgrading ships seems like an unnecessary distraction at this stage. Let’s simplify and make it so you only control a set number of ships.
Chat Input
Improvements:
Let's try removing the notion of turns. Instead, the player should have a finite amount of energy to colonize the quadrant. Without energy boosts, the player should start with roughly 75% of the energy needed to colonize the quadrant. Once all the energy powerups are collected, the player should have around 110% of the energy needed. (extra energy is needed for colonies that get wiped out)
If the player runs out of energy before colonizing the quadrant, they should get a game over screen.
Without turns, there is no longer a "Colonize & End Turn" action. Please clean that code up and remove the button.
Let's remove the ability to buy and upgrade ships. Also please clean up the code.
The D-pad buttons should be a little larger with white backgrounds and black text.
V0 Output
This is feeling more puzzle-like. It feels like the right direction for this game. Let’s continue iterating in this direction.
Iteration #10
Switching between ships is clunky. We also need at least 1 additional thing you can do with energy.
Chat Input
Improvements:
Disable the ability to toggle between ships. Instead, ships are automatically toggled every 10 energy.
Only show 1 movement hint that is between the 2 opacities. Base this off the 10 available movement per ship. If the remaining energy is less than a ships available movement, use the remaining energy for the hint.
Remove the ability to scrap a ship for energy.
Let's try 4 ships.
Add the ability for a ship to warp forward 4 sectors for 2 energy if the sector isn't obstructed. Use "w" as the hotkey. Also, add a button in the center of the D-pad with "w" to warp.
If a ship is next to an obstruction and the player tries to move in that direction, leave the ship in place but reorient it in the direction of the obstacle without spending energy. This could be useful for warping over obstacles.
V0 Output
This is starting to feel solid. I occasionally need to clarify instructions, but the accuracy is really good. In this case, V0 was a little confused by the movement hint part. It only took 1 clarification to get it right.
Iterations 11-20 Coming Soon…
I’d share a demo, but it’ll probably take another 10 iterations to get to a good spot. We’re still knee-deep in the weeds at this stage.
Feel free to share ideas. I’ll be happy to give attribution for any concept I incorporate. Thanks for reading!