Building the Snake Grid

Rendering Cells

To make our grid visible, we’ll need to render all of our cells. The visual position of each cell should correspond with the Row and Column member variables we initialized it with.

We’d also like players to be able to tell where one cell ends and the next begins, so we’ll render them such that adjacent cells have a slightly different color. By the end of this section, we’ll want our Grid to look like this:

Currently, the Render() function of our Cell objects is already being called on every frame. We just need to implement the logic in that function to render our cell onto the Surface that is provided as an argument. In this case, that Surface is the window surface.

As you may remember from earlier in the course, we can use the SDL_FillRect() function to render a rectangle onto a surface. It looks like this:

1void Render(SDL_Surface* Surface) {
2  SDL_FillRect(Surface, &Rect, Color);
3}

In this example, &Rect is a pointer to an SDL_Rect defining where we want the rectangle to be, and Color is an SDL_Color defining the color we want to use. Let’s figure out what this rectangle and color should be for each cell.

Determining Rendering Position

An SDL_Rect is a simple struct with 4 variables, defining a rectangle. The variables are, in order:

• x: How far the rectangle is from the left edge
• y: How far the rectangle is from the top edge
• w: The width of the rectangle
• h: The height of the rectangle

For each Cell object, we need to construct an SDL_Rect to specify where that cell should be rendered within the SDL_Surface provided to its Render() function. In this program, the Surface we’re providing is the window surface, so the SDL_Rect defines where the cell should appear within our game’s window.

Each cell has Row and Column member variables, so to get the required position based on those variables, our SDL_Rect will be as follows:

• Our x will be based on multiplying which Column we’re in by the width of each column (from the CELL_SIZE variable in GameConfig.h). We’ll also add the PADDING value from GameConfig.h so there’s a gap between the left edge of the window and the left edge of the grid.
• Our y will be based on multiplying which Row we’re in by the height of each row (from the CELL_SIZE variable in GameConfig.h). We’ll also add the PADDING value from GameConfig.h so there’s a gap between the top edge of the window and the top edge of the grid.
• The w will be the width of the cell, from the CELL_SIZE variable in GameConfig.h.
• The h will be the height of the cell, from the CELL_SIZE variable in GameConfig.h.

We don’t want to perform these calculations in our Render() function, as this gets called every frame. Instead, let’s store it as a BackgroundRect member variable, and perform these calculations a single time when our Cell is initialized:

1// Cell.h
2// ...
3#include "GameConfig.h"
4
5class Cell {
6  // ...
7private:
8  // ...
9  int Row;
10  int Column;
11  SDL_Rect BackgroundRect{
12    Column * Config::CELL_SIZE + Config::PADDING,
13    Row * Config::CELL_SIZE + Config::PADDING,
14    Config::CELL_SIZE,
15    Config::CELL_SIZE
16  };
17};

Note that because we’re using Row and Column in this initialization, we need to ensure BackgroundRect is initialized after these variables.

Configuring Cell Colors

Let’s configure the alternating colors used by our grid by adding CELL_COLOR_A and CELL_COLOR_B variables to our GameConfig.h file:

1// GameConfig.h
2// ...
3
4namespace Config{
5  // ...
6
7  // Colors
8  // ...
9  inline constexpr SDL_Color CELL_COLOR_A{
10    171, 214, 82, 255};
11  inline constexpr SDL_Color CELL_COLOR_B{
12    161, 208, 74, 255};
13  // ...
14}
15
16// ...

Determining Background Color

To create the alternating color pattern, we can split out cells into "even" and "odd" cells. We can do this by adding the row and column together and using the modulo operator % to determine if the sum is divisible by 2. We covered the modulus operator and similar techniques in our beginner course:

The Modulus Operator (%)

Learn how we can use the modulus operator to get the remainder of integer division, and some common use cases.

We’ll then give the even and odd cells different colors. Again, we don’t want to perform this calculation on every frame, so we’ll do it a single time when our Cell is first created, and store the result as a member variable called BackgroundColor. Again, because the BackgroundColor initialization depends on the Row and Column values, we need to ensure Row and Column are initialized first:

1// Cell.h
2// ...
3#include "GameConfig.h"
4
5class Cell {
6  // ...
7private:
8  // ...
9  int Row;
10  int Column;
11  // ...
12  SDL_Color BackgroundColor{
13    (Row + Column) % 2 == 0
14      ? Config::CELL_COLOR_A
15      : Config::CELL_COLOR_B
16  };
17};

Surface Blitting

Now we can implement our cell's Render() method to draw onto the window surface. We'll use SDL's SDL_FillRect() function to render our cell at the position specified by BackgroundRect using the color stored in BackgroundColor.

The SDL_FillRect() function expects colors in a format specific to the surface we're drawing on. We convert our SDL_Color to this format using SDL_MapRGB(), which takes three parameters for red, green, and blue color components:

