Breakout Game with JavaScript, React and SVG. Part 3

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 are building a Breakout Game with JavaScript, React, and SVG without libraries, just plain modern JS and React. We are utilizing functional, immutable programming, and along the way, we 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. In this part, we are going to position and render all game elements on the scene.

Stateless Components

We only have two components in a whole game that have state — Scene and Page. All other components are dummy SVG elements.

Image for post
Image for post
<Ball /> <Paddle /> <Block /> <Level />

Let’s start by updating the index.css file with variables and few styles to finish with CSS in this series!

src/index.css

Ball and Paddle components are pretty straightforward. Let’s put them into ball.js and paddle.js files inside the components folder.

src/components/ball.js
src/components/paddle.js

Block has different opacity depending on its density.

Image for post
Image for post
denser — less transparent
src/components/block.js

The Level component display text that placed at top left corner.

src/components/level.js

We are not bothering ourselves with making lives in the form of classic red hurts. In our game lives displayed as rounded rectangles at the right top corner. Why not?

src/components/lives.js

All Together

We implemented all boring components and ready to put them all together. Let’s open scene.js file and import all we need.

src/components/scene.js

Every time the player gets to a new level, we will save the number to local storage, so that next time the user opens the game, he can continue from the last level. Therefore at the start, we will check if there is a level number saved in local storage. To hack the game and get to the last level player can open console and type localStorage.level = 3.

src/components/scene.js

We need to somehow project the game state to the screen. In the example below — the point with coordinates (3, 6) in the game state projected on the screen to point at (180, 360).

Image for post
Image for post
projecting vector from state to screen

To do this, we will write a function that receives container size and size of the game field and returns an object with two projectors — for distances and for vectors.

src/components/scene.js

We will use a Redux hook to manage the state of the scene because it will allow us to reduce the amount of unnecessary rerenders. In this part, we only implement a function that will create an initial state for it. And in upcoming parts, we’ll implement actions and handlers.

src/components/scene.js

We are familiar with all properties in the returned state object, except time, stopTime, and movement:

  • time will be used to calculate duration between updates and then determine how far ball and paddle moved during this period.
  • when stopTime is not undefined, it means that the user stopped the game, and we don’t need to update the game state.
  • If movement is defined, it means that the user holding the left or right key, and wants to change the position of the paddle.

Let’s finish this part by updating the component. Here we are receiving state via hook. Then we take all the properties that we need from the state and by using projectors render all SVG elements.

src/components/scene.js

If we run the app and open a browser, we can see that all elements are in place, and we are getting closer to implementing a real game.

Image for post
Image for post
$ npm start

In this part, we’ve made all components and made Scene reflect the current state. 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 start writing the core logic for the game. Stay tuned!

Reach the next level of focus and productivity with increaser.org.

Image for post
Image for post
Increaser

Written by

Software engineer, creator of increaser.org. More at geekrodion.com

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