My First C++ Game Ep 3: Breakout

⚠️

Heads up: SFML 3 renamed a few things. The install step gives you SFML 3 today, but the short snippets in the steps below are written in the classic SFML 2 style. The differences are small and mechanical: sf::VideoMode({800, 500})sf::VideoMode({800, 500}) (curly braces), the new event loop while (const std::optional e = window.pollEvent())while (const std::optional e = window.pollEvent()) with e->is<sf::Event::Closed>()e->is<sf::Event::Closed>(), sf::Keyboard::Key::Leftsf::Keyboard::Key::Left (add ::Key::Key), and setPosition({x, y})setPosition({x, y}) / move({dx, dy})move({dx, dy}) (curly braces). The ✅ complete finished code at the bottom of this page is full SFML 3 and compiles on a fresh install, use it as your reference.

🧩

Need the game setup? Each episode builds a new game on the same C++/SFML skeleton: the sf::RenderWindowsf::RenderWindow, the game loop and event polling. If you're starting here or need that boilerplate, grab it in one click: Episode 1 setup → · C++ Cheatsheet →

🏗️

Setup & the Paddle

Project skeleton plus a mouse-driven paddle

Active

🎯

Goal for this step

Set up 700×520 Breakout with a paddle that follows the mouse.

1New breakout.cpp with the standard skeleton (Episode 1 muscle memory).
2New input style: the paddle follows the MOUSE, sf::Mouse::getPosition(window).x, centred and clamped.
3Mouse control makes Breakout feel amazing, instant, precise.
4Draw the paddle orange at y 480.

breakout.cpp

sf::RectangleShape paddle(sf::Vector2f(110, 14));
paddle.setFillColor(sf::Color(255, 119, 0));

// in the loop:
float mx = (float)sf::Mouse::getPosition(window).x;
float px = mx - 55;                       // centre on cursor
px = std::max(0.f, std::min(590.f, px));  // clamp
paddle.setPosition({px, 480});sf::RectangleShape paddle(sf::Vector2f(110, 14));
paddle.setFillColor(sf::Color(255, 119, 0));

// in the loop:
float mx = (float)sf::Mouse::getPosition(window).x;
float px = mx - 55;                       // centre on cursor
px = std::max(0.f, std::min(590.f, px));  // clamp
paddle.setPosition({px, 480});

✏️

Fill in the Blanks

+15 XP

The paddle centres on the cursor by subtracting half its (55). The clamp maximum is 700 − 110 = .

🧠

Knowledge Check

+15 XP

Why does mouse control suit Breakout better than keys?

AKeyboards break easily

BPositional control, the paddle goes exactly where you point, enabling precise catches and aimed spin

CSFML has no key input

🧱

The Brick Class

Your first C++ class with a constructor

Locked

🎯

Goal for this step

Write a Brick class and build the wall in a std::vector.

1A class bundles data AND behaviour: shape, points, alive, plus a constructor to set up each brick.
2The wall is std::vector<Brick>, filled by nested loops calling the constructor.
3vector::emplace_back(r, c) constructs the brick right inside the vector, modern and fast.
4Colour by row inside the constructor: the object sets ITSELF up. That is encapsulation, C++ style.

breakout.cpp

class Brick {
public:
    sf::RectangleShape shape;
    int points;
    bool alive = true;

    Brick(int row, int col) {
        shape.setSize(sf::Vector2f(64, 22));
        shape.setPosition({col * 68.f + 12, row * 26.f + 50});
        points = (5 - row) * 10;
        static const sf::Color colours[5] = {
            {248,113,113}, {251,146,60}, {250,204,21},
            {74,222,128}, {96,165,250} };
        shape.setFillColor(colours[row]);
    }
};

std::vector<Brick> bricks;
for (int r = 0; r < 5; r++)
    for (int c = 0; c < 10; c++)
        bricks.emplace_back(r, c);class Brick {
public:
    sf::RectangleShape shape;
    int points;
    bool alive = true;

    Brick(int row, int col) {
        shape.setSize(sf::Vector2f(64, 22));
        shape.setPosition({col * 68.f + 12, row * 26.f + 50});
        points = (5 - row) * 10;
        static const sf::Color colours[5] = {
            {248,113,113}, {251,146,60}, {250,204,21},
            {74,222,128}, {96,165,250} };
        shape.setFillColor(colours[row]);
    }
};

