Objective
Creating an AI-Enhanced Videogame Experience with JavaScript and Stable Diffusion Graphics (without writing a line of code)
Preface
AI is helping me a lot every days during development. We use Github copilot , but also ChatGPT can be a good helper to write some code.
The code is not 100% perfect and sometimes you have to tune it to make it work. Or course if you are lucky can work at the first time, but you need to have some idea of how to write code to solve little issues.
Environment
For this test I will use:
Stable Diffusion with Automatic1111 ( https://github.com/AUTOMATIC1111/stable-diffusion-webui )
To install Stable Diffusion check my article : https://civitai.com/articles/3725/stable-diffusion-with-automatic-a1111-how-to-install-and-run-on-your-computer
ChatGPT =>(https://chat.openai.com/) We will use for writing the code, you need to register an account (which is free).
Notepad ++ => A cool text editor (https://notepad-plus-plus.org/downloads/ )
Background Remover plug-in
Windows 11 Paint => New windows Paint with background remover.
Game Mockup
The idea is to :
The player is a blue square that we can move around the screen with the arrows
A random Circle appears on the screen and the player Pickup to get some points
There are some Red square enemies that if touch the player show the last score and restart the game.
Each time the player touch the circle he gets 10 points and the circle goes to another position randomly.
Canvas in Javascript
Couple of important things.. In javascript there is an object called Canvas that can be used to draw games. We will ask ChatGPT to use this object with a resolution 800x600 pixels.
Prompt for chatGPT:
Let's write the prompt for ChatGPT:
I need to write a videogame in html + Javascript with a canvas object (800x600 pixels)
The player is a blue square that we can move around the screen with the arrows
A random Circle appears on the screen and the player Pickup to get some points
There are some Red square enemies that if touch the player show the last score and restart the game.
You have to show the point on the right-top corner of the screen
Each time the player touch the circle he gets 10 points and the circle goes to another position randomly.
ChatGPT Answer
Chat gpt will generate the code as you can see.
Copy the code with the button "Copy Code"
To use this code create a file a folder , I have created a folder called Game1
Open Notepad++ , paste the code of the game in a new document
Go to file >> Save As...
Select the format "Hyper Text Mackup Language file ("*.html,...)" this will save your file as html file.
Now you will get a file with the icon of your browser (I use chrome)
When you do double clic it will run your game.
In my case the first time didn't work.. the square was moving, but enemy and circle didn't interact.
At this point if you don't know how to modify the code you can go back to chat gpt and try to change the previous chat, you clic on the pen and you will be able to adjust your code.
After you paste the code on notepad++ and see the result.
New Prompt:
I need to write a videogame in html + Javascript with a canvas object (800x600 pixels) The player is a blue square that we can move around the screen with the arrows A Circle appears in a random place on the screen and the player Pickup to get some points. When the player touch the circle gets 10 points and the circle goes to another random place. There are 3 Red square enemies that if touch the player show the last score and restart the game. The red square move around the screen bouncing on the borders. The speed change randomly every 3 seconds. You have to show the point on the right-top corner of the screen
Now the game is working.. I didn't touch a line of javascript.
The file gampe1.zip attached to this article contains the file generated until now .. With the game that you see here.
Making the stable diffusion graphics
Now let's change the background and the object with images.
I will generate a generic background with Stable Diffusion size 800x600 and I place the file background.png in a new folder called Game2
Prompt:
2d forest pixel from top view pixel , (tiles:1.3)
Negative prompt: girls , people
Steps: 20, Sampler: Euler a, CFG scale: 7, Seed: 987972353, Face restoration: GFPGAN, Size: 800x600, Model hash: 80927e9b08, Model: aniverse_v15, VAE hash: e852361da7, VAE: vae-ft-mse-840000-ema-pruned_fp16.safetensors, ENSD: 31337, Token merging ratio: 0.1, Eta: 0.5, Version: v1.7.0
After I do the coin
To remove the Background I use a component in the "Extra Tab"
"Remove Background",
You can check my article : https://civitai.com/articles/3973/new-tool-mr-stable-diffusion-quick-sprite-to-image-generation-with-background-removal
I have also my tool that use this components.
If you have Windows 11 you can use Paint
I will do the same for main player and enemies
Player
Enemy
All the files in game2 folder
Finale Game
After several writing test, copy paste and check chatgpt wrote a game
I did exactly 9 different rewritting of my prompt to tell to chatgpt what I wanted exactly.
(as a developer it would tell less to write the code, but was fun )
My final prompt
I need to write a videogame in html + Javascript (all in one file) with a canvas object (800x600 pixels) The player is a girl.png that we can move around the screen with the arrows A coin (coin.png) appears in a random place on the screen and the player Pickup to get some points. When the player touch the circle gets 10 points and the coin goes to another random place. There are 3 Red square enemies (Enemy.png) that if touch the player show the last score and restart the game. The red square move around the screen bouncing on the borders. The speed change randomly every 3 seconds. You have to show the point on the right-top corner of the screen The player and the enemies show be 64x64 . For background use the file "background.png" which is 800x600 . The player and coin should not go outside the game area.
I quite happy with the result.. a person without a knowled of developing can make at least a simple game.
Only one little change that you can do to the code to enjoy the game is to comment the line 106
write // in front to avoid the annoying message.
or show the message only if the score is >0 .
Check the Game2.zip file attached to this article for the images and code.
I hope you enjoy this little article.