Bonus Project: Snake

What This Is

The game that came on every phone before phones were interesting. You steer a line around a grid, eating things. Every time you eat, you get longer, and the thing most likely to kill you becomes yourself.

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 20. Tables, going through a table, and math.random.

Two things here are new, and they are the two that make the whole game work:

table.insert(t, 1, value): Puts a value at the front of the table and shifts everything else along. This is the exam's INSERT, and it is how the snake grows a new head.
table.remove(t): Takes the last value off. This is the exam's REMOVE, and it is how the tail catches up.

A snake is those two calls and nothing else. Add a head, drop the tail, and the whole body appears to move without a single segment being told to.

Copy template-game and rename it bp-snake. 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. Think in cells, not pixels

Everything in this game lives on a grid. 40 columns, 30 rows, 20 pixels each. The snake's position is a column and a row, and you only turn that into pixels when you draw:

love.graphics.rectangle(
    "fill",
    (segX[i] - 1) * CELL + 1,
    (segY[i] - 1) * CELL + 1,
    CELL - 2,
    CELL - 2
)

The - 1 is there because column 1 draws at pixel 0, and the + 1 and - 2 leave a one-pixel gap so you can see the segments.

Start with segX = {5, 4, 3} and segY = {15, 15, 15}, and a loop that draws them. Three squares in a row. Nothing moves.

The whole file after stage 1:

1
local COLS = 40
2
local ROWS = 30
3
local CELL = 20
4

5
local segX = {5, 4, 3}
6
local segY = {15, 15, 15}
7

8
local foodX = 20
9
local foodY = 10
10

11
function love.draw()
12
    love.graphics.setColor(0.95, 0.4, 0.35)
13
    love.graphics.rectangle(
14
        "fill", (foodX - 1) * CELL, (foodY - 1) * CELL, CELL, CELL
15
    )
16

17
    love.graphics.setColor(0.4, 0.9, 0.5)
18
    for i = 1, #segX do
19
        love.graphics.rectangle(
20
            "fill",
21
            (segX[i] - 1) * CELL + 1,
22
            (segY[i] - 1) * CELL + 1,
23
            CELL - 2,
24
            CELL - 2
25
        )
26
    end
27
end
28

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

2. A clock, and a direction

A snake does not slide, it steps. Use the same timer idea as any turn-based thing: add dt to a total, and when it passes 0.12, take one step and reset it.

Two variables, dirX and dirY, hold which way it is going — one of them is 1 or −1 and the other is 0. The new head is the old head plus the direction.

The whole file after stage 2:

1
local COLS = 40
2
local ROWS = 30
3
local CELL = 20
4
local STEP = 0.12
5

6
local segX = {5, 4, 3}
7
local segY = {15, 15, 15}
8

9
local dirX = 1
10
local dirY = 0
11

12
local foodX = 20
13
local foodY = 10
14

15
local timer = 0
16

17
function love.update(dt)
18
    timer = timer + dt
19

20
    if timer < STEP then
21
        return
22
    end
23

24
    timer = 0
25

26
    segX[1] = segX[1] + dirX
27
    segY[1] = segY[1] + dirY
28
end
29

30
function love.draw()
31
    love.graphics.setColor(0.95, 0.4, 0.35)
32
    love.graphics.rectangle(
33
        "fill", (foodX - 1) * CELL, (foodY - 1) * CELL, CELL, CELL
34
    )
35

36
    love.graphics.setColor(0.4, 0.9, 0.5)
37
    for i = 1, #segX do
38
        love.graphics.rectangle(
39
            "fill",
40
            (segX[i] - 1) * CELL + 1,
41
            (segY[i] - 1) * CELL + 1,
42
            CELL - 2,
43
            CELL - 2
44
        )
45
    end
46
end
47

48
function love.keypressed(key)
49
    if key == "escape" then
50
        love.event.quit()
51
    end
52
end

3. Move by growing and shrinking

This is the whole game and it is nine lines:

table.insert(segX, 1, newX)
table.insert(segY, 1, newY)

if newX == foodX and newY == foodY then
    foodX = math.random(1, COLS)
    foodY = math.random(1, ROWS)
else
    table.remove(segX)
    table.remove(segY)
end

