How to make a html5 breakout game in JavaScript

In this tutorial i will walk through the  process of developing a simple breakout game in JavaScript using html5 canvas I'll be using craters.js a compact html5 game engine. in every step i will first explain the procedure in a less technical method later I'll include the snippets of the actual game , a link to the github repository and a live working demo.

Game world is 2d space with zero friction and zero gravity in order to avoid applying acceleration to the entities periodically maybe this will be changed later.

First entity is a ball an entity with zero friction that upon colliding with an obstacle such as a block, paddle or the the screen boundaries bounces back in the opposite direction the bouncing from left to the right side of the screen is implemented by

if(position.x  + radius < 0) // bounce
if(velocity > 0) return; // moving
velocity *= -1; // change direction

direction is only changed if the ball tries to move  beyond the zero position.
i have touched a bit on the behavior of the ball apart from colliding with walls the ball will as well collide with blocks and the pedal.

Second entity is a pedal a static body with a rectangular fixture which only moves along the x-axis on the 2d plane movement is implemented by

let speed = 300; // define speed rate
if(keys.left == true) // move left
this.state.velocity.x = -speed;
if(keys.right == true) // move right
this.state.velocity.x = speed;

that's it apart from moving the pedal will also collide with the ball.

Third Entity is a block a stationary static body with a rectangular fixture as compared to the ball and pedal a block doesn't move much it awaits for collision with entities of type "ball", checks it's life then it terminates it's self if the life is below zero.

// handle response
if(entity instanceof Ball) {
    if(this.life < 0) this.kill(); // terminate
    else this.life -= 1; // subtract life
}

that's all for the block another property is spawning particles after collision to show impact caused by the ball.

I have explained in a nutshell the roles of the entities to make the game first
create a directory you can name it whatever you want i named mine panda-breakout

using the command line enter into the directory initiate a new npm project by running.

npm init -y

after doing that you'll get a response with your project details i.e
{
  "name": "breakout-panda",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Go-ahead and install craters.js by running the command below in your terminal.
npm i craters.js

Now create the following files in the base directory of your project again in your terminal run:

touch game.js
touch index.html

Further more create another directory called 'media' it will contain the images audios and other static files for the project.

mkdir media

next step in your terminal set the remote origin of your project to the git repository below to get the images and source code.

git remote add origin https://github.com/swashvirus/craters.js

or better still copy the code manually.