import s2d.core.*
import s2d.shapes.*
import s2d.types.*

val cellSize     = 20
val columns      = 20
val rows         = 20
val gameW        = columns * cellSize
val gameH        = rows    * cellSize
val scoreBarH    = 60
val moveInterval = 0.15

def offsetX: Int = (Window.width  - gameW) / 2
def offsetY: Int = (Window.height - gameH) / 2 + scoreBarH / 2

enum Direction:
  case Up, Down, Left, Right

enum GameState:
  case Playing, GameOver

case class Cell(col: Int, row: Int)

def cellToPixel(cell: Cell): (Float, Float) =
  (offsetX.toFloat + cell.col * cellSize, offsetY.toFloat + cell.row * cellSize)

def randomFood(snake: List[Cell]): Cell =
  val free = for
    c <- 0 until columns
    r <- 0 until rows
    cell = Cell(c, r)
    if !snake.contains(cell)
  yield cell
  free(Random.int(0, free.length - 1))

def initialSnake: List[Cell] =
  List(Cell(10, 10), Cell(9, 10), Cell(8, 10))

@main
def main(): Unit =
  val screenW = gameW + 40
  val screenH = gameH + scoreBarH + 20

  Window.create(screenW, screenH, "S2D Snake")
  Input.setExitKey(Key.Escape)
  Timing.setTargetFPS(60)

  var snake         = initialSnake
  var direction     = Direction.Right
  var nextDirection = Direction.Right
  var moveTimer     = 0.0
  var food          = randomFood(snake)
  var state         = GameState.Playing

  while Window.isOpen() do
    Drawing.beginFrame()
    Drawing.clear(Color.Black)

    state match
      case GameState.Playing =>
        if      Input.isKeyPressed(Key.Up)    && direction != Direction.Down  then nextDirection = Direction.Up
        else if Input.isKeyPressed(Key.Down)  && direction != Direction.Up    then nextDirection = Direction.Down
        else if Input.isKeyPressed(Key.Left)  && direction != Direction.Right then nextDirection = Direction.Left
        else if Input.isKeyPressed(Key.Right) && direction != Direction.Left  then nextDirection = Direction.Right

        moveTimer += Timing.delta

        if moveTimer >= moveInterval then
          moveTimer = 0.0
          direction = nextDirection

          val head = snake.head
          val next = direction match
            case Direction.Up    => Cell(head.col,     head.row - 1)
            case Direction.Down  => Cell(head.col,     head.row + 1)
            case Direction.Left  => Cell(head.col - 1, head.row    )
            case Direction.Right => Cell(head.col + 1, head.row    )

          val hitWall    = next.col < 0 || next.col >= columns || next.row < 0 || next.row >= rows
          val ate        = next == food
          val bodyToCheck = if ate then snake else snake.init
          val hitSelf    = bodyToCheck.contains(next)

          if hitWall || hitSelf then
            state = GameState.GameOver
          else
            snake = if ate then next :: snake else next :: snake.init
            if ate then food = randomFood(snake)

        drawArena()
        drawFood(food)
        drawSnake(snake)

      case GameState.GameOver =>
        drawArena()
        drawFood(food)
        drawSnake(snake)

    Drawing.endFrame()

  Window.close()

def drawArena(): Unit =
  Basics.rectangleOutline(offsetX, offsetY, gameW, gameH, Color.White)

def drawSnake(snake: List[Cell]): Unit =
  snake.zipWithIndex.foreach: (cell, index) =>
    val (x, y) = cellToPixel(cell)
    val color  = if index == 0 then Color.Lime else Color.Green
    Basics.rectangle(x.toInt, y.toInt, cellSize, cellSize, color)

def drawFood(food: Cell): Unit =
  val (x, y) = cellToPixel(food)
  Basics.rectangle(x.toInt, y.toInt, cellSize, cellSize, Color.Red)

If you haven’t read Day 6, I’d recommend doing that first.

Summary for today

• A new import: s2d.font

• New class: SnakeGame

• Font handling (loading/unloading)

• New functions: drawScore & drawGameOver

• Restart logic

The font

Before writing any code, we need a font file. S2D uses “stb_truetype” in the backend to handle fonts, so we need to download a “.ttf” file.

Go to Google Fonts and download Roboto.
From the .zip file, take the file “Robot-Regular.ttf” and place it inside the “assets/” folder of your project.

The project structure should look something like this:

snake-game/
  assets/
    font.ttf
  project.scala
  main.scala

I’d recommend renaming the file to something like “font.ttf” to keep it simple.

Final code for today

import s2d.core.*
import s2d.shapes.*
import s2d.types.*
import s2d.font.*
import scala.util.boundary, boundary.break

val cellSize     = 20
val columns      = 20
val rows         = 20
val gameW        = columns * cellSize
val gameH        = rows    * cellSize
val scoreBarH    = 60
val moveInterval = 0.15

def offsetX: Int = (Window.width  - gameW) / 2
def offsetY: Int = (Window.height - gameH) / 2 + scoreBarH / 2

enum Direction:
  case Up, Down, Left, Right

enum GameState:
  case Playing, GameOver

case class Cell(col: Int, row: Int)

case class SnakeGame(
  snake:         List[Cell],
  food:          Cell,
  direction:     Direction,
  nextDirection: Direction,
  state:         GameState,
  score:         Int,
  moveTimer:     Double
)

def cellToPixel(cell: Cell): (Float, Float) =
  (offsetX.toFloat + cell.col * cellSize, offsetY.toFloat + cell.row * cellSize)

def randomFood(snake: List[Cell]): Cell =
  val free = for
    c <- 0 until columns
    r <- 0 until rows
    cell = Cell(c, r)
    if !snake.contains(cell)
  yield cell
  free(Random.int(0, free.length - 1))

def initialSnake: List[Cell] =
  List(Cell(10, 10), Cell(9, 10), Cell(8, 10))

def initialState: SnakeGame =
  val snake = initialSnake
  SnakeGame(
    snake         = snake,
    food          = randomFood(snake),
    direction     = Direction.Right,
    nextDirection = Direction.Right,
    state         = GameState.Playing,
    score         = 0,
    moveTimer     = 0.0
  )

@main
def main(): Unit = boundary:
  val screenW = gameW + 40
  val screenH = gameH + scoreBarH + 20

  Window.create(screenW, screenH, "S2D Snake")
  Input.setExitKey(Key.Escape)
  Timing.setTargetFPS(60)

  val font = Font.load("assets/font.ttf", 24.0f).getOrElse:
    println("Could not load font. Make sure assets/font.ttf exists.")
    Window.close()
    break(())

  var game = initialState

  while Window.isOpen() do
    Drawing.beginFrame()
    Drawing.clear(Color.Black)

    game.state match
      case GameState.Playing =>
        if      Input.isKeyPressed(Key.Up)    && game.direction != Direction.Down  then game = game.copy(nextDirection = Direction.Up)
        else if Input.isKeyPressed(Key.Down)  && game.direction != Direction.Up    then game = game.copy(nextDirection = Direction.Down)
        else if Input.isKeyPressed(Key.Left)  && game.direction != Direction.Right then game = game.copy(nextDirection = Direction.Left)
        else if Input.isKeyPressed(Key.Right) && game.direction != Direction.Left  then game = game.copy(nextDirection = Direction.Right)

        game = game.copy(moveTimer = game.moveTimer + Timing.delta)

        if game.moveTimer >= moveInterval then
          val direction = game.nextDirection
          val head      = game.snake.head
          val next      = direction match
            case Direction.Up    => Cell(head.col,     head.row - 1)
            case Direction.Down  => Cell(head.col,     head.row + 1)
            case Direction.Left  => Cell(head.col - 1, head.row    )
            case Direction.Right => Cell(head.col + 1, head.row    )

          val hitWall     = next.col < 0 || next.col >= columns || next.row < 0 || next.row >= rows
          val ate         = next == game.food
          val bodyToCheck = if ate then game.snake else game.snake.init
          val hitSelf     = bodyToCheck.contains(next)

          if hitWall || hitSelf then
            game = game.copy(state = GameState.GameOver, moveTimer = 0.0)
          else
            val newSnake = if ate then next :: game.snake else next :: game.snake.init
            val newFood  = if ate then randomFood(newSnake) else game.food
            val newScore = if ate then game.score + 1 else game.score
            game = game.copy(
              snake     = newSnake,
              food      = newFood,
              direction = direction,
              score     = newScore,
              moveTimer = 0.0
            )

        drawArena()
        drawFood(game.food)
        drawSnake(game.snake)
        drawScore(game.score, font)

      case GameState.GameOver =>
        if Input.isKeyPressed(Key.Enter) then
          game = initialState

        drawArena()
        drawFood(game.food)
        drawSnake(game.snake)
        drawGameOver(game.score, font)

    Drawing.endFrame()

  Font.unload(font)
  Window.close()

def drawArena(): Unit =
  Basics.rectangleOutline(offsetX, offsetY, gameW, gameH, Color.White)

def drawSnake(snake: List[Cell]): Unit =
  snake.zipWithIndex.foreach: (cell, index) =>
    val (x, y) = cellToPixel(cell)
    val color  = if index == 0 then Color.Lime else Color.Green
    Basics.rectangle(x.toInt, y.toInt, cellSize, cellSize, color)

def drawFood(food: Cell): Unit =
  val (x, y) = cellToPixel(food)
  Basics.rectangle(x.toInt, y.toInt, cellSize, cellSize, Color.Red)

def drawScore(score: Int, font: FontType): Unit =
  val text = s"Score: $score"
  val size = Text.measure(text, font)
  val x    = (Window.width - size.x) / 2.0f
  val y    = (offsetY - size.y) / 2.0f
  Text.draw(text, x, y, font, Color.White)

