Bonus Project: Pong

What This Is

A real two-player game, on one keyboard. Two paddles, a ball that speeds around the screen, and a score that goes up. It is the oldest video game worth building and it is still fun to play against someone sitting next to you.

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 14. Specifically: variables, love.update(dt), if statements, keyboard input, and collision as a condition. If you have not done session 14 yet, come back — you would be guessing, and that is not what this is for.

One thing here is new. Drawing text on the screen:

love.graphics.print(leftScore .. "   " .. rightScore, 380, 30)

love.graphics.print takes the text, then an x and a y. That is the whole thing. It is the same .. you already use to join text together.

Copy template-game and rename it bp-pong. 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. Two paddles that move

Draw two tall thin rectangles, one near each side. Give each one a variable for its y position. Then move them: W and S for the left paddle, Up and Down for the right.

You need a kind of key check you have not used yet. love.keypressed fires once when a key goes down, which is wrong here — a paddle should keep moving while the key is held:

if love.keyboard.isDown("w") then
    leftY = leftY - 300 * dt
end

That goes in love.update, and the dt is what makes the paddle move at the same speed on every computer.

The whole file after stage 1:

1
local leftY = 250
2
local rightY = 250
3
local paddleW = 16
4
local paddleH = 100
5
local paddleSpeed = 400
6

7
function love.update(dt)
8
    if love.keyboard.isDown("w") then
9
        leftY = leftY - paddleSpeed * dt
10
    end
11

12
    if love.keyboard.isDown("s") then
13
        leftY = leftY + paddleSpeed * dt
14
    end
15

16
    if love.keyboard.isDown("up") then
17
        rightY = rightY - paddleSpeed * dt
18
    end
19

20
    if love.keyboard.isDown("down") then
21
        rightY = rightY + paddleSpeed * dt
22
    end
23
end
24

25
function love.draw()
26
    love.graphics.setColor(1, 1, 1)
27
    love.graphics.rectangle("fill", 20, leftY, paddleW, paddleH)
28
    love.graphics.rectangle("fill", 764, rightY, paddleW, paddleH)
29
end
30

31
function love.keypressed(key)
32
    if key == "escape" then
33
        love.event.quit()
34
    end
35
end

2. A ball that moves on its own

One variable for the ball's x, one for its y, and one for each direction it is traveling in — call them something like ballDX and ballDY. Every frame, add each direction to its position.

The whole file after stage 2:

1
local leftY = 250
2
local rightY = 250
3
local paddleW = 16
4
local paddleH = 100
5
local paddleSpeed = 400
6

7
local ballX = 400
8
local ballY = 300
9
local ballDX = 260
10
local ballDY = 190
11
local ballR = 9
12

13
function love.update(dt)
14
    if love.keyboard.isDown("w") then
15
        leftY = leftY - paddleSpeed * dt
16
    end
17

18
    if love.keyboard.isDown("s") then
19
        leftY = leftY + paddleSpeed * dt
20
    end
21

22
    if love.keyboard.isDown("up") then
23
        rightY = rightY - paddleSpeed * dt
24
    end
25

26
    if love.keyboard.isDown("down") then
27
        rightY = rightY + paddleSpeed * dt
28
    end
29

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

34
function love.draw()
35
    love.graphics.setColor(1, 1, 1)
36
    love.graphics.rectangle("fill", 20, leftY, paddleW, paddleH)
37
    love.graphics.rectangle("fill", 764, rightY, paddleW, paddleH)
38
    love.graphics.circle("fill", ballX, ballY, ballR)
39
end
40

41
function love.keypressed(key)
42
    if key == "escape" then
43
        love.event.quit()
44
    end
45
end

3. Bounce off the top and bottom

When the ball reaches an edge, flip the direction it is moving vertically:

if ballY < 10 then
    ballDY = -ballDY
end

That minus sign is the whole trick. Going down becomes going up. Do the same at the bottom of the screen.

The whole file after stage 3:

1
local leftY = 250
2
local rightY = 250
3
local paddleW = 16
4
local paddleH = 100
5
local paddleSpeed = 400
6

7
local ballX = 400
8
local ballY = 300
9
local ballDX = 260
10
local ballDY = 190
11
local ballR = 9
12

13
function love.update(dt)
14
    if love.keyboard.isDown("w") then
15
        leftY = leftY - paddleSpeed * dt
16
    end
17

18
    if love.keyboard.isDown("s") then
19
        leftY = leftY + paddleSpeed * dt
20
    end
21

22
    if love.keyboard.isDown("up") then
23
        rightY = rightY - paddleSpeed * dt
24
    end
25

26
    if love.keyboard.isDown("down") then
27
        rightY = rightY + paddleSpeed * dt
28
    end
29

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

33
    if ballY - ballR < 0 then
34
        ballY = ballR
35
        ballDY = -ballDY
36
    end
37

38
    if ballY + ballR > 600 then
39
        ballY = 600 - ballR
40
        ballDY = -ballDY
41
    end
42
end
43

44
function love.draw()
45
    love.graphics.setColor(1, 1, 1)
46
    love.graphics.rectangle("fill", 20, leftY, paddleW, paddleH)
47
    love.graphics.rectangle("fill", 764, rightY, paddleW, paddleH)
48
    love.graphics.circle("fill", ballX, ballY, ballR)
49
end
50

51
function love.keypressed(key)
52
    if key == "escape" then
53
        love.event.quit()
54
    end
55
end

4. Bounce off the paddles

