Creating the Grid

In this lesson, we'll focus on creating the foundational structure for our Minesweeper game. We'll implement the grid system and individual cells, setting the stage for bomb placement and game logic in future lessons.

We'll start by setting up the necessary parameters in our global configuration, then move on to creating the MinesweeperCell and MinesweeperGrid classes.

Finally, we'll implement basic interaction functionality, allowing players to clear cells and prepare our system for future bomb placement.

Updating Globals

We'll begin by updating our Globals.h file with new variables that will define the structure and appearance of our game:

• GRID_COLUMNS and GRID_ROWS determine the number of cells in each dimension. We're creating an 8-column by 4-row grid in this example, but the project can easily adapt to different grid sizes by adjusting these values.
• PADDING represents the visual spacing between elements in our UI.
• CELL_SIZE represents the width and height of each cell in pixels. In this case, each cell will be 50x50 pixels

We'll also add GRID_HEIGHT and GRID_WIDTH variables to calculate the visual size of our grid based on these options.

Finally, we'll update the WINDOW_HEIGHT and WINDOW_WIDTH variables to be large enough to contain our grid, with additional padding around the edge.

These variables will provide a flexible foundation for our game, allowing easy adjustments to the game's appearance and structure.

1// Globals.h
2
3// ...
4
5namespace Config{
6  inline const std::string GAME_NAME{
7    "Minesweeper"};
8  inline constexpr int GRID_COLUMNS{8};
9  inline constexpr int GRID_ROWS{4};
10
11  // Size and Positioning
12  inline constexpr int PADDING{5};
13  inline constexpr int CELL_SIZE{50};
14
15  inline constexpr int GRID_HEIGHT{
16    CELL_SIZE * GRID_ROWS
17    + PADDING * (GRID_ROWS - 1)
18  };
19
20  inline constexpr int GRID_WIDTH{
21    CELL_SIZE * GRID_COLUMNS +
22    PADDING * (GRID_COLUMNS - 1)};
23
24  inline constexpr int WINDOW_HEIGHT{
25    GRID_HEIGHT + PADDING * 2
26  };
27  inline constexpr int WINDOW_WIDTH{
28    GRID_WIDTH + PADDING * 2
29  };
30  
31  // ...
32}
33
34// ...

Creating Cells

Now, we'll create a class for our Minesweeper Cell. Here are some key points about the implementation:

• We expect this class to become quite large, so we'll preemptively separate it into a header (.h) and implementation (.cpp) file.
• The cell inherits from Engine::Button, which in turn inherits from Engine::Rectangle. As such, our constructor will accept x and y arguments to control the position of the cell, and w and h arguments to control the size.
• We'll also accept Row and Col arguments, so the cell knows where it is within the grid.
• We'll override the HandleEvent and Render methods. For now, they just call the base implementation on the Engine::Button class, but we'll expand them soon.

This structure allows our cells to behave like buttons while also maintaining their position within the Minesweeper grid.

1// Minesweeper/Cell.h
2#pragma once
3#include "Engine/Button.h"
4
5class MinesweeperCell : public Engine::Button {
6public:
7  MinesweeperCell(
8    int X, int Y, int W, int H, int Row, int Col
9  );
10
11  void HandleEvent(const SDL_Event& E) override;
12  void Render(SDL_Surface* Surface) override;
13
14  [[nodiscard]]
15  int GetRow() const{ return Row; }
16
17  [[nodiscard]]
18  int GetCol() const{ return Col; }
19
20private:
21  int Row;
22  int Col;
23};

1// Minesweeper/Cell.cpp
2#include <iostream>
3#include "Minesweeper/Cell.h"
4#include "Globals.h"
5
6MinesweeperCell::MinesweeperCell(
7  int x, int y, int w, int h, int Row, int Col)
8  : Button{x, y, w, h}, Row{Row}, Col{Col} {};
9
10void MinesweeperCell::HandleEvent(
11  const SDL_Event& E){
12  Button::HandleEvent(E);
13}
14
15void MinesweeperCell::Render(
16  SDL_Surface* Surface){
17  Button::Render(Surface);
18}

Creating the Grid

Next, we'll implement our MinesweeperGrid class. Here are the important aspects of this class:

• The constructor accepts x and y arguments, controlling where the grid should be drawn on the surface.
• The constructor creates a two-dimensional grid of MinesweeperCell objects, based on the configuration options in our Globals.h file.
• It stores all these cells in a std::vector called Children.
• The x, y, w, h, row, and col arguments for each invocation of the MinesweeperCell constructor are being calculated in the loop body. This calculation ensures that each cell is positioned correctly within the grid, taking into account the cell size and padding.
• It has public Render() and HandleEvent() methods. These methods iterate over all the MinesweeperCell objects in the grid, and call their Render() and HandleEvent() methods respectively.