def drawGameOver(score: Int, font: FontType): Unit =
  Basics.rectangle(offsetX, offsetY, gameW, gameH, Color(0, 0, 0, 50))

  val gameOverText = "Game Over"
  val scoreText    = s"Score: $score"
  val restartText  = "Press Enter to restart"

  val goSize = Text.measure(gameOverText, font)
  val scSize = Text.measure(scoreText, font)
  val reSize = Text.measure(restartText, font)

  val centerX = offsetX + gameW / 2.0f
  val centerY = offsetY + gameH / 2.0f

  Text.draw(gameOverText, centerX - goSize.x / 2, centerY - goSize.y - 16, font, Color.Red)
  Text.draw(scoreText,    centerX - scSize.x / 2, centerY - scSize.y / 2,  font, Color.White)
  Text.draw(restartText,  centerX - reSize.x / 2, centerY + reSize.y + 8,  font, Color.LightGray)

The new imports

At the top of the file we added these lines:

import s2d.font.*
import scala.util.boundary, boundary.break

s2d.font gives us access to S2D’s Font, Text, and FontType. We are going to use all three today.

scala.util… is part of the Scala standard library. We will go over what these mean in a bit.

SnakeGame - handling the game state correctly

Over the past few days, we’ve been adding new var fields to main (snake, direction, nextDirection, moveTimer, food, state) and now we are adding a new one: score.

That is a lot of separate variables, all of which describe different parts of the game state.

Imagine that we need to restart the game. We would need to reset all of these variables individually. This can get messy and annoying fast.

The solution for this is to group these values into a single case class like this:

case class SnakeGame(
  snake:         List[Cell],
  food:          Cell,
  direction:     Direction,
  nextDirection: Direction,
  state:         GameState,
  score:         Int,
  moveTimer:     Double
)

SnakeGame holds everything that can change during a game session.
Instead of having lots of different vars, we have one.

var game = initialState

And resetting the state would only be one line:

game = initialState

Case classes in Scala also give us the “.copy” method. This creates a new instance of the class with only the fields you specify changed, while everything else stays the same.

This is really useful throughout the game loop:

game = game.copy(nextDirection = Direction.Up)

“Give me a new game state identical to the current one, but with nextDirection set to Up.”

initialState

def initialState: SnakeGame =
  val snake = initialSnake
  SnakeGame(
    snake         = snake,
    food          = randomFood(snake),
    direction     = Direction.Right,
    nextDirection = Direction.Right,
    state         = GameState.Playing,
    score         = 0,
    moveTimer     = 0.0
  )

initialSnake is a function that creates a new SnakeGame with all its values set to their starting point.
This is useful for two reasons:

• When the game starts, initialState defines the values the game will use, so if we want to change the starting direction for example, we would simply change the value from “Right” to let’s say “Left”, and the snake would start moving to the left.

• Every time we want to restart the game we can simply overwrite the current game state with initialState (like we saw above)

Loading the font: boundary and break

Take a look at these lines:

@main
def main(): Unit = boundary:
  // ...
  val font = Font.load("assets/font.ttf", 24.0f).getOrElse:
    println("Could not load font. Make sure assets/font.ttf exists.")
    Window.close()
    break(())

Font.load returns an Option[FontType]. Don’t worry, options are not as bad as they sound.

An Option in Scala represents a value that might or might not be there. This gives us two possible cases:

• Some(font): The actual value we want to use.

• None: No value at all.

This is really useful in the current context because we want to load a Font but we don’t want the game to crash if it can’t load the file. We want to be able to decide what happens in both cases.

We could use a match expression here with Some(T) and None like this:

Font.load("assets/font.ttf", 24.0f) match
  case Some(font) =>
    // use font
  case None =>
    // handle missing font

But we will use a more convenient method. The function getOrElse().

If the Option contains a Font (meaning it loaded correctly), getOrElse gives us that Font like this: Some(font) => font.

If the Option is None (meaning it couldn’t load), the else block gets executed.

None => getOrElse else block

If you look at the code, inside the else block we call break(()). What is this?

You could in theory write something like this:

val font = Font.load("assets/font.ttf", 24.0f).getOrElse: 
  println("Could not load font. Make sure assets/font.ttf exists.") 
  Window.close() 
  return

However, in Scala, returning from inside this nested block would be a non-local return. Modern Scala doesn’t let us do this, instead we have to use boundary and break.

First we wrap the body of main in a boundary:

@main
def main(): Unit = boundary:

This tells Scala that the main function is a boundary that we can exit from.

Then, when the font file cannot be loaded, we call:

break(())

Notice the double parentheses. Why is that?

Well, the main function is of type Unit. To represent that in Scala we use and empty set of parentheses like this “()”. (Unit represent no meaningful result)

So break(()) tells Scala to stop the execution of that boundary and return a Unit value.

Since the boundary contains the body of main, the entire game stops executing.

Score

Score lives inside SnakeGame as score: Int. It starts at 0.
It increases by one each time the snake eats:

val newScore = if ate then game.score + 1 else game.score
game = game.copy(score = newScore, ...)

Notice how we use the “.copy()” method that we described above to update the current state’s score.

drawScore

def drawScore(score: Int, font: FontType): Unit =
  val text = s"Score: $score"
  val size = Text.measure(text, font)
  val x    = (Window.width - size.x) / 2.0f
  val y    = (offsetY - size.y) / 2.0f
  Text.draw(text, x, y, font, Color.White)

Just like we did for other elements in our game, we have a separate function to draw the score.

The function takes two parameters as input, an Int for the score number and a font.

Inside the function we first build the actual text that we want to render on the screen.
We want a small text that says “Score: “ plus the actual score number next to it.

val text = s"Score: $score"

The “s” prefix lets us embed values directly inside a string with “$”. This is better than doing string concatenation because it looks cleaner and reads better too.

Now, we also need to know how big the text is to know where to place it on the screen.
For this we can use S2D’s Text.measure.
It returns a Vector2 containing the width and height of the text.

val size = Text.measure(text, font)

Now we calculate the x and y positions of the screen where we want to render text:

  val x    = (Window.width - size.x) / 2.0f
  val y    = (offsetY - size.y) / 2.0f

And then we call the Text.draw function, which takes care of rendering the text on the screen at the given position, with the given font and color.

drawGameOver

def drawGameOver(score: Int, font: FontType): Unit =
  Basics.rectangle(offsetX, offsetY, gameW, gameH, Color(0, 0, 0, 50))

  val gameOverText = "Game Over"
  val scoreText    = s"Score: $score"
  val restartText  = "Press Enter to restart"

  val goSize = Text.measure(gameOverText, font)
  val scSize = Text.measure(scoreText, font)
  val reSize = Text.measure(restartText, font)

  val centerX = offsetX + gameW / 2.0f
  val centerY = offsetY + gameH / 2.0f

  Text.draw(gameOverText, centerX - goSize.x / 2, centerY - goSize.y - 16, font, Color.Red)
  Text.draw(scoreText,    centerX - scSize.x / 2, centerY - scSize.y / 2,  font, Color.White)
  Text.draw(restartText,  centerX - reSize.x / 2, centerY + reSize.y + 8,  font, Color.LightGray)

Similar to the drawScore function, this takes two values as input.
The game over screen will show the final score the player had when they lost and some extra text.

First we render a rectangle with a small transparency. This would be like a panel where the game over screen elements would sit. (it is purely aesthetic).

Then we create three values for the three texts we will show on the game over screen.
The “Game Over” text, “Score” with the final score and the “Action” the player has to perform to replay the game.

Then we calculate the size of each text and save them in three separate values.

Now we want to know where the center of the screen is so we can position the three texts there. We save those values in centerX and centerY.

And finally we draw the three texts, using a small offset on the Y axis to position one below the other.

We will call this drawGameOver function from the “GameOver” branch of the loop.
We call it after drawArena, drawFood and drawSnake so it renders on top of everything else.

Restarting the game

case GameState.GameOver =>
  if Input.isKeyPressed(Key.Enter) then
    game = initialState

When the game ends we want the player to be able to restart and play again.
For this we check if they player presses the Enter key and set the game state to the initialState value that we already discussed.

As you can see, having all of the values from the GameState in one single case class lets us restart the game really easily.

Cleaning up

When the game loop ends, we need to clean up the font that we uploaded before closing the window.

Font.unload(font)
Window.close()

For this we use the Font.unload function. This frees the OpenGL texture that was created when the font was loaded.

It is really important that you always unload your assets before closing the window.

Running the code

Go ahead and run the code like this:

scala-cli run .

You should now see the “Score” text plus the number increasing every time you eat food.
You should also see the game over screen when you lose and the restart logic should be working too.

Final thoughts

Over these 7 days we’ve built a complete game from scratch using S2D. Here is a quick look at what we covered:

• Day 1 - Project setup, opening a window.

• Day 2 - The shapes package, drawing the arena.

• Day 3 - Cell, cellToPixel, drawing the snake.

• Day 4 - Direction, movement, Timing.delta, input.

• Day 5 - Food, for-comprehensions, Random.

• Day 6 - GameState, collision detection, direction buffering.

• Day 7 - SnakeGame, font loading, score, game over, restart.

Every concept we used had a reason and thought process behind. We chose to use case class instead of separate values, enum for the GameState instead of booleans.
val vs var for immutability.
def vs val for live recalculation.
match for branching on types.
Option for values that might not exist.

We not only talked about S2D and how to use the library, we also went over the what decisions to make when using Scala as a language. We went over some concepts that we used on the game and why chose them over other possibilities.

Now it is time to think about the next game we will build for the next series.

Thank you for following along and I hope you enjoyed the series!

The code you should have at the moment should look like this:

import s2d.core.*
import s2d.shapes.*
import s2d.types.*

val cellSize     = 20
val columns      = 20
val rows         = 20
val gameW        = columns * cellSize
val gameH        = rows    * cellSize
val scoreBarH    = 60
val moveInterval = 0.15

def offsetX: Int = (Window.width  - gameW) / 2
def offsetY: Int = (Window.height - gameH) / 2 + scoreBarH / 2

enum Direction:
  case Up, Down, Left, Right

case class Cell(col: Int, row: Int)

def cellToPixel(cell: Cell): (Float, Float) =
  (offsetX.toFloat + cell.col * cellSize, offsetY.toFloat + cell.row * cellSize)

def randomFood(snake: List[Cell]): Cell =
  val free = for
    c <- 0 until columns
    r <- 0 until rows
    cell = Cell(c, r)
    if !snake.contains(cell)
  yield cell
  free(Random.int(0, free.length - 1))

