Breakout Game with JavaScript, React and SVG. Part 1

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:

$ npm install -g create-react-app

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

$ create-react-app breakout-game

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.

src/index.css

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.

src/components/page.js

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

src/index.css

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.

src/App.js

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

$ npm start

No more procrastination. You have time for goals! Increaser will guide you.

Realize your ambitions!

Levels

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.

getRange(5)

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.

src/utils.js

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.

src/game/levels.js

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 increaser.org.

Increaser