⚙️ My First C++ Game · Episode 1 of 7 · See All Episodes
🏓 Episode 1 · Beginner · No C++ Experience Needed

Compile & Play!
Pong in C++

Your first C++ game with the SFML library: two paddles, a bouncing ball, scores and an AI. C++ powers Unreal, most AAA studios and every console, and it starts right here with Pong.

👶 Ages 12+ ⏱️ ~2 Hours ⚙️ C++ & SFML ✓ Free
🧰 SFML setup 🔁 Game loop 🟪 Shapes & drawing ⌨️ Real-time input ⏱️ Delta time 🤖 Simple AI
⚙️ Let's Build! Start Step 1 ← All Episodes 🖨️ Print Guide
⭐
0 XP
Level 1
🔥0
Your Progress 0 / 6 steps
⚠️
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.
1
🧰
Install a Compiler & SFML
Set up g++/MSVC and the SFML multimedia library
Active
🎯
Goal for this step

Get a C++ toolchain and SFML installed, and compile a first window.

  • 1Install a compiler: on Windows the easiest is MSYS2 (which gives you g++), or Visual Studio Community. Mac: xcode-select --install. Linux: sudo apt install g++.
  • 2Install SFML: MSYS2 → pacman -S mingw-w64-ucrt-x86_64-sfml; Mac → brew install sfml; Linux → sudo apt install libsfml-dev.
  • 3Create pong.cpp with the code below.
  • 4Compile & run: g++ pong.cpp -o pong -lsfml-graphics -lsfml-window -lsfml-system then ./pong.
  • 5A dark 800×500 window should appear. If it does, your entire toolchain works, the hardest step of C++ is behind you!
pong.cpp
#include <SFML/Graphics.hpp>
#include <optional>

int main() {
    sf::RenderWindow window(sf::VideoMode({800, 500}), "C++ Pong");
    window.setFramerateLimit(60);

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

        window.clear(sf::Color(15, 18, 32));
        window.display();
    }
    return 0;
}#include <SFML/Graphics.hpp>
#include <optional>

int main() {
    sf::RenderWindow window(sf::VideoMode({800, 500}), "C++ Pong");
    window.setFramerateLimit(60);

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

        window.clear(sf::Color(15, 18, 32));
        window.display();
    }
    return 0;
}
👨‍👧
Parent note: Everything here is free and open-source. The compile command looks scary but never changes, save it in a build.bat / build.sh file and forget it.
✏️
Fill in the Blanks
+15 XP
C++ must be before it runs, unlike Python. The three SFML libraries we link are graphics, window and .
🧠
Knowledge Check
+15 XP
What does -lsfml-graphics in the compile command do?
ANames the output file
BLinks your program against the SFML graphics library so window/draw calls exist
CTurns on fast graphics mode
2
🏓
Paddles & Real-Time Input
RectangleShapes moved with isKeyPressed
Locked
🎯
Goal for this step

Draw two paddles and move them with W/S and Up/Down.

  • 1SFML gives us sf::RectangleShape, set a size, a position and a colour.
  • 2Real-time input is one call: sf::Keyboard::isKeyPressed(sf::Keyboard::W), true while held.
  • 3Move paddles with shape.move({0, ±speed}), then clamp using getPosition().
  • 4Draw between clear() and display(): window.draw(paddle1);
pong.cpp
sf::RectangleShape paddle1(sf::Vector2f(14, 90));
paddle1.setPosition({20, 205});
paddle1.setFillColor(sf::Color::White);

sf::RectangleShape paddle2 = paddle1;
paddle2.setPosition({766, 205});

// inside the loop, before drawing:
float speed = 6.f;
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::W))    paddle1.move({0, -speed});
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::S))    paddle1.move({0,  speed});
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::Up))   paddle2.move({0, -speed});
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::Down)) paddle2.move({0,  speed});

window.draw(paddle1);
window.draw(paddle2);sf::RectangleShape paddle1(sf::Vector2f(14, 90));
paddle1.setPosition({20, 205});
paddle1.setFillColor(sf::Color::White);

sf::RectangleShape paddle2 = paddle1;
paddle2.setPosition({766, 205});

