Quia - Class Page - 3.2 Code Elevator Steps

01

Getting Started

Open the starter file on CodeHS

Log into CodeHS and open the assignment. You'll see a starter file with two empty functions already written for you:

JavaScript Starter Code

function setup() {

}

function draw() {

}

Your job is to fill these in by placing the correct code blocks inside each function. Read through the whole starter file before writing anything.

💡 Partner tip — Read the full assignment together before typing anything. Talk through what you think each piece does.

02

Core Concepts

What are setup() and draw()?

These two functions are the foundation of almost every animation program you'll write on CodeHS.

setup() runs once at the very start. Use it to create the canvas, set up gravity, and create your sprites.
draw() runs over and over again — many times per second — creating the animation loop. Use it to update positions and clear the screen each frame.

⚠️ Common mistake — Putting sprite creation inside draw() will create hundreds of copies every second. Sprites always go in setup().

03

Variables

Declare your global variables

👥 Do together

Above both functions — not inside either one — declare two variables. These need to be global so both functions can use them:

Add above setup()

let square;
let elevator;

These lines just reserve the names for now. You'll assign them actual sprite values inside setup().

💬 Discuss with your partner — Why do these variables need to be outside the functions rather than inside them?

04

setup() — Part 1

Create the canvas and gravity

Inside setup(), add these two lines first. They create the canvas and turn on gravity:

Inside setup()

new Canvas(450, 450);
world.gravity.y = 10;

new Canvas(450, 450) creates a 450×450 pixel drawing area.
world.gravity.y = 10 pulls sprites downward — just like real gravity.

05

setup() — Part 2

Create the falling square sprite

✋ Take turns typing

Still inside setup(), assign the square variable and configure its properties:

Inside setup() — after Canvas and gravity

square = new Sprite();
square.width      = 30;
square.height     = 30;
square.bounciness = 0.1;
square.y          = 40;

new Sprite() creates a new on-screen object.
bounciness = 0.1 means the square barely bounces when it lands.
y = 40 places it near the top of the canvas so it has room to fall.

💬 Discuss — What would happen if you set bounciness to 1.0? What about 0?

06

setup() — Part 3

Create the moving elevator platform

Right after the square code, still inside setup(), add the elevator:

Inside setup() — after the square

elevator = new Sprite();
elevator.width    = 100;
elevator.height   = 15;
elevator.color    = '#99d46a';
elevator.collider = 'kinematic';

The elevator is wide (100px) and flat (15px tall) — it acts as a platform.
color = '#99d46a' makes it green. This is a hex color code.
collider = 'kinematic' means it moves on its own and can push other sprites — but gravity does not affect it.

💬 Discuss — Why does the elevator use 'kinematic' but the square doesn't?

07

draw() — Animation Loop

Make the elevator move!

🗣️ Explain first, then type

Inside draw(), add these two lines:

Inside draw()

clear();
elevator.vel.y = cos(frameCount * 2.2) * 6;

clear() erases the canvas each frame so sprites don't leave trails.
cos(frameCount * 2.2) * 6 uses a cosine wave to smoothly move the elevator up and down.
frameCount is a built-in counter that increases by 1 every frame.

Your complete solution should look like this:

Complete Solution

let square;
let elevator;

function setup() {
  new Canvas(450, 450);
  world.gravity.y = 10;

  square = new Sprite();
  square.width      = 30;
  square.height     = 30;
  square.bounciness = 0.1;
  square.y          = 40;

  elevator = new Sprite();
  elevator.width    = 100;
  elevator.height   = 15;
  elevator.color    = '#99d46a';
  elevator.collider = 'kinematic';
}

function draw() {
  clear();
  elevator.vel.y = cos(frameCount * 2.2) * 6;
}

🚀 Hit Run and watch the square fall onto the moving elevator! On the next problem, you'll write setup() and draw() from scratch — no steps provided. Close your notes and try to recall the structure!