This is the hard one, and it is the reason this project comes after session 14. The ball bounces off the left paddle when two things are true at once: it has reached the paddle's x, and its y is between the top and bottom of that paddle. Flip ballDX when both hold.

Get this wrong in the easy way and the ball bounces off the whole left wall. That is worth seeing once before you fix it — it tells you exactly which half of the condition you are missing.

The whole file after stage 4:

1
local leftY = 250
2
local rightY = 250
3
local paddleW = 16
4
local paddleH = 100
5
local paddleSpeed = 400
6

7
local ballX = 400
8
local ballY = 300
9
local ballDX = 260
10
local ballDY = 190
11
local ballR = 9
12

13
function love.update(dt)
14
    if love.keyboard.isDown("w") then
15
        leftY = leftY - paddleSpeed * dt
16
    end
17

18
    if love.keyboard.isDown("s") then
19
        leftY = leftY + paddleSpeed * dt
20
    end
21

22
    if love.keyboard.isDown("up") then
23
        rightY = rightY - paddleSpeed * dt
24
    end
25

26
    if love.keyboard.isDown("down") then
27
        rightY = rightY + paddleSpeed * dt
28
    end
29

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

33
    if ballY - ballR < 0 then
34
        ballY = ballR
35
        ballDY = -ballDY
36
    end
37

38
    if ballY + ballR > 600 then
39
        ballY = 600 - ballR
40
        ballDY = -ballDY
41
    end
42

43
    if ballX - ballR < 20 + paddleW
44
        and ballY > leftY
45
        and ballY < leftY + paddleH then
46
        ballDX = -ballDX
47
    end
48

49
    if ballX + ballR > 764
50
        and ballY > rightY
51
        and ballY < rightY + paddleH then
52
        ballDX = -ballDX
53
    end
54
end
55

56
function love.draw()
57
    love.graphics.setColor(1, 1, 1)
58
    love.graphics.rectangle("fill", 20, leftY, paddleW, paddleH)
59
    love.graphics.rectangle("fill", 764, rightY, paddleW, paddleH)
60
    love.graphics.circle("fill", ballX, ballY, ballR)
61
end
62

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

5. Score

If the ball goes off the left side, the right player scores. Add one to their score, put the ball back in the middle, and keep playing. Draw both scores at the top with love.graphics.print.

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 leftY = 250
2
local rightY = 250
3
local paddleW = 16
4
local paddleH = 100
5
local paddleSpeed = 400
6

7
local ballX = 400
8
local ballY = 300
9
local ballDX = 260
10
local ballDY = 190
11
local ballR = 9
12

13
local leftScore = 0
14
local rightScore = 0
15

16
local function resetBall()
17
    ballX = 400
18
    ballY = 300
19
end
20

21
function love.update(dt)
22
    if love.keyboard.isDown("w") then
23
        leftY = leftY - paddleSpeed * dt
24
    end
25

26
    if love.keyboard.isDown("s") then
27
        leftY = leftY + paddleSpeed * dt
28
    end
29

30
    if love.keyboard.isDown("up") then
31
        rightY = rightY - paddleSpeed * dt
32
    end
33

34
    if love.keyboard.isDown("down") then
35
        rightY = rightY + paddleSpeed * dt
36
    end
37

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

41
    if ballY - ballR < 0 then
42
        ballY = ballR
43
        ballDY = -ballDY
44
    end
45

46
    if ballY + ballR > 600 then
47
        ballY = 600 - ballR
48
        ballDY = -ballDY
49
    end
50

51
    if ballX - ballR < 20 + paddleW
52
        and ballY > leftY
53
        and ballY < leftY + paddleH then
54
        ballDX = -ballDX
55
    end
56

57
    if ballX + ballR > 764
58
        and ballY > rightY
59
        and ballY < rightY + paddleH then
60
        ballDX = -ballDX
61
    end
62

63
    if ballX < 0 then
64
        rightScore = rightScore + 1
65
        resetBall()
66
    end
67

68
    if ballX > 800 then
69
        leftScore = leftScore + 1
70
        resetBall()
71
    end
72
end
73

74
function love.draw()
75
    love.graphics.setColor(1, 1, 1)
76
    love.graphics.rectangle("fill", 20, leftY, paddleW, paddleH)
77
    love.graphics.rectangle("fill", 764, rightY, paddleW, paddleH)
78
    love.graphics.circle("fill", ballX, ballY, ballR)
79
    love.graphics.print(leftScore .. "   " .. rightScore, 380, 30)
80
end
81

82
function love.keypressed(key)
83
    if key == "escape" then
84
        love.event.quit()
85
    end
86
end

What Success Looks Like

A black 800 by 600 window with a white paddle at the left edge, a white paddle at the right edge, a white ball below and right of center, and the score zero zero at the top

Both paddles move while their keys are held. The ball bounces off the top, the bottom, and both paddles, and the rally can go on as long as both players keep up. When someone misses, the score changes and the ball restarts in the middle.

Then Make It Yours

Stop the paddles leaving the screen. Right now they slide straight off the top if you hold the key. One condition each.
Speed the ball up on every hit. A rally that gets harder is a much better game than one that does not.
Fix the sticky paddle. Hit the very edge of a paddle and the ball can flip direction several frames in a row, so it shudders instead of bouncing. Work out why, then fix it. This is a real bug in real games, and finding it yourself is worth more than the rest of this list.
Play to eleven. Stop the game and say who won.
Make it a one-player game. Move the right paddle toward the ball automatically. Then make it beatable, which is harder than making it good.

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.