Touching Colour — the maze-wall sense

Learning Goals 3 min

By the end of this lesson you will be able to:

1. Find touching color [#000000] ? in the Sensing palette and explain that it asks "am I, this sprite, touching any pixel of that colour anywhere on the Stage?".
2. Use the eyedropper (the little colour picker inside the block) to grab a colour straight from the Stage, not from a generic colour menu.
3. Build a maze where the walls are drawn on the Backdrop in one solid colour, and the player sprite backs off the instant it touches that colour.

Warm-Up — the cat that walks through walls 6 min

Last lesson you taught the cat to notice another sprite. But what if the wall isn't a sprite at all? What if it's just a black line you painted on the Stage backdrop?

when flag clicked
forever
  if <key [right arrow v] pressed?> then
    change x by (4)
  end
end
        

Imagine the backdrop has a thick black vertical line painted across the middle. Click the flag, hold the right arrow. What happens when the cat reaches the line?

Today's block lets the cat sense the wall by its colour. Paint a maze on the backdrop in any colour you like, tell the cat "if you touch that colour, back off", and you have your first maze game.

New Concept — touching color [#000000] ? 15 min

Open the light-blue Sensing palette. Below the touching-sprite reporter from L02-12 you'll find a similar block — but instead of a dropdown for sprite names, it has a small filled colour swatch.

<touching color [#000000] ?>
        

What the block asks

This reporter asks "am I, this sprite, touching any pixel of this exact colour anywhere on the Stage?". "Anywhere" means:

• Pixels painted on the backdrop (maze walls, floor patterns, finish lines).
• Pixels on any other sprite's costume (a red ball, a yellow apple, the green grass under another sprite's feet).
• It does not count the sprite's own pixels — you can't accidentally touch your own colour.

So the question is really "is any pixel of this exact colour, on anything but me, overlapping my costume right now?". True or false — a hexagon, like every boolean reporter.

The eyedropper — pick a colour from the Stage

Click the colour swatch inside the block. A small panel opens with three sliders — Colour, Saturation, Brightness — and a button at the bottom that looks like an eyedropper icon. That is the magic.

Click the eyedropper. Your cursor turns into a tiny magnifier. Hover over the Stage and any pixel under the cursor lights up. Click on any pixel you want, and the block's colour swatch becomes exactly that colour — pixel-perfect.

<touching color [#000000] ?>
        

Why does this matter? Because "black" in your head and "#000000" in Scratch can be subtly different. The backdrop you imported might be #0A0A0A — almost-black, but not quite — and the typing-in-a-hex-code approach would silently fail. The eyedropper bypasses all of that. Click the pixel, you get the pixel's actual colour.

Inside a forever loop, with if-then

Same pattern as L02-06 and L02-12. The reporter on its own is just a question. Wrap it in if <> then inside forever and you get a sprite that watches for the colour and reacts:

when flag clicked
forever
  if <key [right arrow v] pressed?> then
    change x by (4)
  end
  if <touching color [#000000] ?> then
    change x by (-5)
  end
end
        

That tiny change x by (-5) is the whole wall-collision trick. The cat moves 4 forward, hits the wall, gets bumped 5 back — net effect, it sits still against the wall and can't pass.

Worked Example — your first maze 14 min

One sprite, one painted backdrop, eight steps. By the end the cat-pet will be stuck inside a square room — its first colour-sensing skill.

Step 1 — New project, shrink the cat

Fresh Scratch project. Click the cat in the Sprite list, set its Size to 30 (the size box near the top). The default cat is too big to fit in a small maze.

Step 2 — Paint the maze on the backdrop

Bottom-right, click the Stage (the white box next to the Sprite list). Top-left, click the Backdrops tab. You're now in the Stage editor.

Pick the Rectangle tool and a solid black fill. Draw four thick lines around the edge of the Stage to make a square room. Leave the inside white.

Step 3 — Drop the cat inside the room

Click the Code tab. Drag the cat sprite on the Stage so it's clearly inside the empty white area, away from the walls.

Step 4 — Build the four-arrow walker

On the cat, build four small scripts — one per arrow:

when [right arrow v] key pressed
change x by (5)

when [left arrow v] key pressed
change x by (-5)

when [up arrow v] key pressed
change y by (5)

when [down arrow v] key pressed
change y by (-5)
        

Step 5 — Click the flag and walk through walls

Tap the arrows. The cat moves around — but it sails straight through the black walls like a ghost. That's exactly the warm-up problem. Step 6 fixes it.

Step 6 — Add the colour-bump script

Add a fifth script to the cat:

when flag clicked
forever
  if <touching color [#000000] ?> then
    move (-6) steps
  end
end
        

Step 7 — Eyedropper-pick the wall colour

Click the colour swatch inside the touching-colour block. Click the eyedropper at the bottom of the panel. Click any black pixel on a wall. The swatch now matches the wall exactly.

Step 8 — Click the flag and try to escape

Hold an arrow toward a wall. The cat moves forward, touches black, gets bumped back — it can nudge against the wall but can't pass through. The room is sealed. Try all four walls. The maze works.

The full assembled stack (on the cat)

when [right arrow v] key pressed
change x by (5)

when [left arrow v] key pressed
change x by (-5)

when [up arrow v] key pressed
change y by (5)

when [down arrow v] key pressed
change y by (-5)

when flag clicked
forever
  if <touching color [#000000] ?> then
    move (-6) steps
  end
end
        

What you just built: the engine behind every Scratch maze game on the planet. Pac-Man, every "guide the dot to the goal" puzzle, every "find the cheese" challenge — they're all colour-bump plus arrow keys. Repaint the backdrop and you have a new level for free.

Try It Yourself — three colour-sense drills 15 min

when flag clicked
forever
  if <touching color [#FF0000] ?> then
    say [Hot!] for (1) seconds
  end
end
          

when flag clicked
go to x: (0) y: (160)
forever
  change y by (-3)
  if <touching color [#FF7F00] ?> then
    go to x: ((pick random (-200) to (200))) y: (160)
  end
end
          

when flag clicked
forever
  if <touching color [#000000] ?> then
    move (-6) steps
  end
  if <touching color [#00CC00] ?> then
    say [Daniel wins!] for (2) seconds
    stop [all v]
  end
end
          

Mini-Challenge — the wall the cat ignores 5 min

"Aisyah's leaky room"

Aisyah painted a square black room on the backdrop and added the maze-bump script — exactly like the worked example. But when she clicks the flag and walks the cat toward the top wall, it stops fine. The bottom wall, also fine. The left wall, fine. But she can walk straight through the right wall. Her script:

when flag clicked
forever
  if <touching color [#000000] ?> then
    move (-6) steps
  end
end
        

What's likely going on, and how would you check?

Recap 3 min

You met the third flavour of the touching reporter — touching color [#000000] ?. It asks "am I touching any pixel of this colour, anywhere on the Stage?", true or false. Pick the colour with the eyedropper inside the block so it matches your art pixel-perfectly. Wrap it in if-then inside forever and you have a sprite that reacts to painted walls, lava, goals, danger zones — anything you can fill with a solid colour. This is the foundation block of maze games, platformer floors, and any "the world reacts to where I am" mechanic.

Touching color [#hex] ?

A Sensing boolean reporter (hexagonal) that returns true when any pixel of the chosen colour, on any other sprite or on the backdrop, overlaps this sprite's costume.

Eyedropper

The pixel-picker tool inside the colour panel — click it, then click any pixel on the Stage to copy that exact colour into the block's swatch.

Backdrop

The Stage's background image, edited under the Backdrops tab. Paint maze walls and floors here so they don't move with any sprite.

Wall-bump

The classic pattern: if touching color then move (-N) steps. The bump-back must be larger than the forward step to avoid jitter.

Anti-aliasing

Soft, semi-transparent edges that a paint brush leaves around shapes. Those near-target pixels often don't match the picked colour — use the rectangle/line tool for hard, single-colour shapes.

Homework 2 min

The Kuih Hunt. A tiny one-screen maze game with a Malaysian flavour.

1. Backdrop: paint a maze in black. Make at least two corridors and one dead-end.
2. Sprite 1: the player — pick the cat or any small sprite, set Size to 25. Give it the four arrow-key scripts plus the touching-black bump script from the worked example.
3. Sprite 2: a piece of kuih — pick any small food sprite from the library (or paint a yellow blob and call it kuih lapis). Place it at the far end of the maze.
4. On the kuih, add: when flag clicked + forever + if touching (Cat v) ? then say [Yum!] for (1) seconds + stop [all v].
5. Bonus: add a red lava square in one of the corridors. Touching red sends the cat back to its starting position (use go to x: () y: ()).

Save as HW-L2-13-Kuih-Hunt.sb3. Play it. Time yourself.

Bring back next class:

• The .sb3 file.
• Your fastest kuih-grab time in seconds.
• Your answer to: "What happens if the cat's starting position is touching a black wall when the flag is clicked? Try it and write down what you see."

Heads up for next class: SCR-L02-14 meets color [#FF0000] is touching [#0000FF] ? — a pickier version that only fires when one of your colours touches one of theirs. Useful for paintbrush tips, sword blades, and Pac-Man eyes.