// inside the loop, before drawing:
float speed = 6.f;
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::W))    paddle1.move({0, -speed});
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::S))    paddle1.move({0,  speed});
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::Up))   paddle2.move({0, -speed});
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::Down)) paddle2.move({0,  speed});

window.draw(paddle1);
window.draw(paddle2);
⌨️
Code Challenge
+20 XP
Move paddle 1 with W and S:
pong.cpp
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::W))
    paddle1.move({0, if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::W))
    paddle1.move({0, });
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::S))
    paddle1.move({0, });
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::S))
    paddle1.move({0, });});
💡 Hint: W moves up (negative y), S moves down (positive y). move() takes (dx, dy).
🧠
Knowledge Check
+15 XP
paddle2 = paddle1; then repositioning it works because…
AThey share one shape
BC++ copies the whole object, paddle2 is an independent clone with the same size and colour
CSFML links them
3
⚪
The Ball & Delta Time
Frame-rate independent movement with sf::Clock
Locked
🎯
Goal for this step

Move the ball using delta time, the professional way.

  • 1Add a sf::CircleShape ball(7) and velocity floats bvx = 300, bvy = 180, in pixels per SECOND now, not per frame.
  • 2An sf::Clock measures the time each frame took: float dt = clock.restart().asSeconds();
  • 3Move by velocity × dt, on a 60 FPS machine or a 144 FPS gaming rig, the ball covers the same distance per second.
  • 4Bounce off top/bottom by flipping bvy.
pong.cpp
sf::CircleShape ball(7);
ball.setPosition({393, 243});
float bvx = 300.f, bvy = 180.f;
sf::Clock clock;

// in the loop:
float dt = clock.restart().asSeconds();
ball.move({bvx * dt, bvy * dt});

if (ball.getPosition().y <= 0 || ball.getPosition().y + 14 >= 500)
    bvy = -bvy;sf::CircleShape ball(7);
ball.setPosition({393, 243});
float bvx = 300.f, bvy = 180.f;
sf::Clock clock;

// in the loop:
float dt = clock.restart().asSeconds();
ball.move({bvx * dt, bvy * dt});

if (ball.getPosition().y <= 0 || ball.getPosition().y + 14 >= 500)
    bvy = -bvy;
💡
Per-frame movement (Java/Python episodes) is fine for learning; velocity × dt is what real engines do. You just learned the difference.
✏️
Fill in the Blanks
+15 XP
dt comes from clock.().asSeconds() and is the time the last frame took. Movement becomes velocity × , making speed independent of frame .
🧠
Knowledge Check
+15 XP
Without delta time, a game running at 144 FPS instead of 60 would…
ALook smoother but play identically
BRun 2.4× faster, the ball crosses the screen in under half the time
CCrash
4
💥
Paddle Collision & Spin
getGlobalBounds().findIntersection() plus angle control
Locked
🎯
Goal for this step

Bounce the ball off paddles with player-controlled angles.

  • 1Every SFML shape has getGlobalBounds() returning a FloatRect, and FloatRects have .findIntersection(other) (SFML 3 renamed it from intersects).
  • 2On paddle hit (moving toward it): flip bvx, and set bvy from the hit offset, centre hits go flat, edge hits go steep.
  • 3Speed up each rally: multiply bvx by 1.05 (cap ~700).
  • 4This is the same spin logic as Java Breakout, patterns transfer across languages!
pong.cpp
sf::FloatRect b = ball.getGlobalBounds();
if (b.findIntersection(paddle1.getGlobalBounds()) && bvx < 0) {
    bvx = -bvx * 1.05f;
    float padCentre  = paddle1.getPosition().y + 45;
    float ballCentre = ball.getPosition().y + 7;
    bvy = (ballCentre - padCentre) * 5.f;
}
if (b.findIntersection(paddle2.getGlobalBounds()) && bvx > 0) {
    bvx = -bvx * 1.05f;
    float padCentre  = paddle2.getPosition().y + 45;
    float ballCentre = ball.getPosition().y + 7;
    bvy = (ballCentre - padCentre) * 5.f;
}sf::FloatRect b = ball.getGlobalBounds();
if (b.findIntersection(paddle1.getGlobalBounds()) && bvx < 0) {
    bvx = -bvx * 1.05f;
    float padCentre  = paddle1.getPosition().y + 45;
    float ballCentre = ball.getPosition().y + 7;
    bvy = (ballCentre - padCentre) * 5.f;
}
if (b.findIntersection(paddle2.getGlobalBounds()) && bvx > 0) {
    bvx = -bvx * 1.05f;
    float padCentre  = paddle2.getPosition().y + 45;
    float ballCentre = ball.getPosition().y + 7;
    bvy = (ballCentre - padCentre) * 5.f;
}
⌨️
Code Challenge
+20 XP
Detect the ball hitting paddle 1:
pong.cpp
if (b.if (b.(paddle1.(paddle1.()) && bvx < ()) && bvx < )
    bvx = -bvx * 1.05f;)
    bvx = -bvx * 1.05f;
