Bonus Project: Breakout

What This Is

Fifty bricks, one ball, and a paddle you are not fast enough for. It is Pong with something to knock down, and it is the last project of the quarter because it needs every tool you have: tables to hold the bricks, a loop to test them, and functions so the whole thing fits on a screen you can read.

This is extra credit and it is optional. Nothing later in the course depends on it. It exists because you finished early, or because you want to build something you can show somebody.

Before You Start

You need everything through session 23. Tables, loops, collision, functions with parameters, and functions that hand a value back.

Nothing here is new. Every call in this project is one you have already used — what is new is how much of it there is at once. This is the project where writing functions stops being a lesson and starts being self-defense.

Do Pong first if you have not. A paddle, a ball, and bouncing are all easier to get right without fifty bricks in the way, and you can copy most of it across.

Copy template-game and rename it bp-breakout. No new files, no libraries, nothing to install.

Build It

Five stages, and the whole file is printed at the end of every one. Run it after each stage — a stage that works is worth more than three stages you cannot test.

Type it rather than pasting it. The reading you do on the way is the whole point, and pasting skips all of it. When something breaks, the listing at the end of the stage is what your file should look like.

1. Paddle and ball

A paddle near the bottom moved with Left and Right, clamped to the window. A ball with an x, a y, and a direction on each axis. Bounce it off the left, right and top walls, and off the paddle.

If the ball goes past the bottom, take a life and put it back in the middle. You now have a one-player Pong, and it already runs.

The whole file after stage 1:

1
local paddleX = 350
2
local paddleY = 560
3
local paddleW = 110
4
local paddleH = 14
5

6
local ballX = 400
7
local ballY = 430
8
local ballDX = 230
9
local ballDY = -280
10
local ballR = 8
11

12
local lives = 3
13

14
function love.update(dt)
15
    if love.keyboard.isDown("left") then
16
        paddleX = paddleX - 500 * dt
17
    end
18

19
    if love.keyboard.isDown("right") then
20
        paddleX = paddleX + 500 * dt
21
    end
22

23
    if paddleX < 0 then
24
        paddleX = 0
25
    end
26

27
    if paddleX + paddleW > 800 then
28
        paddleX = 800 - paddleW
29
    end
30

31
    ballX = ballX + ballDX * dt
32
    ballY = ballY + ballDY * dt
33

34
    if ballX - ballR < 0 or ballX + ballR > 800 then
35
        ballDX = -ballDX
36
    end
37

38
    if ballY - ballR < 0 then
39
        ballDY = -ballDY
40
    end
41

42
    local onPaddle = ballX + ballR > paddleX
43
        and ballX - ballR < paddleX + paddleW
44
        and ballY + ballR > paddleY
45
        and ballY - ballR < paddleY + paddleH
46

47
    if onPaddle and ballDY > 0 then
48
        ballDY = -ballDY
49
    end
50

51
    if ballY > 620 then
52
        lives = lives - 1
53
        ballX = 400
54
        ballY = 430
55
        ballDY = -280
56
    end
57
end
58

59
function love.draw()
60
    love.graphics.setColor(1, 1, 1)
61
    love.graphics.rectangle("fill", paddleX, paddleY, paddleW, paddleH)
62
    love.graphics.circle("fill", ballX, ballY, ballR)
63
end
64

65
function love.keypressed(key)
66
    if key == "escape" then
67
        love.event.quit()
68
    end
69
end

2. One function you will use six times

Everything in this game is a rectangle the ball might be touching. Write that once:

local function overlapsBall(x, y, w, h)
    return ballX + ballR > x
        and ballX - ballR < x + w
        and ballY + ballR > y
        and ballY - ballR < y + h
end

Note what it does not take: the ball. It reads the ball's position from the variables at the top of the file, and takes only the thing being tested. That is a deliberate choice, it makes every call short, and it is also the reason this function could not be moved into another program unchanged. Worth knowing which trade you made.

Use it for the paddle straight away. If the paddle still works, the function is right and fifty bricks will not surprise you.

The whole file after stage 2:

1
local paddleX = 350
2
local paddleY = 560
3
local paddleW = 110
4
local paddleH = 14
5

6
local ballX = 400
7
local ballY = 430
8
local ballDX = 230
9
local ballDY = -280
10
local ballR = 8
11

12
local lives = 3
13

14
local function overlapsBall(x, y, w, h)
15
    return ballX + ballR > x
16
        and ballX - ballR < x + w
17
        and ballY + ballR > y
18
        and ballY - ballR < y + h
19
end
20

21
function love.update(dt)
22
    if love.keyboard.isDown("left") then
23
        paddleX = paddleX - 500 * dt
24
    end
25

26
    if love.keyboard.isDown("right") then
