JSFiddle - React, Tailwind, and code Playground

by Dmitry Ieremenko

HTML

<html>
    <head>
        <title>Game</title>
    </head>
    <body>
        <canvas id='game' width="350px" height="620px"></canvas>
    </body>
</html>

CSS

#game{
  background: url(https://i.postimg.cc/HJYRzy71/bg.png);
  display: block;
}

JavaScript

var canvas = document.querySelector('#game');
var ctx = canvas.getContext('2d');

var DY = 2;
const SIZE = 50;



function Entity(){
  this.x = 0;
  this.y = 0;
  this.width = 0;
  this.height = 0;
  this.color = "#0095DD";
  this.dy = 1;
}
Entity.prototype.draw = function(){
  var img = new Image();
  img.src = this.img;
  ctx.drawImage(img, this.x, this.y, this.width, this.height);
}
Entity.prototype.update = function(){
  this.y += this.dy;
}

function Brick(x, dy){
  this.color = "#0095DD";
  this.height = SIZE;
  this.width = SIZE;
  this.x = x;
  this.y = 0;
  this.dy = dy;
  this.img = 'https://i.postimg.cc/47M0X22X/bomb.png';
}
Brick.prototype = Object.create(Entity.prototype);
Brick.prototype.generateBricks = function(){
  for(var i = 0; i< bricks.length; i++){
    bricks[i].draw();
    bricks[i].update();
    if(bricks[i].y  >= canvas.height / 2 && bricks[i].y <= canvas.height + 5 && bricks.length <= 2){
      bricks.push(new Brick(Math.floor(Math.random() * (canvas.width - SIZE) ), Math.random() * (3 - 1) + 1));
    }
    if(bricks[i].y >= canvas.height){
      bricks.splice(i, 1);
      score+=1;
    }
    if(hero.x + hero.width >= bricks[i].x && hero.x <= bricks[i].x + SIZE && hero.y <= bricks[i].y + SIZE && hero.y >= bricks[i].y){
      let bang = new Bang(bricks[i].x, bricks[i].y);
      bang.draw();
      setTimeout(function(){
        location.reload();
      }, 300)
      console.log("GAME OVER");
    }
  }
}

function Bonus(x){
  this.height = SIZE/2;
  this.width = SIZE/2;
  this.x = x;
  this.y = 0;
  this.dy = 2;
  this.img = 'https://i.postimg.cc/zb3MZYjd/bonus.png';
}
Bonus.prototype = Object.create(Brick.prototype);

function Bang(x, y){
  this.height = SIZE;
  this.width = SIZE;
  this.x = x;
  this.y = y;
  this.img = 'https://i.postimg.cc/MpGtFhCQ/bang.png';
}
Bang.prototype = Object.create(Brick.prototype);

function Prize(){
  this.height = SIZE * 3;
  this.width = SIZE * 3;
  this.x = canvas.width / 2 - ((SIZE * 3) / 2);
  this.y =...