Provide a prompt detailing your desired game, and our 2D Game Developer will build it. The game operates directly in your browser via JavaScript on Canvas2D.
This demo is ideal for crafting simple games and rapid prototyping. However, due to the limited context size and single-request design, there are constraints on the code volume.
We are looking into integrating open-source models (for example starchat-alpha) next, so stay tuned!
- Quickstart
- Add your OpenAI API key
- Select one of the Examples
- Click on
You are stuck? We are here to help!
- Games
- Base Game
Example Games
We re-created some of our favorite games! You want to share your game with the community? Then head over to our 
| Play | on CodeSandbox |
| Model | GPT 3.5 Turbo |
| Iterations | 20 |
| Controls | Keyboard: Movement (Arrow Left, Arrow right), Shooting (Space), Restart (R) |
| Hints | The bigger the window, the easier it gets to play |
| Play | on CodeSandbox |
| Model | GPT 4.0 |
| Iterations | 24 |
| Controls | Keyboard: Fly (space) |
| Hints | Don't collide with the pipes ;) |
How to use?
- Editor Usage Tips
We are limited by the context-size of the selected model , the scope of the game shouldn't be super huge (for example 'asteroids' is a game with small scope while 'fortnite' is way too big)
It's good to start with simple features, main mechanics first using the Base Game + the create game command .
Iterate on this. For example "Flappy Bird. Intro screen, start the game by pressing space key."
See if the generated result is what you expect. Continue there, add more features. Either by using the add feature command or by extending the prompt itself and start from scratch (select the Base Game + create game command ).
Make always sure to check the selected game in the Games list, as this is used as the foundation for the next iteration.
Cancel generating the game at any time by pressing the button next to button.
- Create a New Game
Input your game concept into the prompt field.
Make sure the command field is set to create game .
Ensure that the Base Game is selected in the Games list.
Click on to start the game creation process.
Once the game generation is complete, it will be added to the Games list and selected automatically.
You can view the newly created game in the Game Preview section.
- Add a New Feature
Clear the prompt field and input the new feature you want to add.
Set the command field to add feature .
Ensure that the previously generated game is selected in the Games list.
Click on to start the feature addition process.
Once the feature addition is complete, it will be added to the Games list and selected automatically.
If a bug appears in the process, proceed to the next section.
- Fix a Bug
Clear the prompt field and input the bug that you have encountered.
Set the command field to fix bug .
Ensure that the game with the bug is selected in the Games list.
Click on to start the bug fixing process.
Once the bug fixing is complete, it will be reflected in the selected game in the Games list.
- Extend a Feature
Clear the prompt field and input the changes you want to make to the feature.
Set the command field to extend feature .
Ensure that the game with the feature is selected in the Games list.
Click on to start the feature extension process.
Once the feature extension is complete, it will be reflected in the selected game in the Games list.
- Start From Scratch
Clear the prompt field and input a new game concept.
Set the command field to create game .
Ensure that the Base Game is selected in the Games list.
Click on to start the new game creation process.
Once the game generation is complete, it will be added to the Games list and selected automatically.
You can view the newly created game in the Game Preview section.
- Viewing & Editing Source Code
To see the source code of the selected game, click the button in the header. This will open a code editor where you can manually change the code if desired.
Save changes with CTRL+S using your keyboard.
- Refreshing Game Preview
The button in the header of the Game Preview refreshes the Game Preview .
Click this if you've made changes and want to see them reflected in the Game Preview and for what ever reason the Game Preview didn't refresh automatically.
It's also useful if you are GAME OVER and have not added a feature to restart the game yet.
- Exporting to CodeSandbox
To export your game to CodeSandbox, click the share on button in the Game Preview header.
Note: This feature will not work for the Base Game ; it can only export generated Games .
- Using Options
Open the Options by clicking on them
Switch the model between gpt-4 and gpt-3.5-turbo (default)
Update the max_tokens to 4096 (gpt-4), default is 2048 (gpt-3.5-turbo)
Make changes to the temperature if you want more random (value closer to 1.0) results, default is 0.2 (not very random)
Under the Hood
- Build on top of nextjs-hf-spaces with NextJS + TypeScript + openai-node. The full source code can be found on failfa-st/2D-GameCreator.
- Games are stored in localStorage.
- We use a very strong system message to make sure that the AI behaves like a 2D Game Developer, where "TEMPLATE" refers to the code of the selected game in the Games list, intitally this is the Base Game:
You are a skilled 2D game developer working with JavaScript on Canvas2D, aim for high performance You understand and follow a set of "COMMANDS" to build games: "CREATE_GAME": Initiate the development. Consider the game type, environment, basic mechanics and extend the "TEMPLATE" "ADD_FEATURE": Add the new feature "REMOVE_FEATURE": Remove the existing feature "UPDATE_FEATURE": Modify an existing feature, altering its behavior or properties "FIX_BUG": Debug and fix problems, ensuring everything functions as intended NEVER use any external assets: image, base64, sprite, audio, svg NEVER use alert! Write your message on Canvas directly NEVER add comments to reduce the token amount You can choose from these global libs: Mousetrap.bind, confetti Your "OUTPUT FORMAT" must be valid JavaScript code within a markdown code block It's crucial to follow the "COMMANDS" and "OUTPUT FORMAT" for the desired results
- The user message follows another template, to make sure that the selected Command is included and that the AI always returns the full source code, as this is easier to process instead of just parts of the code. The prompt is the message that you entered into the prompt field:
"${command}": ${prompt}. Return the full source code of the game. TEMPLATE:
Troubleshooting
The generated output was interrupted, as it was too long and the OpenAI API delivered not everything. If you can, switch to GPT-4 as it allows a bigger context size (change it in the options and also increase the max_tokens). If you can't do this, then please help us extend the 2D GameCreator so that it can also resume when the output is interrupted.
There might have been a timeout or something else. Please try again.
You need help? Something is not working? Please let us know!