Explanation of activity: 

This activity teaches coding by letting students work with fundamental coding logics to create an interactive animation.

Essential Questions:

  1. Why is learning to code important in today’s world?
    1. In this activity, students will create an interactive animation, showing them the relevance of coding in digital media/graphic design.
  2. How do computers “think” and follow instructions?
    1. Students will use basic logic such as conditions and loops to make their animation, demonstrating to them the basics of how computers “think”.
  3. How can coding help me solve problems creatively?
    1. Students will combine multiple tools of coding logic to create an animation, allowing them to design their unique solution.

Objective: Use loops and conditionals to make a short animation that responds to user input.
Materials: Web browser; Code.org account; Starter project link (below).
Project: (Click here for activity.  Please login using a Google Account)

https://studio.code.org/projects/spritelab/eAVSI-n0mJfNKwMJpNl0lQDL3PNTjSteVb2QgaAvXsk

 Steps:

  1. Open the starter and click Remix (as that makes your own version).
  2. Add one loop (repeat an action).
  3. Add one conditional (i.e. “when the spacebar is pressed, change effect”).
  4. Personalize: colors, movement, sound, or extra sprites.
  5. Click Share → copy your link.
     

Success Criteria:

  • Uses 1 loop and 1 conditional
  • Animation responds to input
  • Clear, readable setup (organized blocks)
    Reflection (2–3 sentences):
  • What worked? What did you change?
  • Where did you get stuck, and how did you fix it?

Getting Started / Tips:

  1. Set a background
  • Drag World → “set background to …” into the workspace. Pick a scene (e.g., “Disco” or “Space”).
  1. Make a sprite
  • Drag Sprites → “make new sprite at x: __ y: __”.
  • Click the costume/icon bubble to pick a character (e.g., “Dancer”).
  1. Say something
  • Drag Sprites → “sprite say ‘…’ for 2 sec” and attach it under your sprite block.
  • Press Run. Your sprite should appear and speak.
  1. Creating Events (interaction)

Events make things happen when the user does something.

Try one or two:

  • Events → “when [space] pressed”
    • Inside, add Sprites → “change sprite’s y by 20” (jump).
  • Events → “when this sprite clicked”
    • Inside, add Sprites → “set sprite’s animation to ‘…’” (switch to a dance pose)
    • Optionally Sound → “play sound ‘…’”

Run it and try the interaction!

  1. Using Movement & “behaviors”

Two easy ways to animate:

A) Simple step movement (easy)

  • Add Events → “every 0.2 seconds do …”
    • Inside: Sprites → “change sprite’s x by 5” (slide right)

B) Behaviors (one-block animations)

  • Sprites → “add behavior ‘spin right/left’ to sprite”
  • Later you can stop it with “remove behavior ‘spin right/left’ from sprite”
  1. Using Loops (repeat actions)
  • Loops → “repeat 10 times”
    • Inside: Sprites → “change sprite’s size by -5” (shrink effect)
  • Or continuous: Loops → “forever do …” (be careful—this never stops without a condition)

Pro tip: Prefer “every 0.2 seconds do …” for smooth, timed repeats you can stop later.

  1. Creating Variables (score, timers, flags)
  1. Make a variable
  • Variables → “var score = 0” at the top of your program.
  1. Change it on events
  • Under “when this sprite clicked” add Variables → “set score to score + 1”
  1. Display it
  • World/Text → “set text to ‘Score: ’ + score” or create a dedicated text element if available in your unit.
    (If your unit doesn’t have text UI blocks, you can make a “text sprite” using the sprite library’s letter assets.)

5. Setting Conditionals (if/else)

  • Logic → “if … then … else …”
     Examples:
    • If sprite’s x > 380 → set x to 0 (wrap around)
    • If score ≥ 10 → set background to ‘Party’ (reward)

6. Making Functions (bundle your own actions)

  1. Create a function
  • Functions → “create a function named …” (name it danceMove)
  • Inside, put a small routine, e.g.:
    • change sprite’s size by -2
    • play sound ‘pop’
  1. Call it
  • In an event (ie. “when space pressed”) add Functions → “call danceMove”

This keeps your workspace clean and lets you reuse logic.

Back
Next