Always add a head. Only drop the tail if you did not eat. That single else is the difference between moving and growing, and there is no other growth code anywhere in the program.

Draw the food before this works. One square, a different color, at a random cell. Then eat it and watch the snake get one longer. If it gets longer every step, your else is in the wrong place.

The whole file after stage 3:

1
math.randomseed(os.time())
2

3
local COLS = 40
4
local ROWS = 30
5
local CELL = 20
6
local STEP = 0.12
7

8
local segX = {5, 4, 3}
9
local segY = {15, 15, 15}
10

11
local dirX = 1
12
local dirY = 0
13

14
local foodX = math.random(1, COLS)
15
local foodY = math.random(1, ROWS)
16

17
local timer = 0
18

19
function love.update(dt)
20
    timer = timer + dt
21

22
    if timer < STEP then
23
        return
24
    end
25

26
    timer = 0
27

28
    local newX = segX[1] + dirX
29
    local newY = segY[1] + dirY
30

31
    table.insert(segX, 1, newX)
32
    table.insert(segY, 1, newY)
33

34
    if newX == foodX and newY == foodY then
35
        foodX = math.random(1, COLS)
36
        foodY = math.random(1, ROWS)
37
    else
38
        table.remove(segX)
39
        table.remove(segY)
40
    end
41
end
42

43
function love.draw()
44
    love.graphics.setColor(0.95, 0.4, 0.35)
45
    love.graphics.rectangle(
46
        "fill", (foodX - 1) * CELL, (foodY - 1) * CELL, CELL, CELL
47
    )
48

49
    love.graphics.setColor(0.4, 0.9, 0.5)
50
    for i = 1, #segX do
51
        love.graphics.rectangle(
52
            "fill",
53
            (segX[i] - 1) * CELL + 1,
54
            (segY[i] - 1) * CELL + 1,
55
            CELL - 2,
56
            CELL - 2
57
        )
58
    end
59
end
60

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

4. Steering, and the reverse bug

if key == "up" and dirY == 0 then
    dirX = 0
    dirY = -1
end

The and dirY == 0 is not tidiness. Without it, a snake travelling down can be told to go up, which walks its head straight into its own neck and kills it instantly. Leave the check out once and try it — it is the fastest death in the project.

The whole file after stage 4:

1
math.randomseed(os.time())
2

3
local COLS = 40
4
local ROWS = 30
5
local CELL = 20
6
local STEP = 0.12
7

8
local segX = {5, 4, 3}
9
local segY = {15, 15, 15}
10

11
local dirX = 1
12
local dirY = 0
13

14
local foodX = math.random(1, COLS)
15
local foodY = math.random(1, ROWS)
16

17
local timer = 0
18

19
function love.update(dt)
20
    timer = timer + dt
21

22
    if timer < STEP then
23
        return
24
    end
25

26
    timer = 0
27

28
    local newX = segX[1] + dirX
29
    local newY = segY[1] + dirY
30

31
    table.insert(segX, 1, newX)
32
    table.insert(segY, 1, newY)
33

34
    if newX == foodX and newY == foodY then
35
        foodX = math.random(1, COLS)
36
        foodY = math.random(1, ROWS)
37
    else
38
        table.remove(segX)
39
        table.remove(segY)
40
    end
41
end
42

43
function love.draw()
44
    love.graphics.setColor(0.95, 0.4, 0.35)
45
    love.graphics.rectangle(
46
        "fill", (foodX - 1) * CELL, (foodY - 1) * CELL, CELL, CELL
47
    )
48

49
    love.graphics.setColor(0.4, 0.9, 0.5)
50
    for i = 1, #segX do
51
        love.graphics.rectangle(
52
            "fill",
53
            (segX[i] - 1) * CELL + 1,
54
            (segY[i] - 1) * CELL + 1,
55
            CELL - 2,
56
            CELL - 2
57
        )
58
    end
59
end
60

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

66
    if key == "left" and dirX == 0 then
67
        dirX = -1
68
        dirY = 0
69
    end
70

71
    if key == "right" and dirX == 0 then
72
        dirX = 1
73
        dirY = 0
74
    end
75

76
    if key == "up" and dirY == 0 then
77
        dirX = 0
78
        dirY = -1
79
    end
80