27
        paddleX = paddleX + 500 * dt
28
    end
29

30
    if paddleX < 0 then
31
        paddleX = 0
32
    end
33

34
    if paddleX + paddleW > 800 then
35
        paddleX = 800 - paddleW
36
    end
37

38
    ballX = ballX + ballDX * dt
39
    ballY = ballY + ballDY * dt
40

41
    if ballX - ballR < 0 or ballX + ballR > 800 then
42
        ballDX = -ballDX
43
    end
44

45
    if ballY - ballR < 0 then
46
        ballDY = -ballDY
47
    end
48

49
    if overlapsBall(paddleX, paddleY, paddleW, paddleH) and ballDY > 0 then
50
        ballDY = -ballDY
51
    end
52

53
    if ballY > 620 then
54
        lives = lives - 1
55
        ballX = 400
56
        ballY = 430
57
        ballDY = -280
58
    end
59
end
60

61
function love.draw()
62
    love.graphics.setColor(1, 1, 1)
63
    love.graphics.rectangle("fill", paddleX, paddleY, paddleW, paddleH)
64
    love.graphics.circle("fill", ballX, ballY, ballR)
65
end
66

67
function love.keypressed(key)
68
    if key == "escape" then
69
        love.event.quit()
70
    end
71
end

3. Build the wall

Four tables, filled by nested loops — x, y, row and whether it is still there:

local function makeBricks()
    for row = 1, ROWS do
        for col = 1, COLS do
            table.insert(brickX, 44 + (col - 1) * (BW + 8))
            table.insert(brickY, 60 + (row - 1) * (BH + 8))
            table.insert(brickRow, row)
            table.insert(brickAlive, true)
        end
    end
end

10 columns of 64 pixels with 8-pixel gaps is 712 wide, so 44 either side centers it in an 800-pixel window. Work that out rather than nudging the number until it looks right — when you change the brick count later, arithmetic survives and nudging does not.

Draw them, all one color, and stop. Fifty rectangles on screen and the ball passing straight through them is a correct stage 3.

The whole file after stage 3:

1
local COLS = 10
2
local ROWS = 5
3
local BW = 64
4
local BH = 24
5

6
local paddleX = 350
7
local paddleY = 560
8
local paddleW = 110
9
local paddleH = 14
10

11
local ballX = 400
12
local ballY = 430
13
local ballDX = 230
14
local ballDY = -280
15
local ballR = 8
16

17
local brickX = {}
18
local brickY = {}
19
local brickRow = {}
20
local brickAlive = {}
21

22
local score = 0
23
local lives = 3
24

25
local function makeBricks()
26
    for row = 1, ROWS do
27
        for col = 1, COLS do
28
            table.insert(brickX, 44 + (col - 1) * (BW + 8))
29
            table.insert(brickY, 60 + (row - 1) * (BH + 8))
30
            table.insert(brickRow, row)
31
            table.insert(brickAlive, true)
32
        end
33
    end
34
end
35

36
local function overlapsBall(x, y, w, h)
37
    return ballX + ballR > x
38
        and ballX - ballR < x + w
39
        and ballY + ballR > y
40
        and ballY - ballR < y + h
41
end
42

43
makeBricks()
44

45
function love.update(dt)
46
    if love.keyboard.isDown("left") then
47
        paddleX = paddleX - 500 * dt
48
    end
49

50
    if love.keyboard.isDown("right") then
51
        paddleX = paddleX + 500 * dt
52
    end
53

54
    if paddleX < 0 then
55
        paddleX = 0
56
    end
57

58
    if paddleX + paddleW > 800 then
59
        paddleX = 800 - paddleW
60
    end
61

62
    ballX = ballX + ballDX * dt
63
    ballY = ballY + ballDY * dt
64

65
    if ballX - ballR < 0 or ballX + ballR > 800 then
66
        ballDX = -ballDX
67
    end
68

69
    if ballY - ballR < 0 then
70
        ballDY = -ballDY
71
    end
72

73
    if overlapsBall(paddleX, paddleY, paddleW, paddleH) and ballDY > 0 then
74
        ballDY = -ballDY
75
    end
76

77
    if ballY > 620 then
78
        lives = lives - 1
79
        ballX = 400
80
        ballY = 430
81
        ballDY = -280
82
    end
83
end
84

85
function love.draw()
86
    for i = 1, #brickX do
87
        if brickAlive[i] then
88
            love.graphics.setColor(0.5, 0.6, 0.9)
89
            love.graphics.rectangle("fill", brickX[i], brickY[i], BW, BH)
90
        end
91
    end
92

93
    love.graphics.setColor(1, 1, 1)
94
    love.graphics.rectangle("fill", paddleX, paddleY, paddleW, paddleH)
