Innovation Hub
An initiative by Al Bayat Mitwahid in UAE
Course 3
Creating your own projects with AI
Unit 1 – Coding with AI
Lesson 2: Coding a simple game with AI
Like the previous lesson, we can use chatbots to learn about and build a game.
We will use a common game building website p5.js to start building a simple game using a chatbot to speed up our learning progress.
​
​
​
​
​
​
​
INTERACTIVE
For this section, you will work with a partner to think about a very easy interactive game that you could build. You should aim to keep it super simple at first, where you create 1-3 shapes on screen and make them interact with the mouse or arrow button. Later you can make them more complex as you learn about how the code works. The best games to develop are ones that have a simple concept.
-
Go to https://editor.p5js.org/ and create a login so that you can save your game.
-
Go to your favourite AI chatbot
-
Come up with a chatbot prompt that will let the AI suggest the code you need. For example:
I want to develop a simple game using https://editor.p5js.org/. I want to start with 5 water balloons on the screen. When the user clicks on a balloon it disappears and they get a point. Can you tell me the code I need to make that happen?
​
Cope and paste the code into the p5.js editor and click the Run or Play button. Be aware that the code won’t necessarily work, as the AI won’t necessarily get everything right!
If there are problems with the code, try and work out what isn’t working. You can ask the chatbot more questions about the code to work out what is going on. Some useful prompts are:
-
What does the setup() section do?
-
How does the draw() function work?
-
How can I change the colour of the balloons?
-
What does the “for” word do in the code?
-
What does the error message “[put in error here]” mean
If the code isn’t working at all for you, you can try a simpler game to get some better understanding first. Here are some simple examples of game prompts:
Can you suggest code to make a game on p5.js. It should start with a coloured circle on the screen that changes colour when you hover the mouse over it.
​
I want to make a game on p5.js. Please suggest code I can use to make raindrops fall from the top to the bottom of the screen.
​
Help me make a simple game on p5.js. I want circles to move from the right to the left of the screen on a line. The player will be represented by a small yellow circle. When the player presses the up button, the yellow circle will jump. The aim of the game is to jump over the moving circles. Can you suggest the code I need to do this?
If your game is working, see if you can make it more complex by adding movement, different colours, a reset button and better scoring.
Keep using the chatbot to ask questions about how the code works and how to add the features you want. In this way the chatbot can act as your coding helper as you learn new coding skills.
