Breakout Game with JavaScript, React and SVG. Part 5

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. This is the last part of the course where we are going to make all the pieces work together.

Scene

We will work only in with one file today — scene.js since we already finished developing all other parts of the game. First, let’s update imports and declare a few variables at the top.

src/components/scene.js

8: // We have an object that maps movements to key codes on the keyboard.

13: // If the player will press the space key, we will pause or resume the game.

15: // We will update the state of the game and rerender 60 times per second.

There are not that many actions, we only need to handle situations when the size of container changes(to render the game properly); when player presses or releases keys on the keyboard; every few milliseconds will be called tick action, and reducer will return a new state of the game.

src/components/scene.js

To make a reducer cleaner, we replace the switch-case with a more functional approach by creating an object with a handler for each action. The handler is a function that receives old state and payload.

src/components/scene.js

3: // When containers size changes, we update the state with new projectors.

8: // When the player presses the key, we check if it is left or right move.

16: // On key up, we check if a player wants to pause/resume the game and make appropriate operations with time.

27: // If the game is on pause, we return the old state. Otherwise, we calculate how much time left from the last update and call a function from the previous part.

In reducer, we take a handler for a received action type. If we implemented the handler for this action, we return a result of the call to the handler.

src/components/scene.js

Next, let’s work on the component. To simplify the dispatch call, we can write a small helper function.

src/components/scene.js

We want to update projectors every time the size of the container changes. To do this, we utilize useEffect hook.

src/components/scene.js

After adding this hook, we can see that the game looks good regardless of the size of the screen.

Image for post
Image for post
resizing screen

On component mount, we want to subscribe to keys presses and spin up the game timer. To remove all these handlers on unmount, we return a function that will do unregistering.

src/components/scene.js
Image for post
Image for post
$ npm start

Congratulations! We finished the development of the game. The commit with final changes you can find here. If you like more video format, check out this course on YouTube.

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