std::vector<Brick> bricks;
for (int r = 0; r < 5; r++)
    for (int c = 0; c < 10; c++)
        bricks.emplace_back(r, c);

⌨️

Code Challenge

+20 XP

Build the wall with the constructor:

breakout.cpp

for (int r = 0; r < 5; r++)
    for (int c = 0; c < 10; c++)
        bricks.for (int r = 0; r < 5; r++)
    for (int c = 0; c < 10; c++)
        bricks.(r, (r, ););

💡 Hint: The modern vector method constructs in place, passing the constructor arguments (row, col).

🧠

Knowledge Check

+15 XP

What does the Brick constructor achieve?

AIt draws the brick

BEvery brick configures ITSELF (position, colour, points) from just (row, col), no outside setup code

CIt deletes old bricks

⚪

Ball Physics

Delta-time ball with wall and paddle bounces

Locked

🎯

Goal for this step

A dt-driven ball that bounces off walls and takes spin from the paddle.

1Ball + velocity in px/sec (Episode 1 skill): 260, -260 to start.
2Walls flip the matching velocity; floor is death (later).
3Paddle rebound with mouse-aimed spin: offset from paddle centre × 4 becomes bvx.
4Clamp total bvx to ±500 so spin cannot go crazy.

breakout.cpp

sf::CircleShape ball(7);
ball.setPosition({343, 300});
float bvx = 260.f, bvy = -260.f;

ball.move({bvx * dt, bvy * dt});
auto p = ball.getPosition();
if (p.x <= 0 || p.x + 14 >= 700) bvx = -bvx;
if (p.y <= 0) bvy = -bvy;

if (ball.getGlobalBounds().findIntersection(paddle.getGlobalBounds()) && bvy > 0) {
    bvy = -bvy;
    float offset = (p.x + 7) - (px + 55);
    bvx = std::max(-500.f, std::min(500.f, offset * 4.f));
}sf::CircleShape ball(7);
ball.setPosition({343, 300});
float bvx = 260.f, bvy = -260.f;

ball.move({bvx * dt, bvy * dt});
auto p = ball.getPosition();
if (p.x <= 0 || p.x + 14 >= 700) bvx = -bvx;
if (p.y <= 0) bvy = -bvy;

if (ball.getGlobalBounds().findIntersection(paddle.getGlobalBounds()) && bvy > 0) {
    bvy = -bvy;
    float offset = (p.x + 7) - (px + 55);
    bvx = std::max(-500.f, std::min(500.f, offset * 4.f));
}

✏️

Fill in the Blanks

+15 XP

The rebound spin is the offset between ball centre and paddle centre times , clamped to ± px/sec.

🧠

Knowledge Check

+15 XP

The ball uses px/second velocities while Snake used grid ticks. When do you pick each?

ATicks are always better

BContinuous motion → dt velocities; cell-based games → grid ticks. Match the technique to the game

Cdt is only for C++

💥

Smart Brick Collision

Detect WHICH side you hit for correct bounces

Locked

🎯

Goal for this step

Bounce correctly off brick sides, not just up/down.

1Naive Breakout always flips bvy, hitting a brick’s SIDE then looks wrong. We compare overlap depths.
2On intersect, compute horizontal and vertical overlap; the SMALLER overlap is the entry side.
3Shallow horizontal overlap → side hit → flip bvx. Otherwise flip bvy.
4Mark the brick dead, add points, break out of the loop.

breakout.cpp

