JSFiddle - React, Tailwind, and code Playground

by chernovd2411

HTML

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #myCanvas {
            border: 1px solid #bbb;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
    <script>
 
const canvas = document.querySelector("#canvas");
const context = canvas.getContext("2d");
let canvasWidth = canvas.width = window.innerWidth;
let canvasHeight = canvas.height = window.innerHeight;

keysDown = {};

class Vec
{
    constructor(x = 0, y = 0)
    {
        this.x = x;
        this.y = y;
    }
    get len()
    {
        return Math.sqrt(this.x * this.x + this.y * this.y);
    }
    set len(value) {
        const f = value / this.len;
        this.x *= f;
        this.y *= f;
    }
}

class Rect
{
    constructor(x, y, width, heigth)
    {
        this.pos = new Vec(x, y);
        this.size = new Vec(width, heigth);
        
    }
    get left()
    {
        return this.pos.x - this.size.x / 2;
    }
    get right()
    {
        return this.pos.x + this.size.x / 2;
    }
    get top()
    {
        return this.pos.y - this.size.y / 2;
    }
    get bottom()
    {
        return this.pos.y + this.size.y / 2;
    }
}
class Circle 
{
    constructor(x,y,radius)
    {
        this.pos = new Vec(x, y);
        this.radius = radius;
    }
   get area()
    {
        return Math.pow(this.radius, 2) * Math.PI;
    }
}

class Ball extends Circle
{
    constructor()
    {
        super(canvasWidth / 2,canvasHeight / 2, 10);
        this.vel = new Vec;
        this.initialSpeed = 5;
    }
    play() {
        this.pos.x += this.vel.x + 1;
        this.pos.y += this.vel.y + 1;
        if (this.vel.x === 0 && this.vel.y === 0) {
            this.vel.x = 1 * (Math.random() > .5 ? 1 : -1);
            this.vel.y = 1 * (Math.random() * 2 - 1);
            this.vel.len = this.initialSpeed;
        }
    }
}

class Player extends Rect{
  constructor(x, y, width, height) {
    super(x, y, width, height);
    this.vel = new Vec;
    this.rotate = 0;
  }
}

const...