JSFiddle - React, Tailwind, and code Playground

by SundayKDR

HTML

<canvas id="canvas"></canvas>
<div id="boost_level_bar">
  <div id="boost_level_slider"></div>
</div>
<div class = "scores">
<p id="scores_num"><p>
</div>

CSS

#boost_level_bar {
  position: absolute;
  width: 200px;
  height: 20px;
  border: 1px solid black;
  top: 20px;
  left: 20px;
  border-radius: 20px;
}

#boost_level_slider {
  position: relative;
  width: 20px;
  height: 20px;
  background: black;
  border-radius: 20px;
}
#canvas{
  border: 1px solid black;
}
.scores{
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid black;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var slider = document.getElementById("boost_level_slider");
var scores = document.getElementById("scores_num");
canvas.width = 600;
canvas.height = 500;
var cursorPos = 0;
var scores = 0;
var specialBlocksLevel = false;

var blocks = [];
blocks.push([100, 100]);
blocks.push([200, 200]);
blocks.push([300, 300]);
blocks.push([400, 400]);

var blockWidth = 90;
var blockHeight = 10;
var timerBlocksStart = 30;
var timerBlocks = timerBlocksStart;

var sliderSpeed = {
  x: 8,
  y: 0
};

var ballBounceForce = 16;
let ballWidth = 15;
let ballHeight = 15;

var boost = 5;
var boostRate = 10;

const Ball = function(x, y) {
  this.x = x;
  this.y = y;

  this.falling = true;
  this.currSpeed = 0;
  this.boostUp = 0;

  this.bounce = function() {
    if (this.boostUp < 5) {
      this.falling = false;
      this.boostUp += boostRate;
      boost--;
    }
  }

  this.draw = function() {
    ctx.fillRect(this.x, this.y, ballWidth, ballHeight);
  }

  this.clear = function() {
    ctx.clearRect(this.x - ballWidth, this.y - ballHeight, ballWidth * 2, ballHeight * 2);
  }

  this.move = function(direction) {
    switch (direction) {
      case 'right':
        this.x += sliderSpeed.x;
        break;
      case 'left':
        this.x -= sliderSpeed.x;
        break;
      default:
        break;
    }
  }

  this.hitTheGround = function() {
    return (this.y > canvas.height - ballHeight * 2);
  }

  this.mouseFollow = function() {
    if (Math.abs(cursorPos - this.x) > sliderSpeed.x)
      this.x = (cursorPos > this.x) ? (this.x + sliderSpeed.x) : (this.x - sliderSpeed.x);
  }

  this.update = function() {
    
    if (this.falling) {
      if (hitTheSlider(this) || this.hitTheGround()) {
        if (this.currSpeed > ballBounceForce) this.currSpeed = ballBounceForce;
        this.falling = false;
      } else {
        this.y = this.currSpeed > ballBounceForce ? this.y + ballBounceForce : this.y +...