Breakout Game with JavaScript, React and SVG. Part 1

Rodion Chachura
Jul 1, 2019 · 4 min read

This is part of the course “Breakout Game with JavaScript, React and SVG”.

GitHub Repository and Deployed Game

In this course, we will build a Breakout Game with JavaScript, React, and SVG. We will bootstrap game with create-react-app and won’t use any additional libraries, just plain modern JS and React. We will utilize functional, immutable programming, and along the way, we will learn React Hooks, SVG rendering, and basics of game development. You can find the source code in this GitHub repository, and check out the game here.

Create React App

When it comes to bootstrapping React project, the best option is create-react-app starter maintained by Facebook. If you don’t have it locally install it with this command:

With this starter in place, we only need to type one command to have ready-to-run React project:

After opening the created project in your code editor, you should see similar to this structure:

initial structure

After removing App.css, App.test.js, and logo.svg, we have this structure:

structure after deleting redundant files

Let’s start with editing file with styles by declaring global styles and setting the height to 100% for all existing containers, so that we can make a page that we will create a little bit later full-size. For most projects, I would recommend using styled-components, but here we decided to go without additional libraries, and we won’t do many styling here anyway.


We will keep all the components in one directory, so let’s create it and put a file named page.js that will contain the root component there.

project structure with component directory

For now, let’s make page export only an empty div element with a specified class name.


Since we specified a class name for the page, let’s come back to styles and add one more.


With ready to render the root component, we can go to App.js and use this file to export it. At this point, there is no use in App.js since it doesn’t bring any value, yet in most cases, we would add things like middlewares or wrappers here.


If we run the app, we should see a dark page. If this is the case, we are in the right direction.

$ npm start


Our game will have a few levels. With every new level, we will increase the difficulty of the game by tweaking a few parameters. These parameters are:

  1. Lives — how many times a player can miss the ball on the level.
  2. Paddle width that will become smaller with each level.
  3. Speed — determine how fast paddle and ball are moving.
  4. In blocks, we keep lists of densities, that determine how many time ball should hit the block to destroy it.

Everything clear with first parameters, set some numbers, and we are ready to go, but how we specify blocks?

To create a list of blocks, we need a function that receives a number of rows and columns as parameters and returns an array of arrays of random numbers in the range from 1 to 3.

getBlocks(3, 6)

But first, we need to have a function that will generate a range of numbers over each we can use the map. That helps to not use any for loops in this game.


This function can be used all across the game so let’s create file utils.js in the root of src folder, and put function shown below in it.


Next, let’s create a folder named game and put inside of its file with the name levels.js. Here we import function that generates a range from utils and using it in the function that returns blocks for level.


In this part, we started the development of the game and made a list of objects describing levels. The commit with these changes you can find here. If you like more video format, check out this course on YouTube. In the next part, we will write a function that will transform the level into the game state, and we start the development of the scene component. Stay tuned!

Reach the next level of focus and productivity with


The Startup

Get smarter at building your thing. Join The Startup’s +793K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Rodion Chachura

Written by

Software engineer, creator of More at

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +793K followers.

Rodion Chachura

Written by

Software engineer, creator of More at

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +793K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store