• So-far, we've explored the basic capabilities of Processing using JavaScript.
• Now it's time to start putting to the pieces together into a project.

Think like a Game Designer:

• This project is broken down into 5 steps of a design cycle:
  • Identify: Choose a theme.
  • Design: Create a flowchart.
  • Build: Code your project.
  • Test: Play-test and refine your design.
  • Present: Share your completed project.
• At the end of each step, submit your progress to your teacher for feedback.

• For this project, your task is to create an escape room using p5.js
• Sounds fun? Crazy? Hard? Not sure where to start?
• Take a moment to search "What is an escape room?"
• What are some of the common elements?
• A room with no obvious exit
• A countdown timer
• Puzzles, hints and clues
• Objects to unlock or crack
• An exit that players can uncover
• Ask yourself: How could these elements be transformed from real life into a p5js game?

• Every great escape room has a theme!
• Egypt? Zombies? Space? Time-travel? Apocalypse? Crime scene?
• Take some time to think of a theme for your escape room.
• Feel free to search the internet for ideas. Here's one place to start.
• Brainstorm some different types of puzzles or clues that could fit this theme.
• Consider how you could design your escape room using Processing:
• Is it a top-down room, where the edges of your canvas are the walls?
• Or, is it a side-view, where the player is looking into a room from the side?
• Does the player interact by keyboard and moving around the room?
• Or, does the player interact with their mouse by clicking on object?

To Complete this Step:

• Go to your teacher and let them know what kind of theme you've chosen. Describe some of the visual elements or puzzles you'd like to put into your escape room.

• It's time to design. You're not writing code yet at this step!
• Before you start to build your escape room, you need to research ideas and create a design.
• Here are some places to start your research:
• Blueprint for creating an Escape Room
• What kinds of puzzles are in an escape room?
• Top 11 puzzle ideas for an escape room.
• 101 puzzle ideas for escape rooms.
• You'll want to consider which ideas will work best in a digital escape room.

• Create a flowchart or blueprint for your escape room using Miro, Creately, or graph paper.
• Detail what the important visual elements are:
• What will the room look like?
• Which objects will players interact with?
• Is there a timer? How much time do players have?
• Design at least 4-5 puzzles/clues/locks/riddles for your room:
• Draw or describe the puzzle and it's solution.
• Include how you expect the player to interact with puzzles.
• Outline how each puzzle will lead to the next step:
• This works well as a flowchart, or arrows in a blueprint.

To Complete this Step:

• Submit a link, image, or paper copy of the design for your escape room. This should include detailed plans for puzzles and clues, as well as the final mechanism your players will use to escape your room.

• In this step, you'll begin to code your escape room using p5.js
• Your goal is to demonstrate the different programming techniques you've learned so-far:
• Shapes and Colours
• Draw a scene for your escape room with interesting objects to interact with.
• Conditionals
• Use if, if-else, or if-elseif-else conditionals to control the logic of your puzzles.
• Variables
• Use variables to activate and deactivate puzzles, count time, and track player progress.
• Interactivity
• Let the player interact with the room by clicking or moving in proximity to different objects.
• Randomization
• Include random elements to change the position of objects, or solutions to puzzles.
• Player Controls
• Enable user input through the keyboard, such as moving objects, or answering riddles.
• Commenting
• Organize your code and include comments so it's easy to read.
• You won't be expected to include anything we haven't covered yet (such as arrays or loops).
• Be sure to refer back to your flowchart or blueprint as you create your escape room.
• At the top of your project on p5.js add an opening comment with the title of your project, a brief description, your name, and the date you started your project.

To Complete this Step:

• Submit a link to your escape room project. Don't worry, this is just an initial build, you'll have an opportunity to test and refine your project. Your escape room should be playable, but doesn't need to be completely polished yet.

• Open the Play Testing template and make a copy of it.
• Enlist the help of at least one other classmate:
• Ask them to play through your escape room.
• Silently watch them (without giving hints).
• Take note of any areas they get stuck on.
• Keep an eye on how long it takes them to escape.
• Write these notes in the Play Testing template. It's okay for them to get a bit stuck, it's a puzzle game after all, but hopefully they can eventually figure out your puzzle.
• Next, use your notes to improve your escape room:
• Do you need to make it harder, or easier?
• Do you need more puzzles?
• Do you need to add instructions for how to play?

To Complete this Step:

• Complete your Play Testing notes and submit a Google Docs link.

• In this step, you'll be putting the finishing touches on your escape room and submitting it.
• As you polish you project, consider:
• Does it have a clear starting point?
• Does it have any necessary instructions for the player?
• Are the puzzles functional and lead from one step to the next?
• Does the escape room have a clear exit point?
• Is there a message or visual element displayed when the player escapes?
• Is there a way to fail to escape, such as a timer or a dead end?
• Once you've submitted your project, you and your teacher will meet in person to play your game and ask questions about the design and code in your project.

To Complete this Step:

• Submit a link to your finished escape room project, and in the comment section write a brief reflection on your design process.