1// Cell.h
2// ...
3
4class Cell {
5public:
6  // ...
7  void Render(SDL_Surface* Surface) {
8    SDL_FillRect(Surface, &BackgroundRect,
9      SDL_MapRGB(
10        Surface->format,
11        BackgroundColor.r,
12        BackgroundColor.g,
13        BackgroundColor.b
14      )
15    );
16  }
17  // ...
18};

When we run our program now, we should see a checkerboard pattern of alternating colors filling our window:

Rendering Apples and Snake Segments

In addition to rendering a solid background color, our Cell objects need the ability to render snake segments and apple images. Let’s add a CellState type and data member to keep track of whether our Cell contains a snake segment, apple, or if it is empty:

1// Cell.h
2// ...
3
4enum CellState { Snake, Apple, Empty };
5
6class Cell {
7  // ...
8
9private:
10  CellState CellState;
11};

Most of our cells will initially be empty, but we also want our game to start with a snake and an apple on the grid. We’ll start with a two-segment snake in columns 2 and 3 of the middle row, and the first apple in column 11 of that same row:

We could write this code in our constructor, but later, we’ll want the ability to restart our game and reset our cells back to this initial state. Therefore, we’ll create a dedicated private Initialize() function for this which we can reuse as needed. For now, we’ll just call it from our constructor:

1// Cell.h
2// ...
3
4class Cell {
5public:
6  Cell(int Row, int Column, Assets& Assets)
7  : Row(Row),
8    Column(Column),
9    Assets{Assets}
10  {
11    Initialize();
12  }
13  
14private:
15  void Initialize() {
16    CellState = Empty;
17    int MiddleRow{Config::GRID_ROWS / 2};
18    if (Row == MiddleRow && Column == 2) {
19      CellState = Snake;
20    } else if (Row == MiddleRow && Column == 3) {
21      CellState = Snake;
22    } else if (Row == MiddleRow && Column == 11) {
23      CellState = Apple;
24    }
25  }
26  // ...
27};

Let’s update our Render() method so we can see these apples and snake segments. We’ll first update GameConfig.h to define a color for our snake segments:

1// GameConfig.h
2// ...
3
4namespace Config{
5  // ...
6  inline constexpr SDL_Color SNAKE_COLOR{
7    67, 117, 234, 255};
8  // ...
9}
10
11// ...

In Cell.h, after rendering our background color, we’ll check if our CellState is either Apple or Snake. We’ll then render the apple or snake on top of our background as appropriate.

1// Cell.h
2// ...
3
4class Cell {
5public:
6  // ...
7  void Render(SDL_Surface* Surface) {
8    SDL_FillRect(Surface, &BackgroundRect,
9      SDL_MapRGB(
10        Surface->format,
11        BackgroundColor.r,
12        BackgroundColor.g,
13        BackgroundColor.b
14      )
15    );
16
17    if (CellState == Apple) {
18      Assets.Apple.Render(Surface, &BackgroundRect);
19    } else if (CellState == Snake) {
20      SDL_FillRect(Surface, &BackgroundRect,
21        SDL_MapRGB(
22          Surface->format,
23          Config::SNAKE_COLOR.r,
24          Config::SNAKE_COLOR.g,
25          Config::SNAKE_COLOR.b
26        )
27      );
28    }
29  }
30};

Our program should now look like this:

Complete Code

Complete versions of the files we changed in this part are available below

1#pragma once
2#define CHECK_ERRORS
3
4#include <iostream>
5#include <SDL.h>
6#include <string>
7
8namespace Config{
9  // Game Settings
10  inline const std::string GAME_NAME{"Snake"};
11
12  inline constexpr int GRID_COLUMNS{16};
13  static_assert(
14    GRID_COLUMNS >= 12,
15    "Grid must be at least 12 columns wide");
16
17  inline constexpr int GRID_ROWS{5};
18  static_assert(
19    GRID_ROWS >= 5,
20    "Grid must be at least 5 rows tall");
21
22  // Size and Positioning
23  inline constexpr int PADDING{5};
24  inline constexpr int CELL_SIZE{36};
25  inline constexpr int FOOTER_HEIGHT{0};
26
27  inline constexpr int GRID_HEIGHT{
28    CELL_SIZE * GRID_ROWS};
29  inline constexpr int GRID_WIDTH{
30    CELL_SIZE * GRID_COLUMNS};
31
32  inline constexpr int WINDOW_HEIGHT{
33    GRID_HEIGHT + PADDING * 2};
34  inline constexpr int WINDOW_WIDTH{
35    GRID_WIDTH + PADDING * 2};
36
37  // Colors
38  inline constexpr SDL_Color BACKGROUND_COLOR{
39    85, 138, 52, 255};
40  inline constexpr SDL_Color CELL_COLOR_A{
41    171, 214, 82, 255};
42  inline constexpr SDL_Color CELL_COLOR_B{
43    161, 208, 74, 255};
44  inline constexpr SDL_Color SNAKE_COLOR{
45    67, 117, 234, 255};
46  inline constexpr SDL_Color FONT_COLOR{
47    255, 255, 255, 255};
48
49  // Asset Paths
50  inline const std::string APPLE_IMAGE{
51    "apple.png"};
52  inline const std::string FONT{
53    "Rubik-SemiBold.ttf"};
54}
55
56inline void CheckSDLError(
57  const std::string& Msg){
58#ifdef CHECK_ERRORS
59  const char* error = SDL_GetError();
60  if (*error != '\0') {
61    std::cerr << Msg << " Error: "
62      << error << '\n';
63    SDL_ClearError();
64  }
65#endif
66}

