Hands-on sessions / Hands-on session 2 /

Using LLMs to create a browser game

This is another example of using LLMs to generate code. We will try to create a simple browser based html game and add some game elements to see how the LLM can help us create the game. The aim of the exercise is not to recreate the same thing as the LLM generates different code on separate interactions and neither to use the LLM in an "efficient" way by following prompt best practices but just to give an overview of what it can understand and do. In this instance we will create a game of Tic Tac Toe and build on top of it but you can try it with other simple games as well. At the end of the page you will find a link with the whole interaction we had with the LLM, all the prompts and resulting code, so you can look at that later as well.

Creating a simple browser game

We will begin by asking the LLM if it can generate an HTML game for us and try to be more specific in the following prompts to improve the game.

As with the exercise on websites, you can ask for a simple game to start with and improve from there asking the LLM to generate more complex visuals or interactive elements each time. This way it is easier to ask for changes and explain what you would like to see in each case.

☝️ TIP: When it comes to writing code it is often useful to not ask for everything in one go but to build it iteratively, step-by-step, each time checking the output.

You can start with the following prompt:

Can you help me develop an html game based on tic tac toe

This will generate the code for you and the LLM might give instructions as well on how to setup this code. It usually generates 3 different code files for you. These are the html file called index.html, the css file called styles.css and the javascript file called script.js. You will need to manually create files with these names on your computer and save them in the same directory. Then you can copy the code for each file into the corresponding file locally and save the file. Make sure you have the file names and extensions set up correctly. When this is done you can open the index.html file in a browser and you should be able to see the game created by the LLM. You will need to repeat this process every time new code is generated to check the results.

The first prompt created the code for the game and after following the setup steps mentioned in the paragraph above the resulting game looked like this: facility_forum_browser_game_1.html

Adding complex elements

Now that there is a structure for a basic game of tic tac toe, we can try to add more complex elements such as an AI player and multiple difficulty levels. To add an AI opponent to the game you can prompt

Can we add an ai opponent to the game that moves automatically on its turn.

LLMs are becoming increasingly good at writing code so we can ask for more advanced elements. In principle, you can try anything you can describe reasonably well.

☝️ TIP: The LLMs can also suggest changes to the game. For example in this case the LLM suggested the following:

This sets up a basic Tic Tac Toe game. You can enhance it further by adding more features like a score counter, animations, or different themes. Let me know if you'd like to add any specific features or improve certain aspects of the game!

The LLM creates a new player that makes moves on their turn. You can now ask it to create multiple difficulty levels with a prompt like this

Can we make multiple levels of difficulty with the AI player. The first level is easy and ai moves randomly. The second level is the current ai player.

At this stage, the game still used basic UI elements but now had a difficulty setting in the interface: facility_forum_borwser_game_2.png

☝️ TIP: Think about what kind of description you would need to provide to a colleague that is making a website or game for you, provide that same information to the LLM.

Improving the look

To improve the look of the game we can use libraries such as Bootstrap to make it look more appealing. We can be as specific or as general as we want. I will be a bit general and ask it to use bootstrap to with a prompt like this

Can you improve it visually by adding more colors and use bootstrap to make this look better. Can you also move the tic tac toe grid to the center and create a popup for the winner. Add a scoreboard as well.

Now, the game used UI elements from bootstrap and looked visually "better": facility_forum_borwser_game_3.png

To make it slightly more relevant we can ask the LLM to change the theme with a prompt like this

Change the theme to life science and use information on this page for color scheme https://www.scilifelab.se/community-pages/resources/visual-identity/.

☝️ TIP: In this case we have asked the LLM to look at the Scilifelab website visual identity page and use those color themes in the game. We can be more specific about the colors and what elements should have these colors but in this case its interesting to see the variation there is when we allow the LLM some "artistic freedom".

After incorporating the Scilifelab theme, and adding images the interface looked like this: facility_forum_borwser_game_4.png

The LLM changed the players from X and O to images for cell and DNA. It does say in the instructions to add these images manually so you can download any image that you like for each player and name it according to the instructions by the LLM. In this case it used two images named cell.png and dna.png.

To wrap up we added used prompts to make UI improvements. Some of them were 

Create a border for the main game board and shift scoreboard and difficulty to a side menu on the left.
The heading should have the look of a navbar.
Make the content in the side menu fit better and give the scoredboard a separate border and scilifelab visual background.

This was the final result: facility_forum_borwser_game_5.png

Hosting the game

After the code in generated you can ask the LLM if it can host the game. It can't do that but it can give you suggestions. I asked it if it could deploy the app to a service called netlify

Can you deploy this to netlify?

The LLM gave useful information on how this can be done.

To deploy this Tic Tac Toe game to Netlify, follow these steps:

  1. Prepare Your Project: Ensure you have the following files in your project directory:

    • index.html
    • styles.css
    • script.js
    • Any additional assets like images for 'X' and 'O'.

  2. Create a Git Repository: Initialize a git repository and commit your files:

    git init
git add .
git commit -m "Initial commit"

  3. Push to GitHub: Create a new repository on GitHub and push your local repository to GitHub:

    git remote add origin https://github.com/yourusername/your-repo-name.git
git push -u origin master

  4. Deploy to Netlify:

    • Log in to Netlify.
    • Click on "New site from Git".
    • Connect your GitHub account and select the repository you created.
    • Configure the deploy settings if necessary, then click "Deploy site".

  5. Custom Domain (Optional):

    • After deployment, you can set up a custom domain if desired.

Following these steps will deploy your game to Netlify, making it accessible online. Let me know if you need further assistance with any step!

Example chat and prompts

The whole chat with the LLM and all the prompts and responses can be seen at chatgpt_browser_game.md

If you look at the chat, it can be seen that there were sometimes small bugs either in the code logic or misplaced visual elements but and sometimes you had to ask the LLM to fix them but it was not able to do so. In those cases we had to manually look at problem areas i.e do some manual debugging and then ask the LLM to fix that area. For example, the LLM was having problems with the async nature of javascript and it set timeout for the player turns to make it visually better but that resulted in one player having multiple turns before the other. We had to manually look at the code and ask it to remove the timeouts in this case. There were similar problems with the placing UI elements as well.

Ideas for browser-based games

Game: Breakout
Develop a version of the classic Breakout game. All code should be in a single HTML file.

Game: Maze

Generate a computer game as a single downloadable web page. The game should be a complex maze with a start and a goal area, and a person to traverse the maze that can be controlled with the arrow keys. The start area should be in the top left, and the goal area in the middle. When reading the goal, there should be fireworks on the screen and printed out "GOAL!".

Game: Adventure style book

I want you to simulate a choose-your-own adventure style book. You will create the story, content, happenings of this book. You will output the pages, and, like a real gamebook, you will offer choices that branch of the story, and i will type in which choice i take. Understood?