Breakout Game with JavaScript, React and SVG. Part 4

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 write the core logic for updating the game state.

Utils

First, we need to update utils.js with functions for converting degrees to radians and back alongside with two functions for arrays operations.

src/utils.js

Vector

We will use vectors heavily to update the state, so we need to have a few more methods in Vector class.

src/game/vector.js

If you are not comfortable with basic vector operations, you can check this story covering basics with JS examples. In the examples below, you can see what other methods are doing.

Image for post
Image for post
few vectors methods

Core

Now we are ready to develop the core. At the start of the file, we declare a few more variables.

src/game/core.js

DISTANCE_IN_MS tells how far can ball and paddle go in one millisecond with speed equal to one. MOVEMENT object is like enum in other languages it helps to reduce the probability of making a typo.

After hitting an object like wall or paddle, we want the direction of the ball to be reflected with some added distortion to make the game more interesting. Distortion will add a small random vector to the direction and then normalize the result.

src/game/core.js
Image for post
Image for post
bouncing

On every update, we will check if the player wanted to move the paddle, and in such case, we will calculate a new position. If it doesn’t cross left and right boundaries function will return new vector, otherwise it will return adjusted one.

src/game/core.js

Next, let’s write a small function that will be used for the ball — block collision detection.

Image for post
Image for post
block-ball collision

It checks if at least one side of the object inside boundaries. For example, we can pass to it the top and bottom of the ball and block, to check if the lower or upper part of the ball inside of a block.

src/game/core.js

We want to escape the situation when the ball goes back and forth between walls since it makes the game boring.

Image for post
Image for post
back and forth

This happens when the angle between normal of the wall and direction is close to 0 or 90 or -90 degrees. Right after calculating the new direction, we will adjust it.

src/game/core.js

Finally, we are ready to write a function that will create a new state. It receives old state, movement of the paddle, and timespan between last update and now.

src/game/core.js

4: // We calculate the distance that both ball and paddle went. Here we can see how the speed parameter affects the game. Then we call the function to get a new version of the paddle.

8: // To calculate a new ball position, we add a direction vector scaled by distance. Then if a player missed the ball, we call a function that returns initial paddle and ball.

19: // We declare a few functions by calling which we can return state with an updated ball.

40:// Then we check if a ball hits paddle or one of the wall. In such a case, we only need to pass the direction of normal to withNewBallDirection to return a new state with an updated ball and paddle.

51:// If the ball has a collision with one of the blocks, we return updated blocks and ball with direction bounced from one of the block sides.

In this part, we’ve implemented the core logic of the game. The commit with these changes you can find here. If you like more video format, check out this course on YouTube. Next part will be the last one, where we will put everything together. 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