Introduction to Block-Based Coding (Scratch)

Traditional programming languages (like Python, Java, or C++) require programmers to type exact text syntax. One missing semicolon, unmatched quote, or typo produces a syntax error that crashes the program. Block-Based Coding eliminates syntax frustration entirely by representing programming instructions as visual, interlocking puzzle blocks that snap together only if the logic is grammatically valid.

Why Scratch 3.0 is Loved Globally

• Developed by the MIT Media Lab specifically for school students.
• 100% visual, colorful, and highly intuitive.
• Runs directly inside any modern web browser or as an offline desktop app.
• Empowers learners to build animated stories, musical art, interactive educational simulations, and full 2D arcade games.

When you launch Scratch, the screen is organized into distinct functional workspaces:

Core Workspace Components

• 1. The Stage: The large preview window in the upper right where your sprites move, talk, and interact. It represents the "theatre" where the program runs.
• 2. Sprites: The active graphical characters, objects, or actors that perform on the stage (the default sprite is the famous Scratch Orange Cat). Users can draw their own sprites or choose from a library of hundreds of characters.
• 3. Sprite Pane: Located below the stage; lists all sprites in the project and displays their properties: Sprite Name, X coordinate, Y coordinate, Show/Hide status, Size (percentage), and Direction (degrees).
• 4. Backdrop / Stage Pane: Manages the background scenery behind the sprites.
• 5. Block Palette: Located on the far left; houses all the colorful code blocks grouped into color-coded categories.
• 6. Scripts Area: The large open gray canvas in the center where you drag, snap, and assemble code blocks into executable programs called Scripts.
• 7. Green Flag & Red Stop Sign: The control buttons above the stage. Clicking the Green Flag starts the program; clicking the Red Stop Sign halts all running scripts.

Motion in Scratch is governed by an exact mathematical Cartesian coordinate grid:

Stage Grid Dimensions

• The Stage is exactly 480 pixels wide and 360 pixels high.
• Origin $(0, 0)$: Located at the exact geometric center of the Stage.
• Horizontal X-Axis: Measures left-and-right position.
  • Moves from $X = -240$ (far left edge) to $X = +240$ (far right edge).
  • Positive X moves right; Negative X moves left.
• Vertical Y-Axis: Measures up-and-down position.
  • Moves from $Y = -180$ (bottom edge) to $Y = +180$ (top edge).
  • Positive Y moves up; Negative Y moves down.

Sprite Direction & Rotation

Scratch measures sprite direction in degrees: $90^\circ$ = Facing Right (default), $-90^\circ$ = Facing Left, $0^\circ$ = Facing Up, and $180^\circ$ = Facing Down.

Every block category in Scratch serves a distinct computational function and is instantly recognizable by its unique color:

Combining blocks creates living, interactive projects:

Frame-by-Frame Sprite Animation

Just like a traditional cartoon flipbook, a sprite changes appearance by switching rapidly between different drawings called Costumes. For example, the default Scratch Cat has two costumes with legs in different running positions:

when green flag clicked
forever
    move 10 steps
    next costume
    wait 0.1 seconds
    if on edge, bounce
end

The wait 0.1 seconds block is vital; without it, the computer switches costumes millions of times per second, creating an unreadable visual blur!

Event-Driven Keyboard Controls

To make a character move when arrow keys are pressed, we use event hat blocks:

• when [right arrow] key pressed → point in direction 90 → move 10 steps
• when [left arrow] key pressed → point in direction -90 → move 10 steps