This post is my submission for DEV Education Track: Build Apps with Google AI Studio.
What I Built
I was curious if Gemini could build a card game, so I went with something with simple rules like the game of WAR.
Prompt:
"Let's make an app that is the card game of war. Use React. Use CSS to design and draw the card faces. The game should start out as 1 player vs 1 player with player 1's deck on the left and player 2's deck on the right. Then they play the game of war. The following is the info and rules of the card game War"
And then I pasted in the info / about / rules from https://bicyclecards.com/how-to-play/war
Initial Result (after some layout rearranging and adding auto-play option):
Afterwards, I tweaked the UI more, shifted the bottom left card text and icon to the bottom right to align with common playing cards, added animations, tweaked the rules to give each player less starting cards (one suit each), added Imagen to make custom artwork for each card face (a warrior or fighter looking type), each card back (no details given here form me), and artwork for a victory screen (asked it to have one knight flexing and one celebrating). And then had Gemini optimize the number of api calls being made to Imagen.
Demo
Play The Game of WAR here
(Hopefully Imagen API key won't run out, but if it does there is fallback artwork).
Intro Screen
Main Game Screen
Victory!
My Experience
I had a good experience. I took it slow after the initial prompt and only asked for one to a few things at a time as long as they were simple. For more complex asks, I prompted those individually. Gemini also had the logic for when a tie happens and you keep playing for all the cards played since the tie, so it is a complete game of War!
It was fun and only took me maybe ~3 hours with a couple small breaks.
I did find that sometimes if I was interacting with the app while Gemini was trying to do its thing, then something wouldn't properly save (or maybe the dev server didn't proper restart?). I wouldn't see the new changes, even after refreshing from the preview window. I would have to let Gemini know this then it would do it's thing and then refresh. This is more likely a Google AI Studio related issue.
Top comments (2)
Wow this looks beautiful. I was tinkering with game generation with game generation as well, and Gemini is surprisingly very good at this!
Here's what it generated when I told it to create Flappy Bird:
It even made the flapping animation for the bird
Awesome! Yea it seems to by default (at least for me) not worry about animations. But once I asked it to add specific animations, they were added pretty quickly and the only thing I had to tweak was the animation speed.