💡 Hint: FloatRects overlap-test each other; every shape can produce its bounds; only bounce when heading left (toward paddle 1).
🧠
Knowledge Check
+15 XP
Multiplying by 1.05 on every hit does what to a long rally?
ANothing measurable
BCompounds, after 15 hits the ball is about twice as fast, forcing rallies to end
CSlows the ball down
5
🔢
Scores, Text & Serving
sf::Font, sf::Text and point scoring
Locked
🎯
Goal for this step

Show a real scoreboard with a font, and serve after each point.

  • 1SFML needs a font FILE: download a free .ttf (or copy one from C:\Windows\Fonts, e.g. arial.ttf) next to your .cpp.
  • 2Load once: sf::Font font; font.openFromFile("arial.ttf");, always check it loaded!
  • 3An sf::Text uses the font: set character size 48, position top-centre; update its string each frame with std::to_string.
  • 4Ball out left → player 2 scores; out right → player 1; then reset to centre with a serve toward the loser.
pong.cpp
sf::Font font;
if (!font.openFromFile("arial.ttf")) return 1;
sf::Text scoreText(font, "0   0", 48);
scoreText.setPosition({330, 20});
int s1 = 0, s2 = 0;

// scoring:
float bx = ball.getPosition().x;
if (bx < -20)  { s2++; ball.setPosition({393, 243}); bvx = 300;  bvy = 180; }
if (bx > 820)  { s1++; ball.setPosition({393, 243}); bvx = -300; bvy = 180; }
scoreText.setString(std::to_string(s1) + "   " + std::to_string(s2));sf::Font font;
if (!font.openFromFile("arial.ttf")) return 1;
sf::Text scoreText(font, "0   0", 48);
scoreText.setPosition({330, 20});
int s1 = 0, s2 = 0;

// scoring:
float bx = ball.getPosition().x;
if (bx < -20)  { s2++; ball.setPosition({393, 243}); bvx = 300;  bvy = 180; }
if (bx > 820)  { s1++; ball.setPosition({393, 243}); bvx = -300; bvy = 180; }
scoreText.setString(std::to_string(s1) + "   " + std::to_string(s2));
✏️
Fill in the Blanks
+15 XP
SFML text needs a loaded from a .ttf file. Numbers become strings with std:: before going into setString.
🧠
Knowledge Check
+15 XP
Why check the return value of openFromFile?
AIt returns the font size
BA missing font file fails silently otherwise, you would draw invisible text and hunt the bug for hours
CC++ requires all returns checked
6
🤖
AI Opponent & Game Over
A beatable computer paddle and first-to-7
Locked
🎯
Goal for this step

Add a computer opponent and finish the game with a winner banner.

  • 1The AI drives paddle2: chase the ball’s y with a dead-zone (18 px) and a max speed slightly below yours, flawed on purpose.
  • 2First to 7 wins: freeze the ball, show "PLAYER 1 WINS!" in big text, R restarts.
  • 3You now have the full game-state pattern in a third language. MENU/PLAY/OVER is universal.
  • 4Stretch: two-player toggle on key 2, rally counter, sound with sf::Sound.
pong.cpp
bool vsComputer = true;
float aiSpeed = 5.f, deadZone = 18.f;

if (vsComputer) {
    float padCentre  = paddle2.getPosition().y + 45;
    float ballCentre = ball.getPosition().y + 7;
    if (padCentre < ballCentre - deadZone) paddle2.move({0,  aiSpeed});
    if (padCentre > ballCentre + deadZone) paddle2.move({0, -aiSpeed});
}

