Thinking Procedurally
Time 2 hrs

Difficulty Module 1
Prerequisites Computer Science B
Departments Career & Technology Studies
Authors Sandra Kuipers
Groupings Individual
Minimum Year Group None


Explore complexity and user interaction by examining the simple yet compelling aspects of a basic clicker game.


This work is shared under the following license: Creative Commons BY-SA-NC


Learner Outcomes
Students will:
  • ...
Competency Focus
  • ...
Interdisciplinary Connections
  • ...
What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
  • ...
Any CC attribution, thanks, credit, etc.

This page requires you to be logged in to access it. Please login and try again.
5 mins
Scripts vs Programs
The Pitch
  • Want to start programming bigger and better things? Games, apps, websites, and software?
  • To move from writing scripts to writing whole programs, we need to consider:
5 mins
Thinking About Complexity
Getting Started
  • Many computer programs and games start out small, and then get more and more complex.
  • Complexity is introduced when we:
    • Add new variables.
      var a, b, c, x, y, z;
    • Branch the code through conditionals.
      if (thing > 10) {
      } else if (thing < -10) {
      } else {
    • Nest blocks inside each other.
      if (thing > 10) {
          if (otherThing == 2) {
              if (anotherThing == true) {
                  foo = "bar";
  • Once a program gets too complex, we need to start breaking it down into smaller components.
  • This is where functions become important:
    • Functions can be used to break complex logic into smaller steps.
    • Using functions improves the readability of code.
    • It also helps us to understand a codebase and add to it in the future.
30 mins
Play a Game

  • Universal Paperclips is a great example of a game that starts simple and gets more and more complex.
  • This game is also a great introduction to some of the concepts of Artificial Intelligence, Machine Learning, and Complexity that we'll be exploring in this course.

Play Universal Paperclips

(Max 30 mins! This game goes on forever. Feel free to keep playing on your own time.)

As you play the game, take a moment to consider:

  • What kind of variables are being used?
  • What's happening in the main loop of the game?
  • How does user input play a part?
  • What kind of functions might be involved?
  • How do you think the programmer who made this game managed its complexity?
15 mins
Procedural Programming
Digging In
  • In this unit, you're going to make a simple clicker game like Universal Paperclips (but shorter!)
  • It's time to dust off your programming skills from CSE-A and get back into thinking about statements, variables and loops:

  • As you played Universal Paperclips, what kind of game logic did you notice?
    • Conditionals might have been used to trigger new levels in the game.
    • Loops were likely used to increment the money earned by selling paperclips.
    • Statements were probably used to trigger button clicks.
    • Functions were also likely used to control the flow of game logic:
  • Continue watching to see the importance of functions in your code: 

5 mins
Managing Complexity
Digging In
  • Functions (also known as procedures or subroutines) enable us to put a single concept or action in it's own block of code.
  • They're an essential part of organizing your code as well as making sure your code readable.
  • Consider the following function names:
  • Functions that return a true or false value often start with the word is or can:
  • A well named function is essential to convey what it is doing.
  • As you begin to write your game, using well named functions can help to organize your code.
60 mins
Your Clicker Game
  • Make a simple clicker game using p5.js
  • Elements of your clicker game:
    • Variables: to track the quantity of materials, objects, money, etc.
    • Input: at least one button!
    • Output: text to display instructions and variables.
    • Draw Loop: where variables increase, and stuff happens.
    • Functions: to keep your code organized.
    • Comments: to explain what is happening in your code.
  • This is a warm-up, not a masterpiece.
    • Have fun, explore some ideas, but don't get carried away :)
    • The game only needs about 5 minutes of gameplay.
    • Building your game should take about 1 hour.
  • When you're done, submit a link to your playable game as evidence of your learning in this unit.
There are no records to display.
There are no records to display.
Powered by Gibbon v26.0.00dev

Founded by Ross Parker at ICHK Secondary | Built by Ross Parker, Sandra Kuipers and the Gibbon community
Copyright © Gibbon Foundation 2010-2023 | Gibbon™ of Gibbon Education Ltd. (Hong Kong)
Created under the GNU GPL | Credits | Translators | Support