JSFiddle - React, Tailwind, and code Playground

by atesgoral

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/planck.min.js"></script>
<canvas id="c"></canvas>

CSS

body, html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  cursor: none;
}
#c {
  width: 600px;
  height: 400px;
}

JavaScript

var ballSprite = new Image();
ballSprite.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvElEQVQ4T7XVMQ6DMAwF0OZQHRkYe6oop2JkYORQVLb0kTF27KaCNeTl2zKhvDpPa+2wlmutxdtmLniQRiz4AmahHnyCoxhwpHXBzzyfQZZ17bWa1y6gTicxSFmUE0oQ2Hua2Nq3LZ2UUhYv3QhIJ7ug1bRM2TeQoJEe0h460AQ1mkkWguGcqBeeA/XY/JoM7aG28Ng8Av6Donfht5wpHeOFcnmw5cbsjSMheTHcQODRZYG5DC9YXebIL+ALN/KAIUKp5cgAAAAASUVORK5CYII=';
var paddleSprite = new Image();
paddleSprite.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAPCAYAAAAS0WrNAAAAa0lEQVRYR+2TsQ2AQAzE7tdmAJiBQdgC5oEuKDSM8C6cKqVl60adS8VDGHiuNaOD9OPNN7AdMcj8DD+BQUg1khjEIDADMBwXYhCYARiOCzEIzAAMx4UYBGYAhuNCDAIzAMP5FnLvqX48hoEXnmRhuUigARUAAAAASUVORK5CYII=';

c.width = c.offsetWidth;
c.height = c.offsetHeight;

var SCALE = 100;

var ctx = c.getContext('2d');

ctx.scale(SCALE, SCALE);

function drawRect(center, width, height, color) {
  ctx.fillStyle = color;
  ctx.fillRect(
    center.x - width / 2 / SCALE,
    center.y - height / 2 / SCALE,
    width / SCALE,
    height / SCALE
  );	
}

function drawSprite(center, width, height, sprite) {
  ctx.drawImage(
  	sprite,
    center.x - width / 2 / SCALE,
    center.y - height / 2 / SCALE,
    width / SCALE,
    height / SCALE
  );	
}

function hsl(hue, saturation, lightness) {
  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}

var BALL_RADIUS = 10;
var PADDLE_WIDTH = 100;
var PADDLE_HEIGHT = 15;
var LOSS_DURATION = 2;
var LOSS_FLASH_INTERVAL = 0.5;
var BRICK_WIDTH = 50;
var BRICK_HEIGHT = 15;

var isMouseDown = false;
var mouseX = 0;
var mouseY = 0;
var state = 'RESTING';
var frameCount = 0;
var bricks = [];

var pl = planck;
var Vec2 = pl.Vec2;
var world = pl.World();

pl.internal.Settings.velocityThreshold = 0;

var wallFix = {};
var ballFix = {
	friction: 0,
	restitution: 1
};
var paddleFix = {};
var brickFix = {};

function addWall(x, y, width, height) {
	var body = world.createBody(Vec2(x / SCALE, y / SCALE));
	body.createFixture(pl.Edge(Vec2(0, 0), Vec2(width / SCALE,...