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”.

Image for post
Image for post
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

$ 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:

Image for post
Image for post
initial structure

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

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
$ npm start

Levels

  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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
Increaser

The Startup

Medium's largest active publication, followed by +734K people. Follow to join our community.

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