def initialSnake: List[Cell] =
  List(Cell(10, 10), Cell(9, 10), Cell(8, 10))

@main
def main(): Unit =
  val screenW = gameW + 40
  val screenH = gameH + scoreBarH + 20

  Window.create(screenW, screenH, "S2D Snake")
  Input.setExitKey(Key.Escape)
  Timing.setTargetFPS(60)

  var snake     = initialSnake
  var direction = Direction.Right
  var moveTimer = 0.0
  var food      = randomFood(snake)

  while Window.isOpen() do
    Drawing.beginFrame()
    Drawing.clear(Color.Black)

    if      Input.isKeyPressed(Key.Up)    then direction = Direction.Up
    else if Input.isKeyPressed(Key.Down)  then direction = Direction.Down
    else if Input.isKeyPressed(Key.Left)  then direction = Direction.Left
    else if Input.isKeyPressed(Key.Right) then direction = Direction.Right

    moveTimer += Timing.delta

    if moveTimer >= moveInterval then
      moveTimer = 0.0

      val head = snake.head
      val next = direction match
        case Direction.Up    => Cell(head.col,     head.row - 1)
        case Direction.Down  => Cell(head.col,     head.row + 1)
        case Direction.Left  => Cell(head.col - 1, head.row    )
        case Direction.Right => Cell(head.col + 1, head.row    )

      val ate = next == food

      snake = if ate then next :: snake else next :: snake.init
      if ate then food = randomFood(snake)

    drawArena()
    drawFood(food)
    drawSnake(snake)

    Drawing.endFrame()

  Window.close()

def drawArena(): Unit =
  Basics.rectangleOutline(offsetX, offsetY, gameW, gameH, Color.White)

def drawSnake(snake: List[Cell]): Unit =
  snake.zipWithIndex.foreach: (cell, index) =>
    val (x, y) = cellToPixel(cell)
    val color  = if index == 0 then Color.Lime else Color.Green
    Basics.rectangle(x.toInt, y.toInt, cellSize, cellSize, color)

def drawFood(food: Cell): Unit =
  val (x, y) = cellToPixel(food)
  Basics.rectangle(x.toInt, y.toInt, cellSize, cellSize, Color.Red)

If you’ve skipped previous days I would highly recommend you read through them before doing Day 6.

Summary for today

• The “Game State” enum.

• “state” and “nextDirection” values.

• Collision detection.

• A bit of a restructure of the game loop.

Final code for today

import s2d.core.*
import s2d.shapes.*
import s2d.types.*

val cellSize     = 20
val columns      = 20
val rows         = 20
val gameW        = columns * cellSize
val gameH        = rows    * cellSize
val scoreBarH    = 60
val moveInterval = 0.15

def offsetX: Int = (Window.width  - gameW) / 2
def offsetY: Int = (Window.height - gameH) / 2 + scoreBarH / 2

enum Direction:
  case Up, Down, Left, Right

enum GameState:
  case Playing, GameOver

case class Cell(col: Int, row: Int)

def cellToPixel(cell: Cell): (Float, Float) =
  (offsetX.toFloat + cell.col * cellSize, offsetY.toFloat + cell.row * cellSize)

def randomFood(snake: List[Cell]): Cell =
  val free = for
    c <- 0 until columns
    r <- 0 until rows
    cell = Cell(c, r)
    if !snake.contains(cell)
  yield cell
  free(Random.int(0, free.length - 1))

def initialSnake: List[Cell] =
  List(Cell(10, 10), Cell(9, 10), Cell(8, 10))

@main
def main(): Unit =
  val screenW = gameW + 40
  val screenH = gameH + scoreBarH + 20

  Window.create(screenW, screenH, "S2D Snake")
  Input.setExitKey(Key.Escape)
  Timing.setTargetFPS(60)

  var snake         = initialSnake
  var direction     = Direction.Right
  var nextDirection = Direction.Right
  var moveTimer     = 0.0
  var food          = randomFood(snake)
  var state         = GameState.Playing

  while Window.isOpen() do
    Drawing.beginFrame()
    Drawing.clear(Color.Black)

    state match
      case GameState.Playing =>
        if      Input.isKeyPressed(Key.Up)    && direction != Direction.Down  then nextDirection = Direction.Up
        else if Input.isKeyPressed(Key.Down)  && direction != Direction.Up    then nextDirection = Direction.Down
        else if Input.isKeyPressed(Key.Left)  && direction != Direction.Right then nextDirection = Direction.Left
        else if Input.isKeyPressed(Key.Right) && direction != Direction.Left  then nextDirection = Direction.Right

        moveTimer += Timing.delta

        if moveTimer >= moveInterval then
          moveTimer = 0.0
          direction = nextDirection

          val head = snake.head
          val next = direction match
            case Direction.Up    => Cell(head.col,     head.row - 1)
            case Direction.Down  => Cell(head.col,     head.row + 1)
            case Direction.Left  => Cell(head.col - 1, head.row    )
            case Direction.Right => Cell(head.col + 1, head.row    )

          val hitWall    = next.col < 0 || next.col >= columns || next.row < 0 || next.row >= rows
          val ate        = next == food
          val bodyToCheck = if ate then snake else snake.init
          val hitSelf    = bodyToCheck.contains(next)

          if hitWall || hitSelf then
            state = GameState.GameOver
          else
            snake = if ate then next :: snake else next :: snake.init
            if ate then food = randomFood(snake)

        drawArena()
        drawFood(food)
        drawSnake(snake)

      case GameState.GameOver =>
        drawArena()
        drawFood(food)
        drawSnake(snake)

    Drawing.endFrame()

  Window.close()

def drawArena(): Unit =
  Basics.rectangleOutline(offsetX, offsetY, gameW, gameH, Color.White)

def drawSnake(snake: List[Cell]): Unit =
  snake.zipWithIndex.foreach: (cell, index) =>
    val (x, y) = cellToPixel(cell)
    val color  = if index == 0 then Color.Lime else Color.Green
    Basics.rectangle(x.toInt, y.toInt, cellSize, cellSize, color)

def drawFood(food: Cell): Unit =
  val (x, y) = cellToPixel(food)
  Basics.rectangle(x.toInt, y.toInt, cellSize, cellSize, Color.Red)

Introducing Game State

“GameState” is an enum that contains two different cases:

• Playing.

• GameOver.

For our small Snake game that is all we need to determine if the player is playing the game or if they lost.

We already used “enums” before (Day 4 “Direction” enum) and today we will do something similar. We need a way to represent a set of values that won’t change, we use an “enum” for that.

GameState follows the same idea as Direction.

Now the same question we asked on Day 4 “why not just use a bool like var isGameOver = false?” If we only need two states a boolean should technically work right?

Yes a boolean would work but it’s not the best way to handle these kinds of scenarios.
Let’s say in the future we want to add a pause menu, if we use the GameState enum we simply add a new entry Paused and we handle that case, that’s it.
If we had a boolean called “isGameOver” or something similar we would need to add another boolean like “isGamePaused” and write the logic only for that particular boolean value.

It is also a good way to keep the code clean and readable. If you read this code, you understand what is going on only by looking at it:

state = GameState.GameOver

You know the game is over, you need no other context to understand that.

nextDirection and the “direction buffer”

In Day 4 we had an intentional bug that we already fixed.
Input was applied to direction immediately but the snake was moving on a fixed timer.
If the player changes direction multiple times before the snake performs its next movement step, direction could change immediately even though the snake has not moved yet. This could allow the snake to reverse into itself.

For this we will use something called a buffer. If you want to read more about “buffers” you can read this, it is a bit of a complex matter but I will try to explain it easily for our purpose.

We separate the direction the player requested (by pressing a key) from the actual direction that the snake is moving.

var direction     = Direction.Right
var nextDirection = Direction.Right

nextDirection gets updated every single frame, whereas direction is only updated at the moment the snake actually takes a step:

if moveTimer >= moveInterval then
  moveTimer = 0.0
  direction = nextDirection

In simple words this means that no matter how fast the player spams a key, the snake can only change direction once per “move step”. Only the last input before a new step is the one that counts.

Collision detection

Collisions are another big and complex matter.
S2D offers a basic collisions package but we won’t be using that today.

We need two collision checks for our snake game:

• Wall collision.

• Self collision.

For the wall collision we can do a simple bounds check.

In our game we know the two things for our bounds check:

• Snake’s current position.

• Arena (map) size.

Look at this code and think about what it does:

val hitWall    = next.col < 0 || next.col >= columns || next.row < 0 || next.row >= rows

We know that if the snake’s position is less than the minimum amount of columns it means it is outside of the Arena. The same goes for the maximum number of columns.
Note that we check if the next position the snake will be is outside. This is because we must be able to place the snake character right in the border without losing.

The same goes for the rows, we check both min and max amount.

Remember columns are X axis and rows are Y axis (right/left - up/down)

The hitWall variable is a boolean, it will return True if any of those conditions is met.

Now for the self collision we must consider something.
Look at this line:

val bodyToCheck = if ate then snake else snake.init
val hitSelf    = bodyToCheck.contains(next)

The value bodyToCheck is the same as snake.init when the snake isn’t eating, and snake when it is eating. Why do we need these two values?

If the snake is not eating the tail moves away on the same step. The tail cell is about to be vacated, so the snake’s head moving into it should be allowed (because it would be moving into an empty space the next step). If we were to check against the full snake we would be blocking a valid move. This is a rule I set for the game but you could also remove this and invalidate that particular move.

When the snake eats, the tail doesn’t move, the body grows.
In this case we must check against the entire body.

Performing the collision

Since both values are booleans we do a simple check:

if hitWall || hitSelf then
  state = GameState.GameOver
else
  snake = if ate then next :: snake else next :: snake.init
  if ate then food = randomFood(snake)

If any of the two values is true, we set the GameState to GameOver, meaning the player lost and the game should stop.

Otherwise, the movement is valid, so we update the snake and generate new food if it ate.

Restructuring the game loop with state match

Ok since now we have two different states the game could be in we must do a bit of a refactor in our code.
Look at this code:

state match
  case GameState.Playing =>
    // input, movement, collision

  case GameState.GameOver =>
    // just draw, nothing else