bool gameOver = (s1 == 7 || s2 == 7);bool vsComputer = true;
float aiSpeed = 5.f, deadZone = 18.f;

if (vsComputer) {
    float padCentre  = paddle2.getPosition().y + 45;
    float ballCentre = ball.getPosition().y + 7;
    if (padCentre < ballCentre - deadZone) paddle2.move({0,  aiSpeed});
    if (padCentre > ballCentre + deadZone) paddle2.move({0, -aiSpeed});
}

bool gameOver = (s1 == 7 || s2 == 7);
⌨️
Code Challenge
+20 XP
Write the flawed-on-purpose AI chase:
pong.cpp
if (padCentre < ballCentre - if (padCentre < ballCentre - ) paddle2.move({0, ) paddle2.move({0, });
if (padCentre > ballCentre + deadZone) paddle2.move({0, });
if (padCentre > ballCentre + deadZone) paddle2.move({0, });});
💡 Hint: Only react outside the dead-zone; below the ball move down (positive), above it move up (negative).
🧠
Knowledge Check
+15 XP
You have now built Pong AI in Java AND C++. What stayed identical?
AThe syntax
BThe LOGIC, chase with a dead-zone and speed limit. Languages change, game design thinking transfers
CThe compiler
✅ 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++ pong.cpp -o pong -lsfml-graphics -lsfml-window -lsfml-systemg++ pong.cpp -o pong -lsfml-graphics -lsfml-window -lsfml-system then run ./pong./pong (on Windows, from the MSYS2 MinGW terminal so it finds the SFML DLLs).

pong.cpp
// Complete C++ Pong for SFML 3. Build with:
//   g++ pong.cpp -o pong -lsfml-graphics -lsfml-window -lsfml-system
#include <SFML/Graphics.hpp>
#include <optional>
#include <cstdlib>
#include <string>

int main() {
    sf::RenderWindow window(sf::VideoMode({800, 500}), "C++ Pong");
    window.setFramerateLimit(60);

    sf::RectangleShape p1({14.f, 90.f});
    sf::RectangleShape p2({14.f, 90.f});
    sf::RectangleShape ball({14.f, 14.f});
    p1.setPosition({20.f, 205.f});
    p2.setPosition({766.f, 205.f});

    float bx = 393, by = 243, bvx = 300, bvy = 180;
    int p1Score = 0, p2Score = 0;

    // Score text needs a font. Point this at any .ttf on your system.
    sf::Font font;
    bool haveFont = font.openFromFile("C:/Windows/Fonts/arial.ttf");

    auto serve = [&](int dir) {
        bx = 393; by = 243;
        bvx = 300.f * dir;
        bvy = (std::rand() % 2 == 0) ? 180.f : -180.f;
    };
    serve((std::rand() % 2 == 0) ? 1 : -1);

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

        float dt = clock.restart().asSeconds();

        // paddles: W/S and Up/Down, speed in pixels per second
        if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::W))    p1.move({0.f, -360.f * dt});
        if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::S))    p1.move({0.f,  360.f * dt});
        if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::Up))   p2.move({0.f, -360.f * dt});
        if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::Down)) p2.move({0.f,  360.f * dt});
        auto clampY = [](sf::RectangleShape& p) {
            float y = p.getPosition().y;
            if (y < 0) p.setPosition({p.getPosition().x, 0.f});
            if (y > 410) p.setPosition({p.getPosition().x, 410.f});
        };
        clampY(p1); clampY(p2);

        // ball: velocity is pixels per second, scaled by dt so speed stays the same at any frame rate
        bx += bvx * dt; by += bvy * dt;
        if (by <= 0 || by + 14 >= 500) bvy = -bvy;
        ball.setPosition({bx, by});

        sf::FloatRect br = ball.getGlobalBounds();
        if (br.findIntersection(p1.getGlobalBounds()) && bvx < 0) {
            bvx = -bvx + 60.f;
            bvy = (((by + 7) - (p1.getPosition().y + 45)) / 7.f) * 60.f;
        }
        if (br.findIntersection(p2.getGlobalBounds()) && bvx > 0) {
            bvx = -(bvx + 60.f);
            bvy = (((by + 7) - (p2.getPosition().y + 45)) / 7.f) * 60.f;
        }
        if (bvx > 720.f) bvx = 720.f; if (bvx < -720.f) bvx = -720.f;

        if (bx < 0)   { p2Score++; serve(-1); }
        if (bx > 800) { p1Score++; serve(1); }

        window.clear(sf::Color(12, 14, 24));
        window.draw(p1); window.draw(p2); window.draw(ball);
        if (haveFont) {
            sf::Text s(font, std::to_string(p1Score) + "   " + std::to_string(p2Score), 40);
            s.setPosition({360.f, 20.f});
            window.draw(s);
        }
        window.display();
    }
}// Complete C++ Pong for SFML 3. Build with:
//   g++ pong.cpp -o pong -lsfml-graphics -lsfml-window -lsfml-system
#include <SFML/Graphics.hpp>
#include <optional>
#include <cstdlib>
#include <string>

