Functional Breakout (2-Part Mini Lesson)

Click here to go back to main page

---

flowchart TD
    A[Start: Breakout Blocks Lesson] --> B[Lesson 1: Paddle and Base Blocks]
    
    B --> B1[Make the Paddle]
    B1 --> B2[Move the Paddle]
    
    B --> C[Interactive Demos]
    C --> C1[Paddle Movement]
    C1 --> C2[Ball Bouncing]
    C2 --> C3[Paddle + Ball]
    C3 --> C4[Mini Breakout]
    
    B --> D[Lesson 2: Power-Up Block + Timer]
    
    D --> D1[Add Special Bricks]
    D1 --> D2[Draw and Drop Power-Up]
    D2 --> D3[Show Timer]
    
    C4 --> E[Full Power-Up Demo]
    
    D --> F[Exploration Activities]
    
    E --> G[Complete Breakout Game]
    
    style A fill:#ffffff,stroke:#000000,stroke-width:3px,color:#000000
    style B fill:#e3f2fd,stroke:#1976d2,stroke-width:2px,color:#000000
    style B1 fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px,color:#000000
    style B2 fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px,color:#000000
    style C fill:#e8f5e8,stroke:#388e3c,stroke-width:2px,color:#000000
    style C1 fill:#f1f8e9,stroke:#66bb6a,stroke-width:2px,color:#000000
    style C2 fill:#f1f8e9,stroke:#66bb6a,stroke-width:2px,color:#000000
    style C3 fill:#f1f8e9,stroke:#66bb6a,stroke-width:2px,color:#000000
    style C4 fill:#f1f8e9,stroke:#66bb6a,stroke-width:2px,color:#000000
    style D fill:#fff3e0,stroke:#f57c00,stroke-width:2px,color:#000000
    style D1 fill:#fff8e1,stroke:#ffb74d,stroke-width:2px,color:#000000
    style D2 fill:#fff8e1,stroke:#ffb74d,stroke-width:2px,color:#000000
    style D3 fill:#fff8e1,stroke:#ffb74d,stroke-width:2px,color:#000000
    style E fill:#fce4ec,stroke:#c2185b,stroke-width:2px,color:#000000
    style F fill:#f9fbe7,stroke:#827717,stroke-width:2px,color:#000000
    style G fill:#ffebee,stroke:#d32f2f,stroke-width:3px,color:#000000

Functional Breakout: Lesson 1

Paddle and Base Blocks

Functional Breakout: Lesson 2

Power-Up Block + Timer

---

Lesson 1 Checkpoint

Paddle setup, keyboard input, and bounds

1) Which variables track keyboard input for moving the paddle?

rightPressed leftPressed paddleHeight paddleWidth

2) What prevents the paddle from leaving the canvas?

Increasing paddleWidth when near the edge Conditional checks on paddleX against 0 and canvas.width - paddleWidth Calling ctx.closePath() in drawPaddle()

3) Which events are used to update movement flags?

keydown keyup wheel resize

Lesson 2 Checkpoint

Spawning, catching, and timing a power-up

1) When a power-up brick is hit, what happens immediately?

All bricks in the row disappear A falling power-up object is pushed into powerUps Ball speed is permanently doubled

2) What effect is applied when the paddle catches the power-up in the sample code?

The paddle becomes narrower The paddle becomes wider temporarily The ball changes color

3) Which variables manage the power-up’s duration?

activePowerUp powerUpTimer powerUpDuration basePaddleWidth

4) What UI element communicates remaining time to the player?

A vertical bar that fills/shrinks A blinking paddle outline An alert popup every second

Demos Checkpoint

Ball bouncing conditions

1) Which condition flips the ball’s horizontal velocity?

bx + br > canvas.width || bx - br < 0 by - br < 0 by + br > canvas.height - paddleHeight

2) In the Paddle + Ball demo, what causes a bounce off the paddle?

Reaching the exact center of the canvas Ball’s bottom touching paddle’s top while x is between paddle edges Calling ctx.closePath() after drawing the paddle

Mini Breakout Checkpoint

Brick grid and collision clearing

1) How are brick positions assigned each frame in the sample?

They are randomized every loop Computed from row/column indices using offsets and padding, then stored to each brick’s x,y Hardcoded pixel coordinates for each brick

2) What happens when the ball’s position overlaps a brick’s rectangle?

Vertical velocity inverts and the brick’s status becomes 0 The ball teleports to center All bricks immediately reset

3) Select all parameters that define the brick layout grid:

rowCount colCount bw (brick width) bt (top offset) gravity