A Flutter Asteroids game built using ChatGPT
flutter_ai_asteroids
A Flutter Asteroids game built using ChatGPT (GPT-4).
The prompts used to generate the code for the application are included below. I’ve only included the first (moste interesting) part of the conversation, as the last bit was more of nitpicking and debugging related. There are however some debugging at the end of the conversation, and it’s interesting to se how well ChatGPT can be helpful with that kind of tasks.
At the end of the conversation, I add a background image to the game. This image was generated using DreamStudio from stability.ai. This was the prompt (using the style “Digital art”):
An image of outer space, including mostly lots of distant stars and some small galaxies and colourful nebulae. Viewed from the surface of an alien moon.
Below follows the ChatGPT conversation.
User:
Hello. Can you help me with building an Asteroids game app using Flutter?
User:
Could you start by helping me to create the needed classes and data structures as mentioned in step 3? Make them as simple as possible, to be able to implement a basic version of the game.
User:
Great! In the same manner, could you help me create the game logic mentioned in step 4?
User:
Fantastic! Now, can you help me write the UI code for this, as outlined in step 5?
User:
Great! Could you also add logic and buttons in the UI for the following actions:
- “Right” – Rotates the spaceship right
- “Left” – Rotates the spaceship left
- “+” – Increases speed of the spaceship
- “-” – Decreases speed of the spaceship
Please also use a triangle as the shape for the spaceship.
User:
Great! Could you also help me write the game over logic?
- When all asteroids have been destroyed – write a large green text saying “Game Over” along with the total points.
- If colliding with an asteroid, instead write a large red text saying “You Crashed!” along with the total points.
For both these scenarios, first remove or hide the game UI, and also include a button saying “Play again”, which restarts the game.
User:
Could you make the game UI full screen? Also place the buttons in a single row at the bottom, with spacing in-between. Could you also hook up keyboard key events for the buttons, for instance use the arrow keys for turning a speed control, and spacebar for shooting?
User:
I get an error for RawKeyDownEvent. What are the imports needed for this app?
User:
The key events doesn’t seem to work. Are the key codes correct?
User:
Great, thanks! Could you also make it so that when game objects leave the screen, they re-appear on the opposite side?
User:
I’m not sure this works, should perhaps the screen size instead be passed to the update method of GameController? And would it perhaps suffice to implement the logic for wrapping around screen edges in the GameObject base class? And pass screen size as a parameter to the move method?
User:
Thanks, but there seem to be a discrepancy between the naming of the move and update methods.
User:
There seem to be a problem with the size of the CustomPaint.
User:
Please use this background image for the whole application: https://prototyingstorage.blob.core.windows.net/files/space-background.png
To use a background image, you can add an Image.network as the first child of your Stack widget:
Stack(
children: <Widget>[
Image.network(
'https://prototyingstorage.blob.core.windows.net/files/space-background.png',
width: screenSize.width,
height: screenSize.height,
fit: BoxFit.cover,
),
//...
],
);