1#pragma once
2#include <SDL.h>
3#include <vector>
4#include "Cell.h"
5#include "GameConfig.h"
6
7class Grid {
8public:
9  Grid(Assets& Assets) {
10    using namespace Config;
11    Cells.reserve(GRID_ROWS * GRID_COLUMNS);
12    for (int R{0}; R < GRID_ROWS; ++R) {
13      for (int C{0}; C < GRID_COLUMNS; ++C) {
14        Cells.emplace_back(R, C, Assets);
15      }
16    }
17  }
18
19  void HandleEvent(SDL_Event& E) {
20    for (auto& Cell : Cells) {
21      Cell.HandleEvent(E);
22    }
23  }
24
25  void Tick(Uint32 DeltaTime) {
26    for (auto& Cell : Cells) {
27      Cell.Tick(DeltaTime);
28    }
29  }
30
31  void Render(SDL_Surface* surface) {
32    for (auto& Cell : Cells) {
33      Cell.Render(surface);
34    }
35  }
36
37private:
38  std::vector<Cell> Cells;
39};

1#pragma once
2#include <SDL.h>
3#include "GameConfig.h"
4#include "Assets.h"
5
6enum CellState { Snake, Apple, Empty };
7
8class Cell {
9public:
10  Cell(int Row, int Column, Assets& Assets)
11  : Row(Row),
12    Column(Column),
13    Assets{Assets}
14  {
15    Initialize();
16  }
17
18  void HandleEvent(SDL_Event& E) {}
19
20  void Tick(Uint32 DeltaTime) {}
21
22  void Render(SDL_Surface* Surface) {
23    SDL_FillRect(Surface, &BackgroundRect,
24      SDL_MapRGB(
25        Surface->format,
26        BackgroundColor.r,
27        BackgroundColor.g,
28        BackgroundColor.b
29      )
30    );
31
32    if (CellState == Apple) {
33      Assets.Apple.Render(Surface, &BackgroundRect);
34    } else if (CellState == Snake) {
35      SDL_FillRect(Surface, &BackgroundRect,
36        SDL_MapRGB(
37          Surface->format,
38          Config::SNAKE_COLOR.r,
39          Config::SNAKE_COLOR.g,
40          Config::SNAKE_COLOR.b
41        )
42      );
43    }
44  }
45
46private:
47  void Initialize() {
48    CellState = Empty;
49    int MiddleRow{Config::GRID_ROWS / 2};
50    if (Row == MiddleRow && Column == 2) {
51      CellState = Snake;
52    } else if (Row == MiddleRow && Column == 3) {
53      CellState = Snake;
54    } else if (Row == MiddleRow && Column == 11) {
55      CellState = Apple;
56    }
57  }
58
59  int Row;
60  int Column;
61  CellState CellState;
62  Assets& Assets;
63
64  SDL_Rect BackgroundRect{
65    Column * Config::CELL_SIZE + Config::PADDING,
66    Row * Config::CELL_SIZE + Config::PADDING,
67    Config::CELL_SIZE,
68    Config::CELL_SIZE
69  };
70
71  SDL_Color BackgroundColor{
72    (Row + Column) % 2 == 0
73      ? Config::CELL_COLOR_A
74      : Config::CELL_COLOR_B
75  };
76};

1#pragma once
2#include <SDL.h>
3#include "Grid.h"
4#include "Assets.h"
5
6class GameUI {
7 public:
8  GameUI() : Grid{Assets} {}
9
10  void HandleEvent(SDL_Event& E) {
11    Grid.HandleEvent(E);
12  }
13
14  void Tick(Uint32 DeltaTime) {
15    Grid.Tick(DeltaTime);
16  }
17
18  void Render(SDL_Surface* Surface) {
19    Grid.Render(Surface);
20  }
21
22 private:
23  Grid Grid;
24  Assets Assets;
25};

Files not listed above have not been changed since the previous section.

Summary

In this lesson, we established the foundational grid architecture for our Snake game. We implemented a cell-based system that manages game state and rendering through two key classes: Cell and Grid.

Key steps from this lesson:

• Created a Cell class to manage individual grid positions
• Created a CellState enum to track cell contents
• Managed rendering positions using SDL_Rect structs
• Created an alternating color pattern for visual clarity
• Rendered the cells via surface blitting using SDL_FillRect()
• Implemented a Grid class to coordinate multiple cells
• Used configuration variables to make the grid system flexible and maintainable
• Initialized the starting snake position and the first apple