In Scala, match is an expression that checks a value against a set of cases.
It runs the case of the matching branch.

We went over this on Day 4 but it is good to refresh concepts sometimes.

In today’s case we are splitting the entire game loop in two separate behaviours.

• Playing: The playing branch runs all the logic we’ve built over the past few days. It checks for player’s input, moves the snake, draws on the screen, etc.

• GameOver: This state currently does nothing because we will handle the actual Game Over logic on Day 7. So for now it only stops the game completely and draws the arena and the snake (no input or gameplay).

Notice what we discussed above about having a GameState enum instead of an isGameOver variable.
This lets us separate two big chunks of code and still have a very readable and clean structure.

If the state is Playing, the game runs and plays.
If the state is GameOver, the game stops.

Running the code

Go ahead and run the command:

scala-cli run .

The game plays exactly as on Day 5 but now if the snake collides with a wall or itself, the game freezes.

Recommendations

Try changing the collision rules and see what happens, mess around with the bound check or with the self collision to understand how it works.

Get familiar with the concept of Collisions, it is really important in game development, no matter what type of game you are working on.

Thanks a lot for reading, see you on Day 7 — The final day!

The code you should have at the moment should look like this:

import s2d.core.*
import s2d.shapes.*
import s2d.types.*

val cellSize     = 20
val columns      = 20
val rows         = 20
val gameW        = columns * cellSize
val gameH        = rows    * cellSize
val scoreBarH    = 60
val moveInterval = 0.15

def offsetX: Int = (Window.width  - gameW) / 2
def offsetY: Int = (Window.height - gameH) / 2 + scoreBarH / 2

enum Direction:
  case Up, Down, Left, Right

case class Cell(col: Int, row: Int)

def cellToPixel(cell: Cell): (Float, Float) =
  (offsetX.toFloat + cell.col * cellSize, offsetY.toFloat + cell.row * cellSize)

def initialSnake: List[Cell] =
  List(Cell(10, 10), Cell(9, 10), Cell(8, 10))

@main
def main(): Unit =
  val screenW = gameW + 40
  val screenH = gameH + scoreBarH + 20

  Window.create(screenW, screenH, "S2D Snake")
  Input.setExitKey(Key.Escape)
  Timing.setTargetFPS(60)

  var snake     = initialSnake
  var direction = Direction.Right
  var moveTimer = 0.0

  while Window.isOpen() do
    Drawing.beginFrame()
    Drawing.clear(Color.Black)

    if      Input.isKeyPressed(Key.Up)    then direction = Direction.Up
    else if Input.isKeyPressed(Key.Down)  then direction = Direction.Down
    else if Input.isKeyPressed(Key.Left)  then direction = Direction.Left
    else if Input.isKeyPressed(Key.Right) then direction = Direction.Right

    moveTimer += Timing.delta

    if moveTimer >= moveInterval then
      moveTimer = 0.0

      val head = snake.head
      val next = direction match
        case Direction.Up    => Cell(head.col,     head.row - 1)
        case Direction.Down  => Cell(head.col,     head.row + 1)
        case Direction.Left  => Cell(head.col - 1, head.row    )
        case Direction.Right => Cell(head.col + 1, head.row    )

      snake = next :: snake.init

    drawArena()
    drawSnake(snake)

    Drawing.endFrame()

  Window.close()

def drawArena(): Unit =
  Basics.rectangleOutline(offsetX, offsetY, gameW, gameH, Color.White)

def drawSnake(snake: List[Cell]): Unit =
  snake.zipWithIndex.foreach: (cell, index) =>
    val (x, y) = cellToPixel(cell)
    val color  = if index == 0 then Color.Lime else Color.Green
    Basics.rectangle(x.toInt, y.toInt, cellSize, cellSize, color)

If you haven’t read Day 4, I’d recommend doing that first.

Summary for today

• Function randomFood

• Function drawFood

• Snake eating logic

Final code for today

import s2d.core.*
import s2d.shapes.*
import s2d.types.*

val cellSize     = 20
val columns      = 20
val rows         = 20
val gameW        = columns * cellSize
val gameH        = rows    * cellSize
val scoreBarH    = 60
val moveInterval = 0.15

def offsetX: Int = (Window.width  - gameW) / 2
def offsetY: Int = (Window.height - gameH) / 2 + scoreBarH / 2

enum Direction:
  case Up, Down, Left, Right

case class Cell(col: Int, row: Int)

def cellToPixel(cell: Cell): (Float, Float) =
  (offsetX.toFloat + cell.col * cellSize, offsetY.toFloat + cell.row * cellSize)

def randomFood(snake: List[Cell]): Cell =
  val free = for
    c <- 0 until columns
    r <- 0 until rows
    cell = Cell(c, r)
    if !snake.contains(cell)
  yield cell
  free(Random.int(0, free.length - 1))

def initialSnake: List[Cell] =
  List(Cell(10, 10), Cell(9, 10), Cell(8, 10))

@main
def main(): Unit =
  val screenW = gameW + 40
  val screenH = gameH + scoreBarH + 20

  Window.create(screenW, screenH, "S2D Snake")
  Input.setExitKey(Key.Escape)
  Timing.setTargetFPS(60)

  var snake     = initialSnake
  var direction = Direction.Right
  var moveTimer = 0.0
  var food      = randomFood(snake)

  while Window.isOpen() do
    Drawing.beginFrame()
    Drawing.clear(Color.Black)

    if      Input.isKeyPressed(Key.Up)    then direction = Direction.Up
    else if Input.isKeyPressed(Key.Down)  then direction = Direction.Down
    else if Input.isKeyPressed(Key.Left)  then direction = Direction.Left
    else if Input.isKeyPressed(Key.Right) then direction = Direction.Right

    moveTimer += Timing.delta

    if moveTimer >= moveInterval then
      moveTimer = 0.0

      val head = snake.head
      val next = direction match
        case Direction.Up    => Cell(head.col,     head.row - 1)
        case Direction.Down  => Cell(head.col,     head.row + 1)
        case Direction.Left  => Cell(head.col - 1, head.row    )
        case Direction.Right => Cell(head.col + 1, head.row    )

      val ate = next == food

      snake = if ate then next :: snake else next :: snake.init
      if ate then food = randomFood(snake)

    drawArena()
    drawFood(food)
    drawSnake(snake)

    Drawing.endFrame()

  Window.close()

def drawArena(): Unit =
  Basics.rectangleOutline(offsetX, offsetY, gameW, gameH, Color.White)

def drawSnake(snake: List[Cell]): Unit =
  snake.zipWithIndex.foreach: (cell, index) =>
    val (x, y) = cellToPixel(cell)
    val color  = if index == 0 then Color.Lime else Color.Green
    Basics.rectangle(x.toInt, y.toInt, cellSize, cellSize, color)

def drawFood(food: Cell): Unit =
  val (x, y) = cellToPixel(food)
  Basics.rectangle(x.toInt, y.toInt, cellSize, cellSize, Color.Red)

Spawning food randomly

We are going to start with the most important function for the day.

def randomFood(snake: List[Cell]): Cell =
  val free = for
    c <- 0 until columns
    r <- 0 until rows
    cell = Cell(c, r)
    if !snake.contains(cell)
  yield cell
  free(Random.int(0, free.length - 1))

This function takes the current snake as a parameter and returns a Cell where the food should appear. It does two things:

• Finds every cell that the snake is not currently on.

• Picks one of those cells at random.

Let’s go through it:

The for-comprehensionn

val free = for
  c <- 0 until columns
  r <- 0 until rows
  cell = Cell(c, r)
  if !snake.contains(cell)
yield cell

This code right here is called “for-comprehension” in Scala. It might look similar to a normal “for” loop in other languages but it works differently.

A normal “for” loop usually means that a certain piece of code will run repeatedly a certain number of times. A “for-comprehension” means that the code will loop over the values, it will transform those values (or filter them) and it will return a different collection with the new values inside.

In this case the “free” value becomes a collection of all the cells that are not occupied by the snake.

• val free = for - This is the first line, it starts the for-comprehension loop and stores the result in a value named “free”

• c ← 0 until columns - “c” is a new local variable that will take every integer value from 0 up to columns (not including columns itself). So basically “c” will be 0, 1, 2, … up to the amount of columns.

• r ← 0 until rows - Similar to the line above, “r” is a new local variable that takes every integer value from 0 up to rows (not including rows itself). So again, “r” will be 0, 1, 2, … up to the amount of rows.

• cell = Cell(c, r) - For every combination of “c” and “r” we need to create a new Cell. This line uses “=” instead of “←” because we are not iterating over a collection, we just want to give a name to a new value.

• if !snake.contains(cell) - This line is called a “guard”. It’s purpose is to filter out any cell that the snake is already occupying. So if the current cell we are checking has a segment of the snake in it, we skip it, hence it won’t be part of the final collection.

• yield cell - The last line adds a new cell to the collection. So every cell that made it through the guard (meaning it is empty) is included in the collection returned by the for-comprehension.

The end result stored in “free” is a collection of every cell on the grid where the snake is not present.

Picking a random cell

free(Random.int(0, free.length - 1))

To access the value of a collection in Scala you do this “collectionName(value)”.
If you take a look at the code you will see that we are doing exactly that with the “free” collection but we are choosing a random value instead of a specific one.

We will use the “Random” package from S2D for the first time.

“Random.int()” returns a random integer between a minimum and maximum value, including both ends.
In the code we pass “0” as the minimum and “free.length - 1” as the maximum (we need to subtract 1 from the “free” collection because it starts at index 0).

randomFood takes the snake as a parameter because it is the best way to guarantee the food never spawns on top of the snake.

Drawing the food

def drawFood(food: Cell): Unit =
  val (x, y) = cellToPixel(food)
  Basics.rectangle(x.toInt, y.toInt, cellSize, cellSize, Color.Red)

If you read Day 3, this function should look familiar to you. It is almost the same as the drawSnake function!

We take a “cell” as the only parameter, convert that cell from grid coordinates (rows and columns) into screen coordinates (pixels) and then we draw a “rectangle”.

If you want to see how this function works in depth, please read Day 3.

The main difference is that for the snake we iterate over every cell of the snake’s body because it occupies more than one cell at a time. For the food we don’t need to do that, since it is just one square that occupies one cell.