int main() {
    sf::RenderWindow window(sf::VideoMode({800, 500}), "C++ Pong");
    window.setFramerateLimit(60);

    sf::RectangleShape p1({14.f, 90.f});
    sf::RectangleShape p2({14.f, 90.f});
    sf::RectangleShape ball({14.f, 14.f});
    p1.setPosition({20.f, 205.f});
    p2.setPosition({766.f, 205.f});

    float bx = 393, by = 243, bvx = 300, bvy = 180;
    int p1Score = 0, p2Score = 0;

    // Score text needs a font. Point this at any .ttf on your system.
    sf::Font font;
    bool haveFont = font.openFromFile("C:/Windows/Fonts/arial.ttf");

    auto serve = [&](int dir) {
        bx = 393; by = 243;
        bvx = 300.f * dir;
        bvy = (std::rand() % 2 == 0) ? 180.f : -180.f;
    };
    serve((std::rand() % 2 == 0) ? 1 : -1);

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

        float dt = clock.restart().asSeconds();

        // paddles: W/S and Up/Down, speed in pixels per second
        if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::W))    p1.move({0.f, -360.f * dt});
        if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::S))    p1.move({0.f,  360.f * dt});
        if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::Up))   p2.move({0.f, -360.f * dt});
        if (sf::Keyboard::isKeyPressed(sf::Keyboard::Key::Down)) p2.move({0.f,  360.f * dt});
        auto clampY = [](sf::RectangleShape& p) {
            float y = p.getPosition().y;
            if (y < 0) p.setPosition({p.getPosition().x, 0.f});
            if (y > 410) p.setPosition({p.getPosition().x, 410.f});
        };
        clampY(p1); clampY(p2);

        // ball: velocity is pixels per second, scaled by dt so speed stays the same at any frame rate
        bx += bvx * dt; by += bvy * dt;
        if (by <= 0 || by + 14 >= 500) bvy = -bvy;
        ball.setPosition({bx, by});

        sf::FloatRect br = ball.getGlobalBounds();
        if (br.findIntersection(p1.getGlobalBounds()) && bvx < 0) {
            bvx = -bvx + 60.f;
            bvy = (((by + 7) - (p1.getPosition().y + 45)) / 7.f) * 60.f;
        }
        if (br.findIntersection(p2.getGlobalBounds()) && bvx > 0) {
            bvx = -(bvx + 60.f);
            bvy = (((by + 7) - (p2.getPosition().y + 45)) / 7.f) * 60.f;
        }
        if (bvx > 720.f) bvx = 720.f; if (bvx < -720.f) bvx = -720.f;

        if (bx < 0)   { p2Score++; serve(-1); }
        if (bx > 800) { p1Score++; serve(1); }

        window.clear(sf::Color(12, 14, 24));
        window.draw(p1); window.draw(p2); window.draw(ball);
        if (haveFont) {
            sf::Text s(font, std::to_string(p1Score) + "   " + std::to_string(p2Score), 40);
            s.setPosition({360.f, 20.f});
            window.draw(s);
        }
        window.display();
    }
}
🎉🏆🎮✨🎉
Workshop Complete!
You compiled, linked and shipped a C++ game with delta-time movement, genuinely professional foundations. Episode 2: Snake!
0
Total XP
1
Level
0
Best Streak
0%
Accuracy
▶ Episode 2: Snake →
⭐ View My Progress & Certificates

This workshop was free and took many hours to build. If it helped you learn something new, consider supporting the project.

☕ Support on Ko-fi