for (auto& brick : bricks) {
    if (!brick.alive) continue;
    sf::FloatRect bb = ball.getGlobalBounds();
    sf::FloatRect kb = brick.shape.getGlobalBounds();
    if (bb.findIntersection(kb)) {
        float overlapX = std::min(bb.position.x + bb.size.x,  kb.position.x + kb.size.x)
                       - std::max(bb.position.x, kb.position.x);
        float overlapY = std::min(bb.position.y + bb.size.y, kb.position.y + kb.size.y)
                       - std::max(bb.position.y, kb.position.y);
        if (overlapX < overlapY) bvx = -bvx;   // side hit
        else                     bvy = -bvy;   // top/bottom hit
        brick.alive = false;
        score += brick.points;
        break;
    }
}for (auto& brick : bricks) {
    if (!brick.alive) continue;
    sf::FloatRect bb = ball.getGlobalBounds();
    sf::FloatRect kb = brick.shape.getGlobalBounds();
    if (bb.findIntersection(kb)) {
        float overlapX = std::min(bb.position.x + bb.size.x,  kb.position.x + kb.size.x)
                       - std::max(bb.position.x, kb.position.x);
        float overlapY = std::min(bb.position.y + bb.size.y, kb.position.y + kb.size.y)
                       - std::max(bb.position.y, kb.position.y);
        if (overlapX < overlapY) bvx = -bvx;   // side hit
        else                     bvy = -bvy;   // top/bottom hit
        brick.alive = false;
        score += brick.points;
        break;
    }
}

💡

Overlap-depth side detection is the same technique 2D engines use under the hood. You just wrote engine code.

⌨️

Code Challenge

+20 XP

Bounce off the correct side:

breakout.cpp

if (overlapX < overlapY) if (overlapX < overlapY)  = -bvx;   // came in from the side
else                      = -bvx;   // came in from the side
else                      = -bvy;
brick.alive =  = -bvy;
brick.alive = ;;

💡 Hint: A shallow horizontal overlap means a side entry, flipping horizontal velocity. The brick then stops existing.

🧠

Knowledge Check

+15 XP

The smaller overlap tells you the entry side because…

ASmall numbers are sides

BThe ball has barely penetrated on the axis it entered from, depth of penetration reveals direction of travel

CSFML sorts overlaps

🧹

Alive Flags vs Erasing

Two cleanup strategies and the erase-remove idiom

Locked

🎯

Goal for this step

Skip dead bricks efficiently and learn the famous C++ idiom.

1We used alive = false and skip dead bricks when drawing/colliding, simple and fast for a fixed wall.
2The alternative is really deleting: the erase-remove idiom, worth knowing because ALL serious C++ uses it.
3Win check with the flag approach: std::none_of over the vector asking if any brick is alive.
4Draw only living bricks.

breakout.cpp

#include <algorithm>

// erase-remove (the famous idiom, for reference):
bricks.erase(
    std::remove_if(bricks.begin(), bricks.end(),
        [](const Brick& b){ return !b.alive; }),
    bricks.end());

// win check with flags:
bool won = std::none_of(bricks.begin(), bricks.end(),
    [](const Brick& b){ return b.alive; });#include <algorithm>

// erase-remove (the famous idiom, for reference):
bricks.erase(
    std::remove_if(bricks.begin(), bricks.end(),
        [](const Brick& b){ return !b.alive; }),
    bricks.end());

// win check with flags:
bool won = std::none_of(bricks.begin(), bricks.end(),
    [](const Brick& b){ return b.alive; });

✏️

Fill in the Blanks

+15 XP

The famous C++ deletion pattern is the erase- idiom. Our simpler approach keeps bricks but marks them with an flag.

🧠

Knowledge Check

+15 XP

Why can we get away with alive-flags here instead of erasing?

AErasing is illegal on vectors

BThe wall is small and fixed (50 bricks), skipping dead ones costs nothing. Erasing matters when lists grow unbounded

CFlags draw faster

❤️

Lives, Loss & Victory

The complete game loop with all three endings

Locked

🎯

Goal for this step

Finish with lives, a losing screen, a winning screen, and restart.

1Ball past y 520: life lost, re-serve from centre; 0 lives → LOSE state.
2All bricks dead → WIN state.
3Freeze physics in end states; draw the message + final score; R rebuilds the wall (clear the vector, refill with the nested loops) and resets everything.
4Three languages, three Breakouts, three times faster each time. THAT is learning to program.

breakout.cpp

int lives = 3;
enum State { PLAY, WIN, LOSE };
State state = PLAY;