This grid class will manage the collection of cells and handle the rendering and event distribution for the entire Minesweeper board.

1// Minesweeper/Grid.h
2#pragma once
3#include <vector>
4#include "Globals.h"
5#include "Minesweeper/Cell.h"
6
7class MinesweeperGrid {
8public:
9  MinesweeperGrid(int x, int y){
10    using namespace Config;
11    Children.reserve(GRID_COLUMNS * GRID_ROWS);
12    for (int Col{1}; Col <= GRID_COLUMNS; ++Col) {
13      for (int Row{1}; Row <= GRID_ROWS; ++Row) {
14        constexpr int Spacing{CELL_SIZE + PADDING};
15        Children.emplace_back(
16          x + (Spacing) * (Col - 1),
17          y + (Spacing) * (Row - 1),
18          CELL_SIZE, CELL_SIZE, Row, Col
19        );
20      }
21    }
22  }
23
24  void Render(SDL_Surface* Surface){
25    for (auto& Child : Children) {
26      Child.Render(Surface);
27    }
28  }
29
30  void HandleEvent(const SDL_Event& E){
31    for (auto& Child : Children) {
32      Child.HandleEvent(E);
33    }
34  }
35
36  std::vector<MinesweeperCell> Children;
37};

Passing Through Events

We'll now update our MinesweeperUI class to construct the MinesweeperGrid. Here's what you need to know:

• The MinesweeperUI has Render() and HandleEvent() methods, which are being called from the main event loop.
• The class is now forwarding those calls to the MinesweeperGrid component.
• As we saw above, the MinesweeperGrid component is then forwarding those HandleEvent and Render() calls to all of its Children - i.e., the MinesweeperCell objects.
• The MinesweeperGrid is being constructed by passing the Padding value from our config, causing the Grid to be drawn slightly offset from the top left edge of the window surface.

This structure ensures that events are properly distributed throughout our game components, and that everything is rendered in the correct position.

1// Minesweeper/UI.h
2#pragma once
3#include "Globals.h"
4#include "Minesweeper/Grid.h"
5
6class MinesweeperUI {
7public:
8  void Render(SDL_Surface* Surface){
9    Grid.Render(Surface);
10  }
11
12  void HandleEvent(const SDL_Event& E){
13    Grid.HandleEvent(E);
14  }
15
16private:
17  MinesweeperGrid Grid{
18    Config::PADDING, Config::PADDING
19  };
20};

Running our program, we should now see a grid of buttons, responding to our cursor:

Clearing Cells

Now we'll expand our MinesweeperCell objects to let users "clear" them by left-clicking. We'll implement this using a ClearCell() method and an isCleared member variable. Our Engine::Button class has a virtual HandleLeftClick() method which we can override.

1// Minesweeper/Cell.h
2#pragma once
3// ...
4
5class MinesweeperCell : public Engine::Button {
6public:  
7  // ...
8
9protected:
10  void HandleLeftClick() override;
11
12private:
13  void ClearCell();
14  bool isCleared{false};
15  // ...
16};

In the implementation of these functions:

• SetIsDisabled() is inherited from Engine::Button, and will cause our object to stop reacting to mouse events.
• SetColor is inherited from Engine::Rectangle (via Engine::Button) and will change the color of our button. We change the color to a new value that we'll add to the Config namespace in our Globals.h.

This implementation allows users to interact with our cells, changing their state when clicked.

1// Minesweeper/Cell.cpp
2
3// ...
4
5void MinesweeperCell::ClearCell(){
6  if (isCleared) return;
7  isCleared = true;
8  SetIsDisabled(true);
9  SetColor(Config::BUTTON_CLEARED_COLOR);
10}
11
12void MinesweeperCell::HandleLeftClick(){
13  ClearCell();
14}
15
16// ...

1// Globals.h
2// ...
3
4namespace Config{
5  // ...
6  inline constexpr SDL_Color BUTTON_CLEARED_COLOR{
7    240, 240, 240, 255};
8  // ...
9}
10// ...

Reporting Cell Cleared

A cell being cleared is an important action in the context of the wider game - for example, it can trigger a game-over state if the cell contains a mine, and adjacent cells may also need to react. To implement the gameplay, we'll need to notify other components every time a cell is cleared, so we'll use the SDL event loop.

We'll add our first custom event type to our UserEvents namespace:

1// Globals.h
2
3// ...
4
5namespace UserEvents{
6  inline Uint32 CELL_CLEARED =
7    SDL_RegisterEvents(1);
8}
9
10// ...

As we develop our game, cells will need to report various events. To streamline this process, let's create a ReportEvent() helper method.

