Breakout rebuilt the C++ way: a Brick class, std::vector, constructors, and collision that knows which side it hit. Your third Breakout, but your first with real object-oriented C++.
đŽ Ages 12+đŽ ~2 HoursđŽ C++ & SFMLâ Free
đŽ C++ classesđŽ std::vectorđŽ Brick objectsđŽ Side detectionđŽ LivesđŽ Win state
Build it in our C++ Studio too: lay out a level on a grid, tick the SFML features and download a real main.cpp plus a build file, right in the browser with no install. Open the C++ Mod Studio →
đĻ
Reference project: download the finished code files used in this workshop: âŦ cpp-breakout-workshop-reference.zip. Every code block also has a Copy button.
đģ
How to run: Save, compile and run: g++ game.cpp -o game -lsfml-graphics -lsfml-window -lsfml-system && ./game
đŽ
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 ?
đ
How it works: write the code in each step, and the canvas on the right shows what your code does. It is a live preview that builds the game as you go. Type to see it update, or press Apply to Canvas to test it straight away.
đĻ
Lumo says: every step adds one feature to the same game. Type a little, click Apply to Canvas, and test it straight away. There is no wrong answer you can't undo.
Build Breakout Step by Step
Each step adds one feature. Write the code, watch it come alive in the canvas, then make it your own.
Step 1 / 6
A paddle, a bouncing ball and a wall of bricks
đŽđŽđŽđŽ?
Workshop Complete!
Classes, vectors, erase-remove, Breakout in proper object-oriented C++. Episode 4 brings gravity: the platformer!