95
    love.graphics.circle("fill", ballX, ballY, ballR)
96
end
97

98
function love.keypressed(key)
99
    if key == "escape" then
100
        love.event.quit()
101
    end
102
end

4. Break them

for i = 1, #brickX do
    if brickAlive[i] and overlapsBall(brickX[i], brickY[i], BW, BH) then
        brickAlive[i] = false
        ballDY = -ballDY
        score = score + 1
    end
end

Bricks are never deleted from the table. They are marked dead, and both the drawing loop and this one skip them. Removing them would renumber everything after them mid-loop, which is a genuinely nasty bug and one you do not need today.

There is a bug in that code and you should keep it for now. If the ball clips two bricks in the same frame, ballDY flips twice and the ball carries on as though nothing happened — two bricks gone, no bounce. Play until you see it, then decide how to fix it. Stopping after the first hit is the easy way; working out whether the ball hit the side or the face of the brick is the real way.

The whole file after stage 4:

1
local COLS = 10
2
local ROWS = 5
3
local BW = 64
4
local BH = 24
5

6
local paddleX = 350
7
local paddleY = 560
8
local paddleW = 110
9
local paddleH = 14
10

11
local ballX = 400
12
local ballY = 430
13
local ballDX = 230
14
local ballDY = -280
15
local ballR = 8
16

17
local brickX = {}
18
local brickY = {}
19
local brickRow = {}
20
local brickAlive = {}
21

22
local score = 0
23
local lives = 3
24

25
local function makeBricks()
26
    for row = 1, ROWS do
27
        for col = 1, COLS do
28
            table.insert(brickX, 44 + (col - 1) * (BW + 8))
29
            table.insert(brickY, 60 + (row - 1) * (BH + 8))
30
            table.insert(brickRow, row)
31
            table.insert(brickAlive, true)
32
        end
33
    end
34
end
35

36
local function overlapsBall(x, y, w, h)
37
    return ballX + ballR > x
38
        and ballX - ballR < x + w
39
        and ballY + ballR > y
40
        and ballY - ballR < y + h
41
end
42

43
makeBricks()
44

45
function love.update(dt)
46
    if love.keyboard.isDown("left") then
47
        paddleX = paddleX - 500 * dt
48
    end
49

50
    if love.keyboard.isDown("right") then
51
        paddleX = paddleX + 500 * dt
52
    end
53

54
    if paddleX < 0 then
55
        paddleX = 0
56
    end
57

58
    if paddleX + paddleW > 800 then
59
        paddleX = 800 - paddleW
60
    end
61

62
    ballX = ballX + ballDX * dt
63
    ballY = ballY + ballDY * dt
64

65
    if ballX - ballR < 0 or ballX + ballR > 800 then
66
        ballDX = -ballDX
67
    end
68

69
    if ballY - ballR < 0 then
70
        ballDY = -ballDY
71
    end
72

73
    if overlapsBall(paddleX, paddleY, paddleW, paddleH) and ballDY > 0 then
74
        ballDY = -ballDY
75
    end
76

77
    for i = 1, #brickX do
78
        if brickAlive[i] and overlapsBall(brickX[i], brickY[i], BW, BH) then
79
            brickAlive[i] = false
80
            ballDY = -ballDY
81
            score = score + 1
82
        end
83
    end
84

85
    if ballY > 620 then
86
        lives = lives - 1
87
        ballX = 400
88
        ballY = 430
89
        ballDY = -280
90
    end
91
end
92

93
function love.draw()
94
    for i = 1, #brickX do
95
        if brickAlive[i] then
96
            love.graphics.setColor(0.5, 0.6, 0.9)
97
            love.graphics.rectangle("fill", brickX[i], brickY[i], BW, BH)
98
        end
99
    end
100

101
    love.graphics.setColor(1, 1, 1)
102
    love.graphics.rectangle("fill", paddleX, paddleY, paddleW, paddleH)
103
    love.graphics.circle("fill", ballX, ballY, ballR)
104
end
105

106
function love.keypressed(key)
107
    if key == "escape" then
108
        love.event.quit()
109
    end
110
end

5. Color by row

local function rowColor(row)
    if row == 1 then
        return 0.95, 0.35, 0.35
    elseif row == 2 then
        return 0.95, 0.65, 0.3
    elseif row == 3 then
        return 0.95, 0.9, 0.35
    elseif row == 4 then
        return 0.4, 0.9, 0.5
    else
        return 0.4, 0.7, 0.95
    end
end

A function that takes a row and hands back three numbers, which setColor takes directly. Session 22 said a function returns a value; it can return several, and this is the tidiest use of that you will meet all quarter.

The Whole Program

Every stage above, finished and in one piece. This is the exact file the picture below came from — nothing is left out and nothing is abbreviated.

