Snake I

Review — lists and grids you have used 5 min

• Tile Maker (Lessons 13–16) cut the Stage into 16 columns and 12 rows of 30 steps, and turned a column and row into an x and y.
• Quiz Engine (Lessons 37–40) kept a whole game’s data in lists, and added, inserted and deleted items.
• Today those two ideas meet. A snake is a list of cells on Tile Maker’s grid.

Quick-fire

In Tile Maker, which x is the middle of column 1? And of column 2?

Today’s Topic 3 min

• A head that steps one whole cell at a time
• Arrow keys that cannot turn the snake back into itself
• A queue: two lists, xs and ys, where the new head goes in at item 1 and the tail comes off the end
• Drawing the body by stamping one cell for every item

Learning outcome

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

1. Move a sprite on a grid by whole cells.
2. Use two lists in step as a queue: in at the front, out at the back.
3. Draw something long from a list, one stamp per item.

Learnt — a snake made of lists 28 min

1 · Steps, not glides

A snake jumps a whole cell at a time. Keep the head’s column in c and its row in r, and let a My Block turn them into x and y — the same sum Tile Maker used.

define go to cell (c) (r)
go to x: ((-225) + ((30) * ((c) - (1)))) y: ((165) - ((30) * ((r) - (1))))
            

when flag clicked
set [c v] to (3)
set [r v] to (6)
go to cell (c) (r) :: custom
repeat (10)
  wait (0.3) seconds
  change [c v] by (1)
  go to cell (c) (r) :: custom
end
            

2 · Steering, and the one turn you must refuse

The snake always moves. The keys only change which way. Keep the direction in two numbers: dx (columns per tick) and dy (rows per tick). Rows count down, so up is dy = −1.

define steer (way)
if <<(way) = [R]> and <not <(dx) = (-1)>>> then
  set [dx v] to (1)
  set [dy v] to (0)
  set [dir v] to (90)
end
if <<(way) = [L]> and <not <(dx) = (1)>>> then
  set [dx v] to (-1)
  set [dy v] to (0)
  set [dir v] to (-90)
end
if <<(way) = [U]> and <not <(dy) = (1)>>> then
  set [dx v] to (0)
  set [dy v] to (-1)
  set [dir v] to (0)
end
if <<(way) = [D]> and <not <(dy) = (-1)>>> then
  set [dx v] to (0)
  set [dy v] to (1)
  set [dir v] to (180)
end
            

when [right arrow v] key pressed
steer [R] :: custom

when [left arrow v] key pressed
steer [L] :: custom
            

3 · The queue: in at the front, off at the back

The body is two lists in step: xs holds the columns, ys the rows. Item 1 is the head; the last item is the tail. Each tick:

define step
set [c v] to ((item (1) of [xs v]) + (dx))
set [r v] to ((item (1) of [ys v]) + (dy))
insert (c) at (1) of [xs v]
insert (r) at (1) of [ys v]
delete (length of [xs v]) of [xs v]
delete (length of [ys v]) of [ys v]
            

4 · Drawing the body: one stamp per item

The Snake sprite is its own head. To draw the body it wipes the pen, walks the lists from item 2, and stamps a body costume on every cell. Then it switches back to the head and goes to item 1.

define draw
erase all
switch costume to [body v]
set [i v] to (2)
repeat ((length of [xs v]) - (1))
  go to cell (item (i) of [xs v]) (item (i) of [ys v]) :: custom
  stamp
  change [i v] by (1)
end
switch costume to [head v]
point in direction (dir)
go to cell (item (1) of [xs v]) (item (1) of [ys v]) :: custom
            

Basic — a snake you steer 25 min

Start a new project. Delete the cat.

Step 1 — the garden and the sprite

1. Save our backdrop, snake-garden.svg, and use Upload Backdrop. It is the 16 × 12 grid, in two greens.
2. Make a sprite called Snake and upload two costumes: head.svg and body.svg. Name them head and body.
3. Add the Pen extension. Make two lists, xs and ys, and the variables dx, dy, dir, c, r and i.