Adding food to main

Add this line after “moveTimer” inside the main function:

var food = randomFood(snake)

We pass the “snake” to the “randomFood” function so the food doesn’t spawn on top of the initial snake body.

“food” is a var because it will change every time the snake eats it.

The eating logic

Inside the movement block, after “next”, add this:

val ate = next == fod

snake = if ate then next :: snake else next :: snake.init
if ate then food = randomFood(snake)

Ok this is quite a bit of code, let’s go over it:

• val ate = next == food - Here we check if the next head position is the same cell as the food cell. “Cell” is a case class, this is why we can do a simple equality check (if not we would need to do something like next.x food.x and same for y)
  ”next == food” is true when both cells (next and food) have the exact same row and column. We are not doing a pixel comparison here, it is purely grid-based.

• snake = if ate then next :: snake else next :: snake.init - This is a small change that we are doing to the code from Day 4.
  When the snake eats we now prepend the new head but keep the current body. So we basically add a new segment and we don’t remove the tail. This way we make the snake grow.
  When the snake doesn’t eat, we just do the same as on Day 4 (next :: snake.init) keeping the same size.

• if ate then food = randomFood(snake) - Once the snake eats the food we calculate a new random position. We pass the updated snake (which will have +1 segment) so the new food cannot appear on any of the snake’s new cells.

Draw order

Your drawing logic should look like this:

drawArena()
drawFood(food)
drawSnake(snake)

We call “drawFood” before “drawSnake”.
This means the food will be drawn under the snake, which is the best approach in case food somehow spawns on top of the snake (it cannot happen due to the logic we have but it is good to keep this as a good practice).

Running the code

Open a terminal and run this code:

scala-cli run .

You should see a red square somewhere in the grid. Eat it with the snake and the red square should appear in a different position.

The snake still has no collisions logic so we will focus on that in the next day!

Recommendations

Try changing the “Color.Red” in “drawFood” to something else.
Try making the food spawn only in a specific region of the grid instead by adding extra checks on the logic.
Try printing “free.length” before picking the random index to see how many free cells are available.

Like I say every day, play around with the code and get familiar with it.

Thanks for reading and see you on Day 6!

The code you should have at the moment should look like this:

import s2d.core.*
import s2d.shapes.*
import s2d.types.*

val cellSize  = 20
val columns   = 20
val rows      = 20
val gameW     = columns * cellSize
val gameH     = rows    * cellSize
val scoreBarH = 60

def offsetX: Int = (Window.width  - gameW) / 2
def offsetY: Int = (Window.height - gameH) / 2 + scoreBarH / 2

case class Cell(col: Int, row: Int)

def cellToPixel(cell: Cell): (Float, Float) =
  (offsetX.toFloat + cell.col * cellSize, offsetY.toFloat + cell.row * cellSize)

def initialSnake: List[Cell] =
  List(Cell(10, 10), Cell(9, 10), Cell(8, 10))

@main
def main(): Unit =
  val screenW = gameW + 40
  val screenH = gameH + scoreBarH + 20

  Window.create(screenW, screenH, "S2D Snake")
  Input.setExitKey(Key.Escape)
  Timing.setTargetFPS(60)

  val snake = initialSnake

  while Window.isOpen() do
    Drawing.beginFrame()
    Drawing.clear(Color.Black)

    drawArena()
    drawSnake(snake)

    Drawing.endFrame()

  Window.close()

def drawArena(): Unit =
  Basics.rectangleOutline(offsetX, offsetY, gameW, gameH, Color.White)

def drawSnake(snake: List[Cell]): Unit =
  snake.zipWithIndex.foreach: (cell, index) =>
    val (x, y) = cellToPixel(cell)
    val color  = if index == 0 then Color.Lime else Color.Green
    Basics.rectangle(x.toInt, y.toInt, cellSize, cellSize, color)

If you haven’t read Day 3, I’d recommend doing that first.

Summary for today

• A new enum Direction

• Two new constants moveInterval & moveTimer

• Input reading with Input.isKeyPressed

• Movement logic using Timing.delta

Final code for today

import s2d.core.*
import s2d.shapes.*
import s2d.types.*

val cellSize     = 20
val columns      = 20
val rows         = 20
val gameW        = columns * cellSize
val gameH        = rows    * cellSize
val scoreBarH    = 60
val moveInterval = 0.15

def offsetX: Int = (Window.width  - gameW) / 2
def offsetY: Int = (Window.height - gameH) / 2 + scoreBarH / 2

enum Direction:
  case Up, Down, Left, Right

case class Cell(col: Int, row: Int)

def cellToPixel(cell: Cell): (Float, Float) =
  (offsetX.toFloat + cell.col * cellSize, offsetY.toFloat + cell.row * cellSize)

def initialSnake: List[Cell] =
  List(Cell(10, 10), Cell(9, 10), Cell(8, 10))

@main
def main(): Unit =
  val screenW = gameW + 40
  val screenH = gameH + scoreBarH + 20

  Window.create(screenW, screenH, "S2D Snake")
  Input.setExitKey(Key.Escape)
  Timing.setTargetFPS(60)

  var snake     = initialSnake
  var direction = Direction.Right
  var moveTimer = 0.0

  while Window.isOpen() do
    Drawing.beginFrame()
    Drawing.clear(Color.Black)

    if      Input.isKeyPressed(Key.Up)    then direction = Direction.Up
    else if Input.isKeyPressed(Key.Down)  then direction = Direction.Down
    else if Input.isKeyPressed(Key.Left)  then direction = Direction.Left
    else if Input.isKeyPressed(Key.Right) then direction = Direction.Right

    moveTimer += Timing.delta

    if moveTimer >= moveInterval then
      moveTimer = 0.0

      val head = snake.head
      val next = direction match
        case Direction.Up    => Cell(head.col,     head.row - 1)
        case Direction.Down  => Cell(head.col,     head.row + 1)
        case Direction.Left  => Cell(head.col - 1, head.row    )
        case Direction.Right => Cell(head.col + 1, head.row    )

      snake = next :: snake.init

    drawArena()
    drawSnake(snake)

    Drawing.endFrame()

  Window.close()

def drawArena(): Unit =
  Basics.rectangleOutline(offsetX, offsetY, gameW, gameH, Color.White)

def drawSnake(snake: List[Cell]): Unit =
  snake.zipWithIndex.foreach: (cell, index) =>
    val (x, y) = cellToPixel(cell)
    val color  = if index == 0 then Color.Lime else Color.Green
    Basics.rectangle(x.toInt, y.toInt, cellSize, cellSize, color)

Direction

Our snake can move in four directions, it would be nice if we had a type that represented those directions.
For this we will use an enum called “Direction”.

enum Direction:
  case Up, Down, Left, Right

In Scala, an “enum” is a data structure that let’s you define a set of possible values.
Direction can only ever be one of these four values (Up, Down, Left or Right).

We could also use a value with a string like “up” or four different integer values like “0”, “1”, “2” and “3”, where each of these numbers represents a direction.

But in our case we already know that our Direction will only have 4 options and we also already know the value of each of those 4 options, so the best option is an enum because Scala automatically returns an error if we try to use a value that is not part of the enum.

We will use “Direction” a lot more in future days when we add collision detection.

“moveInterval” and “moveTimer”

We will now add two lines of code.
First define this value at the top, below “scoreBarH”:

val moveInterval = 0.15

This value is how many seconds our snake waits between each step. Our snake will move one Cell at a time (one step), so this the interval of seconds between one cell and the next one. At “0.15” seconds the snake will take around 6-7 steps per second.

The next value is this:

var moveTimer = 0.0

Define it below the “var snake = initialSnake” line, inside the main function.

This is a “var” so the value can change. Why do we use a “var” here? Because “moveTimer” is a counter. We will increment the value every frame. When the value of “moveTimer” reaches “moveInterval”, the snake moves one Cell and we reset the timer to zero.

Initial direction

When the game starts our snake must know what direction it has to move.
We could make a small system that waits for the user to press a key, for example the Left Key, and the snake would move to the left.
But in the original snake games, the snake would start moving to a “default” direction when the game started.

In our game we will do the same.

Add this line below “var snake = initialSnake”:

var direction = Direction.Right

We define a new variable (because the value will change in the future) and we assign a default value.

As you can see we are using “Direction.Right”, this means we are assigning a value from our enum “Direction”.

Reading user input

Ok we’ve reached a really interesting part of our game.

To move the snake around we must somehow take the input from the user’s keyboard and pass it to our game logic.
If the user presses the “Left key” it means they want to move the snake to the left.

How do we do this?

Well S2D has an “Input” package that you can use for this.

Right after the “Drawing.clear()” function add these lines:

if      Input.isKeyPressed(Key.Up)    then direction = Direction.Up
else if Input.isKeyPressed(Key.Down)  then direction = Direction.Down
else if Input.isKeyPressed(Key.Left)  then direction = Direction.Left
else if Input.isKeyPressed(Key.Right) then direction = Direction.Right

“Input.isKeyPressed” returns “true” when a key is pressed. It only returns true once, so if you press and hold the key it will only trigger once.
In our case we want to use this function because we just want to move our snake once each time we press a key.

You could also use “Input.isKeyDown” which returns true every frame the key is held, but like I said, we don’t want that for this game.

One important thing to remember:

Input must be read after “Drawing.beginFrame()”. This is because “beginFrame()” is where S2D polls SDL for new events, such as keyboard input.

If you added the input logic before beginFrame it would still work, but you would be reading an input state that hasn’t been updated yet for the current frame.

For our game the difference won’t cause any visible problems, but the right way of doing things is always adding the Input logic after “beginFrame()”.

Movement with Timing.delta

Below our Input logic go ahead and add these lines:

moveTimer += Timing.delta

if moveTimer >= moveInterval then
  moveTimer = 0.0

What is going on here?

First of all we are adding something to our “moveTimer” variable that we defined before.
”Timing.delta” is a function that returns a “Double”. It returns the time in seconds that the last frame took to complete.
At 60FPS each frame takes roughly 0.016 seconds.
By adding “Timing.delta” to “moveTimer” every frame, we are counting the real elapsed time between each frame regarding the frame rate.