if (p.y > 520) {
    lives--;
    ball.setPosition({343, 300});
    bvx = 260; bvy = -260;
    if (lives == 0) state = LOSE;
}
if (won) state = WIN;

// restart on R:
bricks.clear();
for (int r = 0; r < 5; r++)
    for (int c = 0; c < 10; c++)
        bricks.emplace_back(r, c);
lives = 3; score = 0; state = PLAY;int lives = 3;
enum State { PLAY, WIN, LOSE };
State state = PLAY;

if (p.y > 520) {
    lives--;
    ball.setPosition({343, 300});
    bvx = 260; bvy = -260;
    if (lives == 0) state = LOSE;
}
if (won) state = WIN;

// restart on R:
bricks.clear();
for (int r = 0; r < 5; r++)
    for (int c = 0; c < 10; c++)
        bricks.emplace_back(r, c);
lives = 3; score = 0; state = PLAY;

⌨️

Code Challenge

+20 XP

Use a proper C++ enum for the game state:

breakout.cpp

enum State { PLAY, enum State { PLAY, , LOSE };
State state = , LOSE };
State state = ;
if (lives == 0) state = ;
if (lives == 0) state = ;;

💡 Hint: Three named states; the game starts in play mode; zero lives means the losing state.

🧠

Knowledge Check

+15 XP

An enum beats a String state (like Java Ep 4 used) because…

AEnums are colourful

BThe compiler catches typos, sate = PLYA will not compile, while "PLYA" would silently break a string version

CEnums are required by SFML

✅ See the complete finished game , full SFML 3, compiles today

The whole game in one file, written in current SFML 3 (what the install step gives you today) and compiled with g++ + SFML 3.0 to confirm it builds. The step snippets above use classic SFML 2 names; this is your working reference. Build it with g++ breakout.cpp -o breakout -lsfml-graphics -lsfml-window -lsfml-systemg++ breakout.cpp -o breakout -lsfml-graphics -lsfml-window -lsfml-system then run ./breakout./breakout (on Windows, from the MSYS2 MinGW terminal so it finds the SFML DLLs).

breakout.cpp

// Complete C++ Breakout for SFML 3. Build:
//   g++ breakout.cpp -o breakout -lsfml-graphics -lsfml-window -lsfml-system
#include <SFML/Graphics.hpp>
#include <optional>
#include <vector>

struct Brick { sf::FloatRect rect; int row; bool alive; };

int main() {
    sf::RenderWindow window(sf::VideoMode({700, 520}), "C++ Breakout");
    window.setFramerateLimit(60);

    sf::Color rowCol[5] = {
        {248,113,113},{251,146,60},{250,204,21},{74,222,128},{96,165,250}
    };

    float padX = 295, bx = 343, by = 300, bvx = 4, bvy = -4;
    int score = 0, lives = 3;

    std::vector<Brick> bricks;
    auto build = [&]() {
        bricks.clear();
        for (int r = 0; r < 5; r++)
            for (int c = 0; c < 10; c++)
                bricks.push_back({ sf::FloatRect({c*68.f+12, r*26.f+50}, {64.f, 22.f}), r, true });
    };
    build();

    while (window.isOpen()) {
        while (const std::optional event = window.pollEvent())
            if (event->is<sf::Event::Closed>()) window.close();

        float mx = (float)sf::Mouse::getPosition(window).x;
        padX = mx - 55.f; // centre the 110px-wide paddle on the mouse
        if (padX < 0) padX = 0; if (padX > 590) padX = 590;

        bx += bvx; by += bvy;
        if (bx <= 0 || bx + 14 >= 700) bvx = -bvx;
        if (by <= 0) bvy = -bvy;

        sf::FloatRect ball({bx, by}, {14.f, 14.f});
        sf::FloatRect pad({padX, 480.f}, {110.f, 14.f});
        if (ball.findIntersection(pad) && bvy > 0) {
            bvy = -bvy;
            float hit = (bx + 7) - (padX + 55);
            bvx = hit / 12.f;
            if (bvx == 0) bvx = 1;
        }
        for (auto& b : bricks) {
            if (b.alive && ball.findIntersection(b.rect)) {
                b.alive = false; score += (5 - b.row) * 10; bvy = -bvy; break;
            }
        }
        if (by - 14 > 520) {
            if (--lives <= 0) { build(); lives = 3; score = 0; }
            bx = 343; by = 300; bvx = 4; bvy = -4;
        }
        bool anyAlive = false; for (auto& b : bricks) if (b.alive) anyAlive = true;
        if (!anyAlive) { build(); bx = 343; by = 300; }

        window.clear(sf::Color(15, 18, 32));
        for (auto& b : bricks) if (b.alive) {
            sf::RectangleShape r(b.rect.size);
            r.setPosition(b.rect.position);
            r.setFillColor(rowCol[b.row]);
            window.draw(r);
        }
        sf::RectangleShape pd({110.f, 14.f}); pd.setPosition({padX, 480.f});
        pd.setFillColor(sf::Color(255,119,0)); window.draw(pd);
        sf::CircleShape ballShape(7.f); ballShape.setPosition({bx, by});
        window.draw(ballShape);
        window.display();
    }
}// Complete C++ Breakout for SFML 3. Build:
//   g++ breakout.cpp -o breakout -lsfml-graphics -lsfml-window -lsfml-system
#include <SFML/Graphics.hpp>
#include <optional>
#include <vector>