1
local COLS = 10
2
local ROWS = 5
3
local BW = 64
4
local BH = 24
5

6
local paddleX = 350
7
local paddleY = 560
8
local paddleW = 110
9
local paddleH = 14
10

11
local ballX = 400
12
local ballY = 430
13
local ballDX = 230
14
local ballDY = -280
15
local ballR = 8
16

17
local brickX = {}
18
local brickY = {}
19
local brickRow = {}
20
local brickAlive = {}
21

22
local score = 0
23
local lives = 3
24

25
local function makeBricks()
26
    for row = 1, ROWS do
27
        for col = 1, COLS do
28
            table.insert(brickX, 44 + (col - 1) * (BW + 8))
29
            table.insert(brickY, 60 + (row - 1) * (BH + 8))
30
            table.insert(brickRow, row)
31
            table.insert(brickAlive, true)
32
        end
33
    end
34
end
35

36
local function overlapsBall(x, y, w, h)
37
    return ballX + ballR > x
38
        and ballX - ballR < x + w
39
        and ballY + ballR > y
40
        and ballY - ballR < y + h
41
end
42

43
local function rowColor(row)
44
    if row == 1 then
45
        return 0.95, 0.35, 0.35
46
    elseif row == 2 then
47
        return 0.95, 0.65, 0.3
48
    elseif row == 3 then
49
        return 0.95, 0.9, 0.35
50
    elseif row == 4 then
51
        return 0.4, 0.9, 0.5
52
    else
53
        return 0.4, 0.7, 0.95
54
    end
55
end
56

57
makeBricks()
58

59
function love.update(dt)
60
    if love.keyboard.isDown("left") then
61
        paddleX = paddleX - 500 * dt
62
    end
63

64
    if love.keyboard.isDown("right") then
65
        paddleX = paddleX + 500 * dt
66
    end
67

68
    if paddleX < 0 then
69
        paddleX = 0
70
    end
71

72
    if paddleX + paddleW > 800 then
73
        paddleX = 800 - paddleW
74
    end
75

76
    ballX = ballX + ballDX * dt
77
    ballY = ballY + ballDY * dt
78

79
    if ballX - ballR < 0 or ballX + ballR > 800 then
80
        ballDX = -ballDX
81
    end
82

83
    if ballY - ballR < 0 then
84
        ballDY = -ballDY
85
    end
86

87
    if overlapsBall(paddleX, paddleY, paddleW, paddleH) and ballDY > 0 then
88
        ballDY = -ballDY
89
    end
90

91
    for i = 1, #brickX do
92
        if brickAlive[i] and overlapsBall(brickX[i], brickY[i], BW, BH) then
93
            brickAlive[i] = false
94
            ballDY = -ballDY
95
            score = score + 1
96
        end
97
    end
98

99
    if ballY > 620 then
100
        lives = lives - 1
101
        ballX = 400
102
        ballY = 430
103
        ballDY = -280
104
    end
105
end
106

107
function love.draw()
108
    for i = 1, #brickX do
109
        if brickAlive[i] then
110
            love.graphics.setColor(rowColor(brickRow[i]))
111
            love.graphics.rectangle("fill", brickX[i], brickY[i], BW, BH)
112
        end
113
    end
114

115
    love.graphics.setColor(1, 1, 1)
116
    love.graphics.rectangle("fill", paddleX, paddleY, paddleW, paddleH)
117
    love.graphics.circle("fill", ballX, ballY, ballR)
118
end
119

120
function love.keypressed(key)
121
    if key == "escape" then
122
        love.event.quit()
123
    end
124
end

What Success Looks Like

A black 800 by 600 window with five rows of colored bricks at the top, one brick missing from the blue row, a white ball just below the bricks, and a white paddle at the bottom

Five rows, ten columns, one brick already gone and the ball on its way back down. The colors come from one function and one number — the row the brick was built in, stored at the same index as its position.

Then Make It Yours

Fix the double-hit. The warning above. Start by stopping after the first brick, then decide whether that is good enough.
Steer with the paddle. Bounce the ball off at an angle that depends on where it hit — edges send it wide, the middle sends it straight. This is the single change that turns it from a demo into a game, because it makes the player responsible for where the ball goes.
Win. Count the live bricks. At zero, say so. A loop and a counter.
Bricks worth different amounts. The row is already stored. Top rows score more, and the score is worth drawing.
Bricks that take two hits. Store a number instead of a true or false, and draw the damaged ones darker.
Speed up as the wall clears. Then find out whether that makes it better or just annoying. There is a right answer and it is not obvious.

The walkthrough is not the submission. Getting the program running earns the credit; what you change afterward is what makes it worth reading. Hand in the folder and a sentence saying what you added, or what broke and what you did about it.