This is really important because if you run the game in a computer with a higher frame rate, it would run faster, and it would run slower in a PC with a lower frame rate.
We don’t want that, we want to always maintain the same calculation regardless of the framerate.

When “moveTimer” reaches 0.15 (moveInterval) then we move the snake and reset the timer.

Computing the next position

Inside the same “if” statement from last step, add these lines:

val head = snake.head
val next = direction match
  case Direction.Up    => Cell(head.col,     head.row - 1)
  case Direction.Down  => Cell(head.col,     head.row + 1)
  case Direction.Left  => Cell(head.col - 1, head.row    )
  case Direction.Right => Cell(head.col + 1, head.row    )

Let’s go over this line by line:

• val head = snake.head - “snake” is a List. You can use the “head” function in Scala to access the first element on a list. So “snake.head” gives us the first element of the snake List (which in our case it is also the head of the snake).

• val next = direction match - This line starts a “pattern matching” statement. Read more about Pattern Matching if you don’t know what it is.
  We are creating a new value called “next” and we will assign a value that depends on what “direction” we have at the moment.

• case Direction.Up => Cell(head.col, head.row - 1) - If we are trying to move Up then it means that we must decrese the row by 1. (because Y increases downward). So basically if the user prompts to move Upwards, we decrease 1 row every frame.

The same idea goes for the other 3 cases (Down, Left and Right). For Left and Right we instead increase or decrease columns, not rows.

What’s important to notice here is that we are using the four values from our “Direction” enum, we are not leaving a value unused and also we are not using a different value that is not part of the enum. The Scala compiler knows we haven’t missed any of the predefined values.

This is important because it will help you understand why we chose an enum over a simple variable.

Moving the snake

After the pattern matching, inside the if statement, go ahead and add this line:

snake = next :: snake.init

This right here is the entire movement logic, what actually moves the snake.

Let’s break it apart:

• snake.init - Returns the entire list without its last element. In our case it would drop the “tail” of the snake. If we had a snake of three segements (head, body, tail), snake.init would return (head, body), no tail.

• next :: snake.init - this “pushes” the “next” value (defined on the pattern matching statement) into the List. So the result would be like this (next, head, body). It prepends the new value to that list that has been shortened.

And we assign this value to the “snake” variable, which is our actual character on the game.

This is why we chose a List back in Day 3. Using “::” to push a new value to the start of a List is fast and easy to understand. The snake will grow in size from the front and shrink from the back, Lists make these two operations simple.

Running the code

Open a terminal and run this command

scala-cli run .

You should see the snake moving to the Right on its own when the game starts.

If you press the arrow keys you should be able to change the direction of the snake.

The snake doesn’t stop at the walls, it passes through them. That is for later to fix.

Recommendations

Try changing the “moveInterval” value to a different number. You can set it to something like 0.05 to make the snake faster or 0.5 to make it slower.
Try making the initialSnake longer and watch how the movement looks.
Try changing the initial direction from Right to Left or something different.

Also take a look at what happens when you go through a wall. Does the snake wrap around or disappears?
Think about what check you would need to add to detect that.

Thanks a lot for reading and see you on the next Day.

The code you should have at the moment should look like this:

import s2d.core.*
import s2d.shapes.*
import s2d.types.*

val cellSize  = 20
val columns   = 20
val rows      = 20
val gameW     = columns * cellSize
val gameH     = rows    * cellSize
val scoreBarH = 60

def offsetX: Int = (Window.width  - gameW) / 2
def offsetY: Int = (Window.height - gameH) / 2 + scoreBarH / 2

@main
def main(): Unit =
  val screenW = gameW + 40
  val screenH = gameH + scoreBarH + 20

  Window.create(screenW, screenH, "S2D Snake")
  Input.setExitKey(Key.Escape)
  Timing.setTargetFPS(60)

  while Window.isOpen() do
    Drawing.beginFrame()
    Drawing.clear(Color.Black)

    drawArena()

    Drawing.endFrame()

  Window.close()

def drawArena(): Unit =
  Basics.rectangleOutline(offsetX, offsetY, gameW, gameH, Color.White)

If you haven’t read Day 2, I’d recommend reading it here.

Summary for today

• New type case class Cell

• New functions cellToPixel & drawSnake

Final code for today

import s2d.core.*
import s2d.shapes.*
import s2d.types.*

val cellSize  = 20
val columns   = 20
val rows      = 20
val gameW     = columns * cellSize
val gameH     = rows    * cellSize
val scoreBarH = 60

def offsetX: Int = (Window.width  - gameW) / 2
def offsetY: Int = (Window.height - gameH) / 2 + scoreBarH / 2

case class Cell(col: Int, row: Int)

def cellToPixel(cell: Cell): (Float, Float) =
  (offsetX.toFloat + cell.col * cellSize, offsetY.toFloat + cell.row * cellSize)

def initialSnake: List[Cell] =
  List(Cell(10, 10), Cell(9, 10), Cell(8, 10))

@main
def main(): Unit =
  val screenW = gameW + 40
  val screenH = gameH + scoreBarH + 20

  Window.create(screenW, screenH, "S2D Snake")
  Input.setExitKey(Key.Escape)
  Timing.setTargetFPS(60)

  val snake = initialSnake

  while Window.isOpen() do
    Drawing.beginFrame()
    Drawing.clear(Color.Black)

    drawArena()
    drawSnake(snake)

    Drawing.endFrame()

  Window.close()

def drawArena(): Unit =
  Basics.rectangleOutline(offsetX, offsetY, gameW, gameH, Color.White)

def drawSnake(snake: List[Cell]): Unit =
  snake.zipWithIndex.foreach: (cell, index) =>
    val (x, y) = cellToPixel(cell)
    val color  = if index == 0 then Color.Lime else Color.Green
    Basics.rectangle(x.toInt, y.toInt, cellSize, cellSize, color)

Introducing Cell

As we discussed in previous days, our game uses a grid.
Every position in that grid (where the snake is, where the food is, everything) is described by a column and a row number.
We need a way to represent this value and for that we will use “Cell”.

case class Cell(col: Int, row: Int)

In Scala, a case class is a simple data container. You define the fields the class holds and that’s kinda it.
In our case the “Cell” case class holds two integers: “col” for the column and “row” for, you guessed it, the row.
In simple words, a “Cell” is just a position on our grid which consists in a column number and a row number.

Why do we use a case class and not two separate variables? Because we want the “Cell” to be one thing, one position that holds the two values in the same place.
If we want to know where the snake is we need the “Cell” where it is positioned, for that we can just retrieve one value (the “Cell” value). If we were using two variables we would need to retrieve both values.

This is a way of keeping related data together which in my opinion is really important in game programming.

From grid to pixels

Our game logic uses grid coordinates (columns and rows) to perform it’s calculations.
S2D draws stuff using pixel coordinates (x and y on the screen). How do we tell S2D where to draw something if we use a completely different system? We will use something called a “helper function”.

A helper function is a piece of code that has one specific job and aims to make the code easier to read and reuse.

In our game we will use this helper function:

def cellToPixel(cell: Cell): (Float, Float) =
  (offsetX.toFloat + cell.col * cellSize, offsetY.toFloat + cell.row * cellSize)

This function takes only one parameter of type “Cell”. That means we will pass something like this “Cell(3, 5)”.
Then it returns two Float values like this (Float, Float). The first Float is the “x” position in pixels and the second Float is the “y”.

So in summary this function converts a “Cell(column, row)” into “(x, y)”.

Now let’s go through the calculation:

offsetX.toFloat + cell.col * cellSize

This calculates the “x” position.
”offsetX” is where the arena starts in the X axis (horizontal). We add it because the arena is not drawn directly at the left edfe of the window. If you remember on Day 2 we talked about this.

Then we take the cell column:

cell.col

an multiply it by the size of an individual cell:

cellSize

For example, if cell.col is 3 and cellSize is 20, then we do “3 * 20 = 60”

This means column 3 starts at 60 pixels from the left side of the arena.

Now we add the offsetX. If offsetX is 20, then the final position of X would be: “20 + 60 = 80”.

So the final value for column 3 would be 80, meaning it will be drawn at 80 pixels from the left side of the arena.

We do the same exact thing for y:

offsetY.toFloat + cell.row * cellSize

offsetY is where the arena starts vertically.
cell.row tells us the row of the cell.
If cell.row is 5 and cellSize is 20 then: 5 * 20 = 100

If offsetY is 30, then the final y position is: 30 + 100 = 130.

In simple words, the function “cellToPixel” transforms our grid coordinates into screen coordinates so S2D knows where to draw stuff.

Initial snake

Let’s look at this part of the code now:

def initialSnake: List[Cell] =
  List(Cell(10, 10), Cell(9, 10), Cell(8,10))

Our snake is a List of Cells, each Cell is one segment of its body. The first element in the List is always the head of the Snake.

In this case we start with three segments:

• The head at column 10, row 10

• Two body “cells” at column 9, row 10 and column 8, row 10.

We are using a List because it’s the easiest Scala collection to handle adding new cells to the “front” and removing from the “back”. This is what we are going to use to move our Snake around in a future Day.

“initialSnake()” is a def because we need to call it when the player restarts the game.
Every call gives us a new list, starting at the same position.

Drawing the snake

def drawSnake(snake: List[Cell]): Unit =
  snake.zipWithIndex.foreach: (cell, index) =>
    val (x, y) = cellToPixel(cell)
    val color  = if index == 0 then Color.Lime else Color.Green
    Basics.rectangle(x.toInt, y.toInt, cellSize, cellSize, color)

Let’s go through this line by line:

• snake.zipWithIndex - This may look strange at first, so let’s try to break it down.
  ”snake” (the parameter the function expects) is a List of Cells. Each Cell represents one part of the snake’s body as discussed above.
  ”zipWithIndex” takes each element in the list and pairs it with its position in that list. Our original List looks like this:

  List(Cell(10, 10), Cell(9, 10), Cell(8, 10))

  And after “zipWithIndex” it would look like this:

  List( 
    (Cell(10, 10), 0), 
    (Cell(9, 10), 1), 
    (Cell(8, 10), 2) 
  )

  As you can see it added an “index” to the each element, the first element gets index 0, the second gets 1 and so on.

