Making a Small "Star Attraction" Game with Gemini 2.0 Flash

Date: 09 Feb 2025
Author: Erik Dubbelboer

This is an experiment to recreate the basics of Sokpop’s n-body game, in HTML5 canvas using, the new Gemini 2.0 Flash. The game is a simple physics-based game where you shoot a comet towards a target while other stars or suns attract the comet you shoot. The game is simple but has a nice feel to it.

I tried to do this purely by talking to the LLM. I didn’t look at the code until the end. I wanted to see if someone without any programming knowledge could build a game this way.

Why Gemini 2.0 Flash? It’s a state of the art model, with a big context window, and it’s cheap. If I were to build a game building service, I would use this model.

This is the game after 24 iterations:

Iteration 1

Prompt:

Look at this picture of a simple game. Can you rebuild something similar in html5/javascript/canvas/webgl? First describe the gameplay before you give me code. Fit all the code in a single index.html. The gameplay is that there is a line going from a certain point to the cursor of the player. When the player clicks it shoots a "star" or "bullet" from the start point towards the cursor. The velocity depends on how long the line was. The stars you see in the level all attract to the "star" towards them based on how big they are. The goal of the player is to shoot the "star" into one of the other small points that spawn on the level.

Output:

Iteration 2

Prompt:

The ball is moving much too fast, it goes out of the window in much less than a second.

Output:

Iteration 3

Prompt:

It's still too fast, make it about 1/3 the speed. The gravity effect can also be stronger.

Output:

Iteration 4

Prompt:

When a ball hits a star it should disappear. Also randomize the spawn locations.

Output:

Iteration 5

Prompt:

Only the ball should disappear, not the star. Also randomize the player and "goal" starting positions. Also spawn 5 "goals" to try to hit.

Output:

Iteration 6

Prompt:

Make the attraction slightly less. Make sure the planets spawn a bit away from each other spread out over the level. Make sure things don't spawn on top of each other.

Output:

Iteration 7

Prompt:

Can you try and generate random but interesting levels. Just make it 1 target you need to hit, but make it so that you have to shoot past some suns and use their gravity. So maybe spawn the suns around the center, and the player and target at the edges almost opposite of each other.

Output:

The generated code contained a bug and didn’t render anything.

Iteration 8

Prompt:

Uncaught SyntaxError: Illegal break statement

Output:

The generated code contained a bug and didn’t render anything.

Iteration 9

Prompt:

Uncaught ReferenceError: mouseX is not defined
  at draw (index.html:243:28)
  at gameLoop (index.html:276:13)
  at index.html:282:9

Output:

Iteration 10

Prompt:

Make the attraction slightly less. Spawn the suns a bit further away from the center. Make sure the target always spawns at the other side of the screen from the player.

Output:

Iteration 11

Prompt:

The target is impossible to hit. How about we spawn the target somewhere in the center of the screen as well.

Output:

Iteration 12

Prompt:

Let me shoot more than 1 ball at once.

Output:

Iteration 13

Prompt:

Don't hide the line to my cursor

Output:

Iteration 14

Prompt:

Keep score of how many times I have hit a target. Add a maximum of 10 balls I can shoot before it automatically goes to the next level.

Output:

Iteration 15

Prompt:

Show how many balls I have left

Output:

Iteration 16

Prompt:

Make the multiplier for how long the line to my cursor is higher. So not a linear increase but something higher so it's easier to shoot really slow and really faster.
Can you give the balls a bit of a trail of lets say 50 pixels long roughly.
Can you animate the target a bit, like make it get slightly bigger and smaller in a loop to pull attention to it.
And if possible can you add a slight "glow" to the suns?

Output:

Iteration 17

Prompt:

Clicking does nothing now, it doesn't spawn a projectile

Output:

Iteration 18

Prompt:

It's still not spawning anything, or it's invisible, or too fast to see maybe?

Output:

Iteration 19

Prompt:

Here is the full console output when I click once:
index.html:198 mousedown event fired
index.html:220 Distance: 764.0013213656673 Launch Power: 583.6980190484857
index.html:221 velocityX: -583.6970095233698 velocityY -1.0855941237020146
index.html:233 Projectile created {
  "x": -146.58347811458736,
  "y": 303.23863471160234,
  "radius": 5,
  "velocityX": -572.087447711346,
  "velocityY": -1.0830314354706363,
  "active": false,
  "trail": [
    {
      "x": 431.2826306847521,
      "y": 304.33260585854237
    },
    {
      "x": -146.58347811458736,
      "y": 303.23863471160234
    }
  ]
}

Output:

Note: This was the only time Gemini didn’t output the full result, it only gave a canvas.addEventListener('mousedown', ... ) replacement I had to manually apply.

Iteration 20

Prompt:

Now it works, but can you put a limit on the velocity cause it can go too fast now. And make the increase from the line to my cursor getting longer slightly less to give more control.

Output:

Iteration 21

Prompt:

Make the max velocity about 2/3 of what it is now.
Sometimes the game completely flips out and keeps respawning the level over and over as fast as possible.

Output:

Iteration 22

Prompt:

Reduce the max velocity further by about a half. The endless respawning is still sometimes happening. It doesn't print anything in the console about it.

Output:

Iteration 23

Prompt:

Can you make the increase of making the line longer slightly stronger again.

The respawning over and over seems to happen when the amount of shots I have left is 0. The amount of shots doesn't reset each new level like it should.

Output:

Iteration 24

Prompt:

Add mobile support including mobile Safari. Pressing the screen should show the line, releasing my finger should shoot a ball.

Output:

Final Thoughts

At this point, I thought the game was good enough and stopped iterating. I had a look at the code, which, besides some weird indentation, was actually pretty good and easy to read.

One thing I would do different next time is trying to expose variables like attactor strength and ball speed as adjustable controls, so I can tune them without having to ask the LLM in multiple iterations.

It was a fun experiment to see how far I could get with just a few prompts, and not doing anything with code myself. The game is simple, but has a nice feel to it. I hope you enjoyed this little journey through the development of this small game with Gemini 2.0 Flash.

comments powered by Disqus