struct Brick { sf::FloatRect rect; int row; bool alive; };

int main() {
    sf::RenderWindow window(sf::VideoMode({700, 520}), "C++ Breakout");
    window.setFramerateLimit(60);

    sf::Color rowCol[5] = {
        {248,113,113},{251,146,60},{250,204,21},{74,222,128},{96,165,250}
    };

    float padX = 295, bx = 343, by = 300, bvx = 4, bvy = -4;
    int score = 0, lives = 3;

    std::vector<Brick> bricks;
    auto build = [&]() {
        bricks.clear();
        for (int r = 0; r < 5; r++)
            for (int c = 0; c < 10; c++)
                bricks.push_back({ sf::FloatRect({c*68.f+12, r*26.f+50}, {64.f, 22.f}), r, true });
    };
    build();

    while (window.isOpen()) {
        while (const std::optional event = window.pollEvent())
            if (event->is<sf::Event::Closed>()) window.close();

        float mx = (float)sf::Mouse::getPosition(window).x;
        padX = mx - 55.f; // centre the 110px-wide paddle on the mouse
        if (padX < 0) padX = 0; if (padX > 590) padX = 590;

        bx += bvx; by += bvy;
        if (bx <= 0 || bx + 14 >= 700) bvx = -bvx;
        if (by <= 0) bvy = -bvy;

        sf::FloatRect ball({bx, by}, {14.f, 14.f});
        sf::FloatRect pad({padX, 480.f}, {110.f, 14.f});
        if (ball.findIntersection(pad) && bvy > 0) {
            bvy = -bvy;
            float hit = (bx + 7) - (padX + 55);
            bvx = hit / 12.f;
            if (bvx == 0) bvx = 1;
        }
        for (auto& b : bricks) {
            if (b.alive && ball.findIntersection(b.rect)) {
                b.alive = false; score += (5 - b.row) * 10; bvy = -bvy; break;
            }
        }
        if (by - 14 > 520) {
            if (--lives <= 0) { build(); lives = 3; score = 0; }
            bx = 343; by = 300; bvx = 4; bvy = -4;
        }
        bool anyAlive = false; for (auto& b : bricks) if (b.alive) anyAlive = true;
        if (!anyAlive) { build(); bx = 343; by = 300; }

        window.clear(sf::Color(15, 18, 32));
        for (auto& b : bricks) if (b.alive) {
            sf::RectangleShape r(b.rect.size);
            r.setPosition(b.rect.position);
            r.setFillColor(rowCol[b.row]);
            window.draw(r);
        }
        sf::RectangleShape pd({110.f, 14.f}); pd.setPosition({padX, 480.f});
        pd.setFillColor(sf::Color(255,119,0)); window.draw(pd);
        sf::CircleShape ballShape(7.f); ballShape.setPosition({bx, by});
        window.draw(ballShape);
        window.display();
    }
}

Brick by Brick!Breakout in C++

Brick by Brick!
Breakout in C++