• .foreach: (cell, index) => - After “zipWithIndex” each item in the List has two parts, the “cell” and the “index”, this is called a “pair”. For example the head of the snake has this pair: “(Cell(10, 10), 0)”, meaning (Cell = 10, 10) and (index = 0)

  “.foreach” means repeat this section of code for every item in the list and we can give a name to each element in the pair. We are giving the “cell” and “index” names, that is why we do “.foreach: (cell, index)”. We are telling Scala to iterate over every element on that list and that each pair will have a “cell” and an “index” inside. These names are just an easier way we can access the elements inside the pairs, we could choose any name we want but it is usually good practice to choose a name that defines the content inside that element.

• val (x, y) = cellToPixel(cell) - Remember that the function “cellToPixel” returns a pair (two values). So we create a new value with two names (x, y) and we save the value that “cellToPixel” returns. We pass the “cell” parameter which in this case would be each individual cell from the List that we iterate with “.foreach: (cell, index) =>”.

• val color = if index == 0 then Color.Lime else Color.Green - This is a bit easier, we check if the current index is 0 (meaning if it is the head of the snake), if so we paint it Lime. For the rest of the indices we paint them Green.
  We save the color in the value named “color” (remember that we are iterating the List, so this variable will have a different value for index 0 and index 1)

• Basics.rectangle(x.toInt, y.toInt, cellSize, cellSize, color) - And this final line draws the actual body of the snake. Again, we are iterating the list so it will draw each cell individually. Our list has these coordinates (10, 10), (9, 10) and (8, 10). The variable “x” and “y” have the screen coordinates for each column because we used the “cellToPixel” function. We also use the “cellSize” value and the “color” value that we calculated above.
  So let’s say we are processing the first index (10, 10), which would be the head.

  “cell” would be (10, 10) and “index” would be 0.
  (x, y) would be “cellToPixel(cell)”, in this case the calculation would be “10 * 20 + offsetX” and “10 * 20 + offsetY”.
  ”color” would be Lime because the index is 0.
  So “Basics.rectangle” uses “x, y” for the position, “cellSize” for the size of the rectangle and “color” for the fill color.

Updating main

After going through every function we now have to add these into “main”.

First we need to create the “snake”, for this we will add this line:

val snake = initialSnake

Why are we calling “initialSnake” and not “initialSnake()” (without the parameters)?
Because our “initialSnake” doesn’t take parameters. In Scala, functions with no parameters can be called without the parentheses.

Then we must call “drawSnake” inside the loop, add it after “drawArena”.

drawArena()
drawSnake(snake)

Order matters here.
The arena must be before the snake, this way our arena sits behind the snake.
If we did it the other way around, the snake would be drawn behind the arena.

Later on we will draw more stuff and we will talk about the drawing order more in depth.

Running the code

Open a terminal and run this code:

scala-cli run .

You should see the arena border from Day 2 and also a short green snake in the middle of it.
The head should be slightly brighter because we set it to Lime.

As you can see the snake isn’t moving yet, we will work on that on Day 4.

Recommendations

Try messing around with the size of the snake, change the “initialSnake” function to add more cells to the body.
Try changing the color of other indices, not only the head, for example make half of the body one color and the other half another color.

Try calling “drawSnake” before “drawArena” and see what happens too, that way you’ll get the draw order and how it works.

Thanks a lot for reading, see you on Day 4!

The code you should have at the moment should look like this:

import s2d.core.*
import s2d.types.*

@main
def main(): Unit =
  val screenWidth  = 800
  val screenHeight = 450

  Window.create(screenWidth, screenHeight, “S2D Snake”)
  Input.setExitKey(Key.Escape)
  Timing.setTargetFPS(60)

  while Window.isOpen() do
    Drawing.beginFrame()
    Drawing.clear(Color.Black)
    Drawing.endFrame()

  Window.close()

If you haven’t read Day 1 I’d recommend reading it here.

Summary for today

• A new package import: s2d.shapes.*

• Three new constants to define the size and position of the game arena.

• A new function called “drawArena()”.

Final code for today

Here is what our code will look like at the end of Day 2. Don’t worry, we will go over every new line of code.

import s2d.core.*
import s2d.shapes.*
import s2d.types.*

val cellSize  = 20
val columns   = 20
val rows      = 20
val gameW     = columns * cellSize
val gameH     = rows    * cellSize
val scoreBarH = 60

def offsetX: Int = (Window.width  - gameW) / 2
def offsetY: Int = (Window.height - gameH) / 2 + scoreBarH / 2

@main
def main(): Unit =
  val screenW = gameW + 40
  val screenH = gameH + scoreBarH + 20

  Window.create(screenW, screenH, "S2D Snake")
  Input.setExitKey(Key.Escape)
  Timing.setTargetFPS(60)

  while Window.isOpen() do
    Drawing.beginFrame()
    Drawing.clear(Color.Black)

    drawArena()

    Drawing.endFrame()

  Window.close()

def drawArena(): Unit =
  Basics.rectangleOutline(offsetX, offsetY, gameW, gameH, Color.White)

The new import

Ok, we are ready to start Day 2. The first thing we will do is to add a new import statement at the top of the file.
Go ahead and add this line:

import s2d.shapes.*

As we did on Day 1 with the “core” and “types” packages, we need to import any package that contains functionality we want to use in our game.
The “shapes” package will let us draw basic shapes on the screen, such as rectangles, circles, triangles, etc.

Defining the game area

Before drawing something on the screen we must know where and how big the game area is. On Day 1 I mentioned that for this game we will be using a grid-based arena, so let’s go ahead and define a few values:

val cellSize = 20
val columns = 20
val rows = 20
val gameW = columns * cellSize
val gameH = rows * cellSize
val scoreBarH = 60

I know, that is more than just “a few values”, but let’s go over each line:

• val cellSize = 20 - Defines the size of a single cell (in pixels). What is a cell? Well, our game will have a grid, a cell is one individual square inside that grid.

• val columns = 20 - Defines how many cells our grid will have on the X axis (left to right)

• val rows = 20 - Defines how many cells our grid will have on the Y axis (top to bottom)
  Note: both values (columns and rows) are set to 20, this means we will have a 20x20 (twenty by twenty) cell grid.

• val gameW = columns * cellSize & val gameH = rows * cellSize - What’s going on here? Why are we multiplying values all of a sudden? Let me explain.
  “gameW” and “gameH” stand for “game width” and “game height”, these values are the total dimensions of the game area in pixels.
  To calculate the total width of the game area we must multiply the number of columns by the size of one individual cell. In our code this would mean “20 * 20”, which gives us a total of “400 pixels”. For the height, it is the same. We do “20 * 20” and the total is “400 pixels”. So our game area has a total of “400x400 pixels”.

• val scoreBarH = 60 - This defines the height of the area at the top of the window where we will display the score later on in the series. For now we will use it for the layout of the window.

Notice that all of these are defined as “val”, meaning we won’t change their values during the game. Every time you want to store a value that won’t change during the application runtime, you should use “val”.

Centering the arena on the screen

This is an important part, pay attention to these two lines of code:

def offsetX: Int = (Window.width  - gameW) / 2
def offsetY: Int = (Window.height - gameH) / 2 + scoreBarH / 2

These are “def”, not “val”. This difference is important and I’ll explain why.

A “val” is only evaluated once, when it is defined. A “def” is evaluated every single time it is called in the code.

“Window.width” and “Window.height” (from the core package) return the current dimensions of the window. If we resize the window, the values change.
By making “offsetX” and “offsetY” definitions (def), they recalculate every frame using the latest window size. We need this per frame recalculation to keep the arena centered on the window, even when the size of the window changes.

I know that maybe sounds a bit too complex, so now we will go over what is actually going on in the code.

“offsetX” tells us where the game arena should start on the X axis. To center the arena horizontally (x axis) we use the total window width and subtract the arena width (Window.width - gameW).
For example, if the window is 440 pixels wide and the game area is 400 pixels wide: 440 - 400 = 40
Good, we calculated the “extra” space we have available for our game arena, but we want to center it on the screen. We don’t want 40 pixels of empty space on the left side of the window, we want to distribute it evenly between the left side and the right side.

To do that we divide the total (40) by 2, giving us 20 pixels for each side of the window.

In summary this means the arena should start rendering 20 pixels away from the left side of the window (leaving a 20 pixels gap between the window and the left side of the arena). Since we distributed it evenly the arena will also have a 20 pixels empty space on the right side, centering it on the screen.

“offsetY” now let’s look at this one. The first part is exactly the same as for X but instead of using Window.width and gameW we use Window.height and gameH.

But there is an extra operation at the end, “+ scoreBarH / 2”.

Later on in the series we will add a small scoreboard, this extra bit of code pushes the arena down a few pixels to give space for this scoreboard.

scoreBarH = 60, divided by 2 gives us 30. So we are moving the arena 30 pixels down.

If this is a bit confusing for you I’d recommend running the code a few times and changing the values and taking a look at what happens to the arena on the window.
In my opinion this is the best way of understanding parts of the code, seeing how it directly affects the arena lets you visualize all the calculations.

The “drawArena()” function

We’ve reached the most important function today, the one that actually draws something on the screen.

def drawArena(): Unit =
  Basics.rectangleOutline(offsetX, offsetY, gameW, gameH, Color.White)

On Day 1 we didn’t talk about splitting the code into different functions, so we will do that today.
As your game grows you might start to get lost if every single line of code is inside the “main” function, so it is good practice to split the code into smaller chunks where each of these chunks performs one action. For this we use functions.

In our case we create a new function called “drawArena” that, as the name implies, will draw the arena in the window.

Inside this function we have one line of code:

Basics.rectangleOutline(offsetX, offsetY, gameW, gameH, Color.White)

We are calling a new class here, the “Basics” object from the “shapes” package.
From the Basics class we are using the “rectangleOutline” function.

This function draws only the border of a rectangle without filling the inside.
It takes five parameters: x position, y position, width, height, and a color.

For the position of the rectangle we will pass the “offsetX” and “offsetY” definitions.
For the size we will use the gameW and gameH values. Remember that this rectangle that we want to draw is the game arena, so we will use the size that we defined in the values gameW and gameH.