Step 2 — the My Blocks

1. Build go to cell, steer, step and draw from the Learnt sections.
2. Add the four arrow-key scripts.

Step 3 — the game loop

when flag clicked
delete all of [xs v]
delete all of [ys v]
add (5) to [xs v]
add (6) to [ys v]
add (4) to [xs v]
add (6) to [ys v]
add (3) to [xs v]
add (6) to [ys v]
add (2) to [xs v]
add (6) to [ys v]
set [dx v] to (1)
set [dy v] to (0)
set [dir v] to (90)
draw :: custom
forever
  wait (0.2) seconds
  step :: custom
  if <<<(item (1) of [xs v]) < (1)> or <(item (1) of [xs v]) > (16)>> or <<(item (1) of [ys v]) < (1)> or <(item (1) of [ys v]) > (12)>>> then
    say [Ouch - the edge! Click the green flag to play again.]
    stop [this script v]
  end
  draw :: custom
end
            

Speed keys

Let the player pick how fast the snake goes.

• Put the wait in a variable, gap.
• Key 1 sets it to 0.4 (slow), 2 to 0.2, 3 to 0.1 (fast).
• Say which speed you chose for a moment.

when [3 v] key pressed
set [gap v] to (0.1)
say [Fast!] for (0.6) seconds
            

Stripes and a tail

Give the snake stripes and a pointed tail, using only i — the item number being stamped.

• Upload body-light.svg and tail.svg as costumes.
• Even items stamp the light costume, odd items the normal one.
• The last item stamps the tail.

if <((i) mod (2)) = (0)> then
  switch costume to [body light v]
else
  switch costume to [body v]
end
if <(i) = (length of [xs v])> then
  switch costume to [tail v]
end
            

Wrap-around

Instead of stopping at the edge, the snake comes back on the other side.

• In step, after working out c and r: a column below 1 becomes 16, above 16 becomes 1.
• Do the same for rows with 12.
• Remove the edge check from the loop — there is no edge any more.

if <(c) < (1)> then
  set [c v] to (16)
end
if <(c) > (16)> then
  set [c v] to (1)
end
if <(r) < (1)> then
  set [r v] to (12)
end
if <(r) > (12)> then
  set [r v] to (1)
end
            

A snake that steers itself

No keys: the snake looks one cell ahead every tick and turns before it would leave the grid.

• Make a My Block look ahead. Work out the cell the head is about to move into.
• If that cell is off the grid, turn clockwise: right becomes down, down becomes left, and so on.
• Count the turns. Run it for 60 ticks.

define look ahead
if <<<((item (1) of [xs v]) + (dx)) < (1)> or <((item (1) of [xs v]) + (dx)) > (16)>> or <<((item (1) of [ys v]) + (dy)) < (1)> or <((item (1) of [ys v]) + (dy)) > (12)>>> then
  change [turns v] by (1)
  if <(dx) = (1)> then
    steer [D] :: custom
  else
    if <(dy) = (1)> then
      steer [L] :: custom
    else
      if <(dx) = (-1)> then
        steer [U] :: custom
      else
        steer [R] :: custom
      end
    end
  end
end
            

Summary 5 min

• A grid game moves by whole cells: a column and a row, turned into x and y by one My Block.
• The snake is two lists in step. A queue: insert the new head at item 1, delete the last item.
• Turning back into your own neck is refused before it happens.
• The body is drawn from the lists: one stamp per item, wiped and redrawn every tick.

Queue

A list where things go in at one end and come out at the other, in the same order.

Tick

One step of the game: move, check, draw.

Stamp

A Pen block that leaves a copy of the sprite’s picture on the Stage.

Hand in

Save your snake. Next lesson there is an apple — and eating it turns out to be one missing delete.