JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="game_field">
            Your browser  doesn't support canvas!
        </canvas>
        <div id="compare"></div>

CSS

#game_field {
                width: 500px;
                height: 500px;
                border: 1px solid black;
            }
            #compare {
                width: 60px;
                height: 10px;
                background: gray;
            }

JavaScript

function Game() {
    this.fps = 60;
    this.canvas = document.getElementById('game_field');
    this.ctx = this.canvas.getContext('2d');
    this.bate = new Bate(this);
    this.ball = new Ball(this);
}

Game.prototype.start = function() {
    var game= this;
    this.gameloop = setInterval(function() {
        game.updateAll();
        game.drawAll();
    }, 1000 / this.fps);
};

Game.prototype.stop = function() {
    clearInterval(this.gameloop);
};

Game.prototype.drawAll = function() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.ball.draw();
    this.bate.draw();
};

Game.prototype.updateAll = function() {
    this.ball.update();
    //this.bate.update();
};

Game.prototype.drawCircle = function(color, x, y, rad) {
    var ctx = this.ctx;
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, rad, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
};

Game.prototype.drawRect = function(color, x, y, width, height) {
    var ctx = this.ctx;
    ctx.fillStyle = color;
    ctx.fillRect(x, y, width, height);
};


// GameItem - superclass 
function GameItem(game, color) {
    this.color = color || 'rgb(200, 200, 200)';
    this.game = game || null;
}
// superclass's methods
GameItem.prototype.update = function() {
    ///
};


GameItem.prototype.bottom = function() {
    var bot = this.y + this.height;
  return bot;
};

GameItem.prototype.right = function() {
   var right = this.x + this.width;
   return right;
};

// Ball - subclass
function Ball() {
    GameItem.apply(this, arguments); // call super constructor
    this.radius = 5;
    this.xVelocity = 3;
    this.yVelocity = 2;
    this.x = this.game.canvas.width/2 - this.radius;
    this.y = this.game.canvas.height - this.game.bate.height - this.radius*2;
    this.draw = function() {
        this.game.drawCircle(this.color, this.x+this.radius, this.y+this.radius, this.radius);
    };
    this.width = this.height = this.radius * 2;
    
    this.move = function()...