JSFiddle - React, Tailwind, and code Playground

by kassiomaia

HTML

<canvas id="playground"></canvas>

CSS

body, canvas {
  margin: 0;
  padding: 0;
  overflow: none;
}

JavaScript

const width = window.innerWidth;
const height = window.innerHeight - 5;

const canvas = document.getElementById('playground')
canvas.width = width;
canvas.height = height;
const context = canvas.getContext('2d')
document.body.style.overflow = "none"
document.body.style.margin = "0"
document.body.style.padding = "0"

const ballColors = [
	'#ef476f',
  '#ffd166',
  '#06d6a0',
  '#118ab2',
  '#073b4c',
  '#8ecae6',
  '#219ebc',
  '#023047',
  '#ffb703',
]

const blockColors = [
	'#006466',
  '#065a60',
  '#0b525b',
  '#144552',
  '#1b3a4b',
  '#212f45',
  '#272640',
  '#3e1f47',
  '#4d194d',
]

const randomColor = (colors) => {
	return colors[Math.trunc(Math.random() * colors.length) % colors.length];
}

function clearStage() {
	context.fillStyle = '#ffbe0b';
  context.fillRect(0, 0, width, height)
}

function drawBall(ball) {
	context.fillStyle = ball.color;
  context.beginPath();
  context.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI);
  context.fill()
  context.stroke();
}

function drawBlock(block) {
	context.shadowBlur = 3;//  shadow Blur     
  context.shadowColor = "white"; // shadow color

	context.fillStyle = block.color;
  context.beginPath();
  context.rect(block.x, block.y, block.width, block.height);
  context.stroke();
 	context.shadowBlur = 0
}

function drawDetectionLine(a, b) {
	context.strokeStyle = 'white';
  context.lineWidth = 3
  context.globalAlpha = 0.2
	context.beginPath()
  context.moveTo(a.x, a.y)
  context.lineTo(b.x, b.y)
  context.stroke()
  context.lineWidth = 1
  
	context.strokeStyle = 'white';
    context.globalAlpha = 1
}

function createBall(x, y, dx, dy, r, friction, color) {
	return Object.create({
  	x,
    y,
    dy,
    dx,
    r,
    friction,
    color,
    block: false,
  })
}

function createBlock(x, y, width, height, softness, color) {
	return Object.create({
  	x,
    y,
    width,
    height,
    softness,
    color,
  })
}

(function() {
	return;
  const balls = []
  const blocks = []
  
  clearStage();

  function...