Прописать корректное поведение collide для обьектов

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const body = document.getElementById("body");

const width = canvas.width; //300
const height = canvas.height; // 300

let blockSize = 10;
const widthInBlocks = width/blockSize;



class Block {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
};

class Ball {
  constructor (xSpeed, ySpeed){
    this.x = width/2;
    this.y = height/2;
    this.xSpeed = xSpeed;
    this.ySpeed = ySpeed;
  }

  move() {
    this.x += this.xSpeed;
    this.y += this.ySpeed;
  }
// CheckCollision func
  **checkCollision() {
    for (let i = 0; i < blocksArray.length; i++) {
      const element = blocksArray[i];
      if (this.x+blockSize >= element.x && this.x <= element.x+blockSize
        && this.y <= element.y+blockSize && this.y+blockSize > element.y) {
        this.xSpeed = -this.xSpeed;
        this.ySpeed = -this.ySpeed;
        element.x = null;
        element.y = null;
        console.log("colliding");
      }
    }
    if (this.x + blockSize >= (width - blockSize) || this.x <= blockSize) {
      this.xSpeed = -this.xSpeed;
    }if (this.y + blockSize >= height || this.y <= 0) {
      this.ySpeed = -this.ySpeed;
      // gameOver();
    }
  }
};**

const bouncePlatrom = new Block(10, height-10);
const ball = new Ball(1, 5);
const leftCollision = new Block(0, 0);
const rightCollision = new Block(width - blockSize, 0);
const blocksArray = [];
let xPos = 10;
let yPos = 0;

for (let i = 0; i < widthInBlocks - 2; i++) {
  blocksArray.push(new Block(xPos, yPos));
  xPos+=10;
};

function draw(x, y, wdth, hght, fillColor, isArc) {
  ctx.fillStyle = fillColor;
  if (isArc === true) {
    ctx.beginPath();
    ctx.arc(x, y, 5, 0, Math.PI*2);
    ctx.fill();
  }else {
    ctx.fillRect(x, y, wdth, hght, fillColor);
  }
};

const gameOver = function () {
  alert("You lose!");
  clearInterval(intervalId);
}

function mouseDown() {
  body.addEventListener("mousedown", mouseMove);
}

const mouseMove = function() {
  body.addEventListener("mousemove", (event) => {
    draw(bouncePlatrom.x = event.offsetX, bouncePlatrom.y, 50, blockSize, "green");
  });
};

mouseDown();

let intervalId = setInterval(() => {
  ctx.clearRect(0, 0, width, height);
  ball.checkCollision();
  blocksArray.forEach((element) => {
    draw(element.x, element.y, blockSize, blockSize, "black");
  });
  ball.move()
  draw(bouncePlatrom.x, bouncePlatrom.y, 50, blockSize, "green");
  draw(ball.x, ball.y, blockSize, blockSize, "green");  
  draw(leftCollision.x, leftCollision.y, blockSize, height, "red");
  draw(rightCollision.x, rightCollision.y, blockSize, height, "red");
}, 30);

Написал такую простую игру и нужно написать нормальное поведение обьекта. При столкновении летаючего мячика (квадратика) с блоками (те что черного цвета) вверху полотна canvas, должна срабатывать функция checkCollision и удалять блоки, а мячик должен менять свою траекторию ("отбиваться") и лететь обратно. Если можете, то помогите откорректировать поведение мячика.