This method will accept an event type parameter, which SDL represents as a 32-bit unsigned integer. Here's how we'll define it in our MinesweeperCell class:

1// Minesweeper/Cell.h
2
3// ...
4
5#pragma once
6// ...
7
8class MinesweeperCell : public Engine::Button {
9public:
10  // ...
11
12protected:
13  // ...
14
15private:
16  void ReportEvent(uint32_t EventType);
17  // ...
18};

In the implementation, we’ll create an event of that type. We’ll also attach a pointer to ourselves using the this keyword, so consumers of the event can understand which cell was cleared. We’ll finally dispatch the event into the queue using SDL_PushEvent():

1// Minesweeper/Cell.cpp
2
3// ...
4
5void MinesweeperCell::ReportEvent(
6  uint32_t EventType){
7  SDL_Event event{EventType};
8  event.user.data1 = this;
9  SDL_PushEvent(&event);
10}
11
12// ...

Finally, we’ll update our ClearCell() implementation to call our ReportEvent() function, passing the correct type.

We’ll also update HandleEvent() to react to a cell being cleared. For now, we’ll just log out a message, but we’ll build upon this later:

1// Minesweeper/Cell.cpp
2
3// ...
4
5void MinesweeperCell::ClearCell(){
6  if (isCleared) return;
7  isCleared = true;
8  SetIsDisabled(true);
9  SetColor(Config::BUTTON_CLEARED_COLOR);
10  ReportEvent(UserEvents::CELL_CLEARED); 
11}
12
13void MinesweeperCell::HandleEvent(
14  const SDL_Event& E){
15  if (E.type == UserEvents::CELL_CLEARED) {
16    // TODO
17    std::cout << "A Cell Was Cleared\n";
18  }
19  Button::HandleEvent(E);
20}
21
22// ...

Testing

At this point, you should test the application to verify it's working correctly. You should see the grid as before, but now, left-clicking on a cell will clear it, causing it to change color and stop reacting to future mouse events.

Additionally, check the terminal to verify the event handling is working correctly. You should see "A Cell Was Cleared" logged out multiple times whenever you clear a cell.

1A Cell Was Cleared
2A Cell Was Cleared
3A Cell Was Cleared
4// ...

It's important to understand why multiple log messages appear for each cleared cell:

1. When ClearCell() is called within any of our cells, an SDL_Event is pushed into the queue.
2. The event loop (in main.cpp) receives this event and forwards it to the HandleEvent() method of our MinesweeperUI object.
3. The MinesweeperUI forwards the event to the HandleEvent() method of our MinesweeperGrid object.
4. The MinesweeperGrid forwards the event to the HandleEvent() method of every MinesweeperCell object in its Children array, allowing each cell to react to the event if necessary.

This is why "A Cell Was Cleared" is logged out multiple times. A single left click clears a single cell, but every cell is notified of the action and can react accordingly.

Complete Code

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

1#pragma once
2
3#define SHOW_DEBUG_HELPERS
4
5#include <iostream>
6#include <SDL.h>
7#include <string>
8
9namespace UserEvents{
10  inline Uint32 CELL_CLEARED =
11    SDL_RegisterEvents(1);
12}
13
14namespace Config{
15  // Game Settings
16  inline const std::string GAME_NAME{
17    "Minesweeper"};
18  inline constexpr int GRID_COLUMNS{8};
19  inline constexpr int GRID_ROWS{4};
20
21  // Size and Positioning
22  inline constexpr int PADDING{5};
23  inline constexpr int CELL_SIZE{50};
24
25  inline constexpr int GRID_HEIGHT{
26    CELL_SIZE * GRID_ROWS
27    + PADDING * (GRID_ROWS - 1)
28  };
29
30  inline constexpr int GRID_WIDTH{
31    CELL_SIZE * GRID_COLUMNS +
32    PADDING * (GRID_COLUMNS - 1)};
33
34  inline constexpr int WINDOW_HEIGHT{
35    GRID_HEIGHT + PADDING * 2
36  };
37
38  inline constexpr int WINDOW_WIDTH{
39    GRID_WIDTH + PADDING * 2};
40
41  // Colors
42  inline constexpr SDL_Color BACKGROUND_COLOR{
43    170, 170, 170, 255};
44  inline constexpr SDL_Color BUTTON_COLOR{
45    200, 200, 200, 255};
46  inline constexpr SDL_Color BUTTON_HOVER_COLOR{
47    220, 220, 220, 255};
48  inline constexpr SDL_Color
49  BUTTON_CLEARED_COLOR{
50    240, 240, 240, 255};
51
52  // Asset Paths
53  inline const std::string FONT{
54    "Rubik-SemiBold.ttf"};
55}
56
57namespace Utils{
58#ifdef SHOW_DEBUG_HELPERS
59  inline void CheckSDLError(
60    const std::string& Msg){
61    const char* error = SDL_GetError();
62    if (*error != '\0') {
63      std::cerr << Msg << " Error: " << error <<
64        '\n';
65      SDL_ClearError();
66    }
67  }
68#endif
69}

