Brick Breaker I

Review — Cartoon Studio 5 min

• Pip’s Big Day ran from a cue sheet: three lists in step — a time, an actor and an action on each row.
• The director waited for each time and sent one cue. Each actor checked if it was theirs.
• The film changed when the rows changed: insert one, skip one, speed them up, recast a role.

Quick-fire

In Cartoon Studio, Pip glided from one spot to another. A glide (1) secs to x: (100) y: (0) needs to know where it is going. Does a bouncing ball know where it is going?

Today’s Topic 3 min

• A ball as two numbers: vx (across) and vy (up)
• A bounce is a flipped sign
• A paddle that follows the mouse
• A miss that costs a life

Learning outcome

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

1. Move a sprite by adding two speed variables every frame.
2. Bounce it off a wall by flipping one speed.
3. Bounce it off a paddle only while it is coming down.

Learnt — a ball that is two numbers 28 min

1 · Across and up

Every frame, the ball moves a little across and a little up. Keep those two numbers in variables. Call them vx and vy — v for velocity, a word for speed with a direction.

when flag clicked
set [vx v] to (5)
set [vy v] to (3)
go to x: (-200) y: (-100)
repeat (60)
  change x by (vx)
  change y by (vy)
end
            

Change the two numbers and the ball goes a different way. Three balls start at the same spot here, with three different pairs:

2 · A wall flips one number

When the ball goes past the right wall, it must come back left. So vx must become negative. vy does not care about that wall at all.

if <(x position) > (232)> then
  set [vx v] to ((0) - (vx))
end
              

if <(y position) > (172)> then
  set [vy v] to ((0) - (vy))
end
              

((0) - (vx)) flips the sign: 5 becomes −5, and −5 becomes 5. The ball is 14 pixels wide, so 232 is where its edge meets the side of the Stage.

Why not just use if on edge, bounce? It turns the sprite’s direction instead. Next lesson the bricks need vx and vy, and in Lesson 31 the paddle aims by changing vx. Two numbers we own are easier to control.

3 · The paddle

The paddle follows the mouse across the bottom of the Stage. It also posts its x into paddle x, because the ball needs to know where it is.

when flag clicked
go to x: (0) y: (-150)
forever
  set x to (mouse x)
  set [paddle x v] to (x position)
end
            

When the ball touches the paddle, flip vy so it goes up again. But only when it is coming down:

if <<touching [Paddle v]?> and <(vy) < (0)>> then
  set [vy v] to ((0) - (vy))
end
            

Why the vy < 0? Below, the paddle slides into a falling ball from the side. Without it, the ball is inside the paddle for many frames. It flips every frame and gets stuck. With it, the ball flips once and climbs out.

4 · A miss

If the ball falls below −170, the paddle missed. Take a life. Then the ball rides on the paddle for 15 frames, and serves again.

define serve
repeat (15)
  go to x: (paddle x) y: (-128)
end
set [vx v] to (4)
set [vy v] to (5)
              

if <(y position) < (-170)> then
  change [lives v] by (-1)
  if <(lives) = (0)> then
    say [Game over!]
    stop [this script v]
  end
  say (join [Missed! Lives: ] (lives)) for (0.5) seconds
  serve :: custom
end
              

Basic — a rally with three lives 25 min

Start a new project. You will build the rally from the Learnt yourself.

Step 1 — the arena and the cast

1. Choose a dark backdrop — a dark one makes every colour stand out. Delete the cat.
2. Add the Paddle from the library. Paint a Ball: a small white circle, about 14 pixels across.
3. Make four variables for all sprites: vx, vy, lives and paddle x. Tick lives so it shows on the Stage.

Step 2 — the paddle

Build the Paddle’s script from Learnt section 3.

Step 3 — two My Blocks on the Ball

1. Make a block called serve and build it as in Learnt section 4.
2. Make a block called walls holding the three wall checks. Leave both boxes unticked.

define walls
if <(x position) > (232)> then
  set [vx v] to ((0) - (vx))
end
if <(x position) < (-232)> then
  set [vx v] to ((0) - (vx))
end
if <(y position) > (172)> then
  set [vy v] to ((0) - (vy))
end
            

Step 4 — the ball

when flag clicked
set [lives v] to (3)
serve :: custom
forever
  change x by (vx)
  change y by (vy)
  walls :: custom
  if <<touching [Paddle v]?> and <(vy) < (0)>> then
    set [vy v] to ((0) - (vy))
  end
  if <(y position) < (-170)> then
    change [lives v] by (-1)
    if <(lives) = (0)> then
      say [Game over!]
      stop [this script v]
    end
    serve :: custom
  end
end
            

Keys, not the mouse

Some players like keys. Give them a paddle they can drive.

• ← moves the paddle left and → moves it right.
• It moves 8 steps each frame a key is held.
• The mouse does nothing any more.

when flag clicked
go to x: (0) y: (-150)
forever
  if <key (right arrow v) pressed?> then
    change x by (8)
  end
  if <key (left arrow v) pressed?> then
    change x by (-8)
  end
  set [paddle x v] to (x position)
end
            

Serve when you are ready

The ball leaves after 15 frames, ready or not. Let the player choose.

• After a miss, and at the start, the ball sits on the paddle.
• It moves with the paddle while it waits.
• The space bar sends it up.

define serve
repeat until <key (space v) pressed?>
  go to x: (paddle x) y: (-128)
end
set [vx v] to (3)
set [vy v] to (5)
            

A rally counter

Count how long a rally lasts, and remember the longest one.

• rally goes up by 1 each time the paddle hits the ball.
• A miss sets it back to 0.
• best keeps the highest rally so far.

if <<touching [Paddle v]?> and <(vy) < (0)>> then
  set [vy v] to ((0) - (vy))
  change [rally v] by (1)
  if <(rally) > (best)> then
    set [best v] to (rally)
  end
end
            

A ball with gravity

Turn the rally into keepy-uppy. The ball should fall like a real ball.

• Every frame, vy gets a little smaller — 0.25 smaller.
• The paddle kicks it: a hit sets vy to 9.
• The ball’s path is a curve, not a straight line.

change x by (vx)
change y by (vy)
change [vy v] by (-0.25)
if <<touching [Paddle v]?> and <(vy) < (0)>> then
  set [vy v] to (9)
end
            

Summary 5 min

• The ball is two numbers: vx across and vy up, added every frame.
• A wall flips one of them. The other one does not change.
• The paddle flips vy only while the ball is coming down.
• A miss costs a life, and the ball rides the paddle before it serves.

Velocity

A speed with a direction. vx is across; vy is up.

Flip the sign

Turn 5 into −5, or −5 into 5: (0) − (vx).

Serve

Putting the ball back into play after a miss.

Rally

Hits in a row without a miss.

Hand in

Save your rally. Next lesson it gets something to break: a wall of bricks, typed as letters in a list.