And for the color we will simply use White (you can choose any color that you want)

With this, we have our function ready to be used in the “main” function.

Updating the main function

Inside the main function from Day 1 we will add a few things.

First of all, we will update the “screenWidth” and “screenHeight” values that we had already defined and we are going to do it like this:

val screenW = gameW + 40
val screenH = gameH + scoreBarH + 20

What we are doing here is setting the size of the window to be the same size as the arena PLUS a little bit more (I also renamed them to make them shorter, but that’s a personal choice)

Again, you can go ahead and remove the 2 additions (+ 40 and + 20) and see what happens. You can also make those values bigger or smaller.
Mess around with the code and try to understand what is going on.

The last update to the main function is to call the “drawArena” function somewhere to actually draw it.

We will place the drawArena function call right between the “Drawing.clear()” and “Drawing.endFrame()” functions.

Drawing.clear(Color.Black)

drawArena()

Drawing.endFrame()

Everything that we will draw in the game will go in this place. Order matters, but for now we only draw the arena.

Small note on coordinates

S2D uses a coordinate system where coordinate (0, 0) is the top-left corner of the window.

X is increased to the right and Y increases downward.

This is the standard for most 2D libraries/frameworks but if you come from a math background this is probably going to be a bit confusing.

As an example try to remember that if anywhere in the code we say “offsetX = 20 and offsetY = 30” that means “20 pixels from the left and 30 from the top”.

Running the code

We’ve done it! We can finally run the code.

Go ahead and open a terminal (cd to your project) and run this command:

scala-cli run .

Again you’ll see a lot of messages on the terminal but after a bit you should see a window opening with a white rectangle, without any fill, centered on the screen.

Congrats, that’s your first drawing with S2D!!

Recommendations

As with Day 1 I’d recommend messing around with the values we defined today.

Try changing cellSize to 30 or 40 and see how it affects the arena.
Change columns and rows to make it wider or taller.
Remove the + 40 and + 20 from the window size and see what happens.

The more you play with the code the better you’ll understand how it works.
Breaking things on purpose is really important and I can’t recommend it enough.

Thanks everyone for reading,
See you on Day 3!

Before we start writing any code we will quickly go over what S2D actually is.

S2D (Scala 2D) is a simple 2D game programming library for Scala. It was inspired by the simplicity of Raylib, being its main goal to remain as simple/basic as possible while giving you a minimal, direct API so you can focus on developing the game, not the engine.

There is one important thing that you must know about S2D, it targets Scala Native (Not the JVM or js).
In simple terms this means the game you build compiles to a native binary. There is no JVM dependencies, no JVM startup, no LWJGL wrappers. S2D is built directly on top of SDL2 and OpenGL.

Targetting Scala Native is, for me, what makes S2D special. Games need a language that lets you handle memory efficientely. With Native you have all the expressiveness of Scala while still having control over the Low Level design.

Why Snake first?

Well… why not? We’ve all built snake at least once in our lives haven’t we?

In all seriousness, I think Snake is a game that is small enough for you to actually finish building it but complete enough to at least teach you a few important concepts.

It has things like a Game Loop, User Input, Movement, Collision, States, etc. All of these are fundamental in game development.
It is also small enough that you can fit it in one single file which is, in my opinion, better when you are starting out.

In our case, it is good enough to introduce S2D’s API piece by piece, in small increments and in an order that makes sense.

What you need before we begin

To follow this series you will need:

• Scala Native up and running on your machine. You should follow the official guide for this. (For this example we will use Scala 3.8.3 and Scala Native 0.5.12)

• SDL2 and OpenGL binaries. S2D_CLI will take care of these for you.

• Coursier. Follow the instructions here to install it.

• Scala CLI. Same as Scala Native and Coursier, follow the official guide.

Installing S2D CLI

S2D uses a small CLI tool called “S2D-CLI”. This tool takes care of generating a basic template, downloading the necessary libraries, setting scala-cli up, etc. It basically sets up the environment for you to just open your code editor and start working on your game.

To install S2D-CLI we will use Coursier. Open a terminal and run this command:

cs install s2d —contrib

This command will pull the latest release of the CLI tool and install it on your computer.
You can check if the CLI was installed running this on the same terminal window:

s2d —help

If everything was installed correctly you should see something like this:

S2D - Scala 2D Native Library CLI Tool

Usage:

s2d --generate Generate a new S2D project template

s2d --help Show this help message

Creating the S2D project

In the same terminal window (or a new one if you closed the other one) navigate to wherever you want to create your projet folder. In my case I ran this command:

cd ~/Developments/

Once you are positioned in your folder of choice, run this command:

s2d —generate

Now the CLI will start asking you for a few things, don’t worry, I’ll guide you.

• Project Name: choose whatever name you like, in my case I chose “snake-game”.

• Build System: in this series we will be using scala-cli, but if you are familiar with SBT you can go ahead and choose that instead.

• Project Path: don’t type anything here, just press enter.

Note: if you are on Linux the CLI will try to download all the needed libraries using sudo, so you might be prompted for you password.

The CLI will load a few things, show some messages on the terminal and once it stops, you should be able to see a folder with the name of your game and a few files inside.

snake-game/

assets/

project.scala

main.scala

SDL.dll

glew32.dll

We will quickly go over these files:

• assets this is an empty folder where you can place all of the assets for your game, such as sprites, fonts, audio, etc.

• project.scala this file contains the information for Scala-CLI. You can open it and take a look at what’s inside, but you won’t be editing it so don’t worry too much about it.

• main.scala this is the entry point of the game and the only file we will be using in the series. You can go ahead an open it on your code editor of choice.

import s2d.core.*
import s2d.types.*

@main
def main(): Unit =
  val screenWidth  = 800
  val screenHeight = 450

  Window.create(screenWidth, screenHeight, "S2D Snake")
  Input.setExitKey(Key.Escape)
  Timing.setTargetFPS(60)

  while Window.isOpen() do
    Drawing.beginFrame()
    Drawing.clear(Color.Black)
    Drawing.endFrame()

  Window.close()

Lets go over this file line by line.

• import s2d.core.* - This imports the “core” package from the S2D library. The core package has really important files inside that let you manage things like Windows, Cursor, User Input, Drawing, etc.

• import s2d.types.* - This imports the “types” package from the S2D library. Inside you’ll see things like “Vector2” or “Color”, these are data types used by the library and it is important to have them.

  Note: the “*” after the import means “import everything that is inside that package”. You can also choose to import only what you need to use.

• @main - This tells the Scala compiler that the function “main” below is the entry point of the program.

• def main(): Unit = - This defines a new function called “main”. Since it has the @main above it, Scala will use it as the entry point of the program.

• val screenWidth = 800 and val screenHeight = 450 - These two lines create two values with the names screenWidth and screenHeight. In Scala the “val” keyword means these values cannot be changed. When a value cannot be change it is called “Immutable”.

• Window.create(screenWidth, screenHeight, “Snake”) - Ok this is the first line where we actually use the library, so what does it do? It opens a window! We use the “Window” class from the “core” package we imported earlier. You have to pass some parameters for it to work, following the order of the code above you give it a “window width”, “window height” and a “window title”. It is important to notice that we aren’t actually displaying anything yet, the window just exists there without an actual purpose.

• Input.setExitKey(Key.Escape) - Here we are using both the “core” package and the “types” package. We use the “Input” class (from core) to call the function “setExitKey”. This function needs a parameter of type “Key” (from types).
  So we pass the “Escape” key as a parameter.
  This function tells S2D what key we must press to close the window (and cleanup, stop the game loop, etc).

• Timing.setTargetFPS(60) - This line uses the “Timing” class and calls the function “setTargetFPS”. In simple terms this tells S2D to cap the the loop speed to 60 frames per second. If this isn’t set the game would run as fast as your CPU allows, so every computer would run the game at different speeds.

• while Window.isOpen() do - We’ve reached the “game loop”. This while statement uses a S2D function as an expression “Window.isOpen()”. This function returns a boolean, true if the window is open, false if it isn’t. So basically this while loop will run as long as the window stays open.

• Drawing.beginFrame() - The first line on the loop starts a new “frame”. What is a frame? Well to keep it as simple as possible, one frame is one complete image of the game, one complete draw. Above we set the loop speed to 60 frames per second, that means we are drawing 60 times every second. So we are calling “beginFrame” 60 times, every second. Every frame can be compared to a new “snapshot” of the game.

• Drawing.clear(Color.Black) - This line is simple, as its name says it “clears” the screen with a given “Color”. It paints the entire screen with the color you choose.

• Drawing.endFrame() - We called “beginFrame()” and now we need a way to end it. Everything between “beginFrame” and “endFrame” will be what you will be drawing on the screen for the current frame. By calling “endFrame” we tell S2D that there is nothing else to draw on that frame and it is ready to be displayed on the screen.

• Window.close() - We’ve made it to the end of the file!! The last line closes the window and also takes care of cleaning up all of the SDL2 and OpenGL resources from memory. This line is run once the “while” loop is over.

Running the code

Open the terminal again if you closed it. From inside the project folder run this:

scala-cli run .

Scala-CLI will compile the entire project (it can take a moment the first time you run it) and launch the game.
If everything is correct you should see an 800x450 black window, with the title “S2D Snake”.

You can go ahead and close it by pressing Escape on your keyboard or the X on the window.

Congratulations, you just run your first S2D project!

Recommendations

I would suggest that you take a look at the files in the project, try to understand the code and mess around a bit with it.
Do things like changing the window color, the title, dimensions, the closing key, etc.

Familiarize yourself with the structure of the code and how it works.

Making games is a long and tough process, it takes time, effort, patience, lots of things.
In my opinion it is really important to know the tools that you are using for your project, understand how these tools work and what you can and cannot do with them.

Day 2

For day 2 we will start drawing things on the screen.

We will draw a simple game board (a grid) that will act as the “arena”.
We will use the “Basics” package, which includes lots of different shapes that we can use to build games, talk about how coordinates work and explain some more game related contents.

Hope you liked the post and let me know if there’s anything that I should work on to make it better for you!

Thanks and see you on Day 2.