1#pragma once
2#include "Globals.h"
3#include "Minesweeper/Grid.h"
4
5class MinesweeperUI {
6public:
7  void Render(SDL_Surface* Surface){
8    Grid.Render(Surface);
9  }
10
11  void HandleEvent(const SDL_Event& E){
12    Grid.HandleEvent(E);
13  }
14
15private:
16  MinesweeperGrid Grid{
17    Config::PADDING, Config::PADDING
18  };
19};

1#pragma once
2#include <vector>
3#include "Globals.h"
4#include "Minesweeper/Cell.h"
5
6class MinesweeperGrid {
7public:
8  MinesweeperGrid(int x, int y){
9    using namespace Config;
10    Children.reserve(GRID_COLUMNS * GRID_ROWS);
11    for (int Col{1}; Col <= GRID_COLUMNS; ++
12         Col) {
13      for (int Row{1}; Row <= GRID_ROWS; ++
14           Row) {
15        constexpr int Spacing{
16          CELL_SIZE + PADDING};
17        Children.emplace_back(
18          x + (Spacing) * (Col - 1),
19          y + (Spacing) * (Row - 1),
20          CELL_SIZE, CELL_SIZE, Row, Col
21        );
22      }
23    }
24  }
25
26  void Render(SDL_Surface* Surface){
27    for (auto& Child : Children) {
28      Child.Render(Surface);
29    }
30  }
31
32  void HandleEvent(const SDL_Event& E){
33    for (auto& Child : Children) {
34      Child.HandleEvent(E);
35    }
36  }
37
38  std::vector<MinesweeperCell> Children;
39};

1#pragma once
2#include "Engine/Button.h"
3#include "Engine/Image.h"
4
5class MinesweeperCell : public Engine::Button {
6public:
7  MinesweeperCell(
8    int X, int Y, int W, int H, int Row, int Col
9  );
10
11  void HandleEvent(const SDL_Event& E) override;
12  void Render(SDL_Surface* Surface) override;
13
14  [[nodiscard]]
15  int GetRow() const{ return Row; }
16
17  [[nodiscard]]
18  int GetCol() const{ return Col; }
19
20protected:
21  void HandleLeftClick() override;
22
23private:
24  void ClearCell();
25  void ReportEvent(uint32_t EventType);
26
27  int Row;
28  int Col;
29  bool isCleared{false};
30};

1#include <iostream>
2#include "Minesweeper/Cell.h"
3#include "Globals.h"
4
5MinesweeperCell::MinesweeperCell(
6  int x, int y, int w, int h, int Row, int Col)
7  : Button{x, y, w, h}, Row{Row}, Col{Col} {};
8
9void MinesweeperCell::HandleEvent(
10  const SDL_Event& E){
11  if (E.type == UserEvents::CELL_CLEARED) {
12    // TODO
13    std::cout << "A Cell Was Cleared\n";
14  }
15  Button::HandleEvent(E);
16}
17
18void MinesweeperCell::Render(
19  SDL_Surface* Surface){
20  Button::Render(Surface);
21}
22
23void MinesweeperCell::ClearCell(){
24  if (isCleared) return;
25  isCleared = true;
26  SetIsDisabled(true);
27  SetColor(Config::BUTTON_CLEARED_COLOR);
28  ReportEvent(UserEvents::CELL_CLEARED);
29}
30
31void MinesweeperCell::ReportEvent(
32  uint32_t EventType){
33  SDL_Event event{EventType};
34  event.user.data1 = this;
35  SDL_PushEvent(&event);
36}
37
38void MinesweeperCell::HandleLeftClick(){
39  ClearCell();
40}

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

Summary

In this lesson, we've laid the groundwork for our Minesweeper game by implementing the grid system and individual cells. We've set up the global configuration, created classes for cells and the grid, and implemented basic interaction functionality.

Key progress in this lesson includes:

1. Defining the game's structure in Globals.h
2. Creating the MinesweeperCell class with clearing functionality
3. Implementing the MinesweeperGrid class to manage all cells
4. Setting up event handling and propagation through the game components
5. Implementing a custom event system for cell clearing

In the next lesson, we'll build upon these foundations and place bombs randomly within our grid. We'll implement the logic for bomb placement, update our cell-clearing functionality to handle bombs, and begin implementing the core game mechanics.

Next Lesson

Adding Bombs to the Minesweeper Grid

Updating the game to to place bombs randomly in the grid and render them when cells are cleared.

ContinueView Course