81
    if key == "down" and dirY == 0 then
82
        dirX = 0
83
        dirY = 1
84
    end
85
end

5. Dying

Two ways, and they are different kinds of check:

The wall. Four comparisons on the new head's column and row.
Yourself. A loop over every segment, asking whether the new head lands on it:

for i = 1, #segX do
    if segX[i] == newX and segY[i] == newY then
        -- you ate yourself
    end
end

Both send everything back to the starting three squares. Do that check before you insert the new head, or the head you are testing against is already in the table and every step is a collision.

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
math.randomseed(os.time())
2

3
local COLS = 40
4
local ROWS = 30
5
local CELL = 20
6
local STEP = 0.12
7

8
local segX = {5, 4, 3}
9
local segY = {15, 15, 15}
10

11
local dirX = 1
12
local dirY = 0
13

14
local foodX = math.random(1, COLS)
15
local foodY = math.random(1, ROWS)
16

17
local timer = 0
18

19
function love.update(dt)
20
    timer = timer + dt
21

22
    if timer < STEP then
23
        return
24
    end
25

26
    timer = 0
27

28
    local newX = segX[1] + dirX
29
    local newY = segY[1] + dirY
30

31
    if newX < 1 or newX > COLS or newY < 1 or newY > ROWS then
32
        segX = {5, 4, 3}
33
        segY = {15, 15, 15}
34
        dirX = 1
35
        dirY = 0
36
        return
37
    end
38

39
    for i = 1, #segX do
40
        if segX[i] == newX and segY[i] == newY then
41
            segX = {5, 4, 3}
42
            segY = {15, 15, 15}
43
            dirX = 1
44
            dirY = 0
45
            return
46
        end
47
    end
48

49
    table.insert(segX, 1, newX)
50
    table.insert(segY, 1, newY)
51

52
    if newX == foodX and newY == foodY then
53
        foodX = math.random(1, COLS)
54
        foodY = math.random(1, ROWS)
55
    else
56
        table.remove(segX)
57
        table.remove(segY)
58
    end
59
end
60

61
function love.draw()
62
    love.graphics.setColor(0.95, 0.4, 0.35)
63
    love.graphics.rectangle(
64
        "fill", (foodX - 1) * CELL, (foodY - 1) * CELL, CELL, CELL
65
    )
66

67
    love.graphics.setColor(0.4, 0.9, 0.5)
68
    for i = 1, #segX do
69
        love.graphics.rectangle(
70
            "fill",
71
            (segX[i] - 1) * CELL + 1,
72
            (segY[i] - 1) * CELL + 1,
73
            CELL - 2,
74
            CELL - 2
75
        )
76
    end
77
end
78

79
function love.keypressed(key)
80
    if key == "escape" then
81
        love.event.quit()
82
    end
83

84
    if key == "left" and dirX == 0 then
85
        dirX = -1
86
        dirY = 0
87
    end
88

89
    if key == "right" and dirX == 0 then
90
        dirX = 1
91
        dirY = 0
92
    end
93

94
    if key == "up" and dirY == 0 then
95
        dirX = 0
96
        dirY = -1
97
    end
98

99
    if key == "down" and dirY == 0 then
100
        dirX = 0
101
        dirY = 1
102
    end
103
end

What Success Looks Like

A black 800 by 600 window with a green snake eight segments long bending from horizontal to vertical, and a red food square to its right

Eight segments after five meals, mid-turn. Notice the corner. Nothing in the code knows about corners — the bend is what happens when you add a head in a new direction and keep dropping the tail.

Then Make It Yours

Score, and speed. Count the meals and shorten the step time as it goes up. A snake that gets faster is a much better game than one that only gets longer.
Do not put food inside the snake. Right now it can appear under your own body, which is unwinnable and looks like a bug because it is one. Keep picking until the cell is empty. This is the most valuable fix on the list.
A head that looks like a head. Draw segment 1 in a different color. One if inside the drawing loop.
Wrap instead of dying at the wall. Leave the right edge, come back on the left. Then decide which version you would rather play, and say why.
Buffer the turn. Press two directions faster than one step and the first one is lost. Remember the next direction instead of applying it immediately. This is what makes commercial versions feel responsive, and it is one extra variable.

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.