Exercise: P5 Game

Using a familiar genre as a starting point, build out a complete, one room / one level, game in P5.js I’ve built out an extensive example of this week’s approach in AI Admin. Notice how this work becomes a metagame considering the potential role of generative AI tools in shaping interactive experiences for education and training. It’s also built on very simple conditionals. The game’s primary logic can all be described under the framework of “if / else” - players are given simple scenarios and a choice of answers, and each answer in turn changes the player’s reputation on leading AI policy for their department.

Building for Interaction

Here’s an overview of the steps / prompts involved - however, you’ll need to adjust these to your goals. Decide when to program directly, and when using generative AI tools to build or debug will be most useful.

1. Set Up the Canvas

1. Build a single-page HTML game, using the P5.js library online
2. Generate a 1000x1000 canvas for your game.
3. Make sure the canvas is centered on the HTML page

2. Load a Background Image

1. Generate or draw a background image for your room (e.g., a room with a desk, computer, phone, and book) and save it in your repository folder
2. Use loadImage() in p5.js to load that image - make sure to use the right file name.
3. Display this image on the canvas inside the draw() function.

3. Display Mouse Coordinates

1. Write a displayCoordinates() function.
2. Use text() to show the current mouseX and mouseY values on the canvas.
3. Continuously display these coordinates in the bottom-left corner of the canvas - these coordinates will help define the right interactive zones.

4. Define Mouseover Zones Using Coordinates

1. Use the displayCoordinates() function to find the coordinates of the interactive objects in your background image.
2. Define mouseover zones by checking if the mouse is within certain mouseX and mouseY ranges for each object.
3. Change the cursor to a ‘hand’ icon when hovering over interactive areas using cursor('pointer').

5. Make Zones Clickable and Display Messages

1. Make the defined interactive zones clickable using the mousePressed() function.
2. When an object (e.g., computer, phone, book) is clicked, display a message on the canvas using text().
3. Example: When the player clicks the computer, show “The computer boots up slowly.”

6. Build interactions

1. Display choices when an object is clicked
2. Each time the player clicks an interactive object, give a response or change the score.
3. Display the score in the corner of the canvas using text().

7. End the Game After All Interactions

1. Keep track of how many objects the player has interacted with.
2. When the player interacts with all objects, display an ending screen.
3. Consider adjusting the ending based on player decisions.

Submit the link to your live, GitHub Pages or Open Processing version of the game on the Moodle.