JSFiddle - React, Tailwind, and code Playground

by Lingjia Liu

CSS

html, body {
    padding: 0;
    margin: 0;
    height:100%;
}

JavaScript

var body = document.body; // container
var canvas = document.createElement("canvas");
canvas.width = body.clientWidth;
canvas.height = body.clientHeight;
body.appendChild(canvas);

var ctx = canvas.getContext("2d");
ctx.fillStyle = "#0099CC";
ctx.fillRect(0, 0, canvas.width, canvas.height);

//window.onresize = function(e) {
//    canvas.width = body.clientWidth;
//    canvas.height = body.clientHeight;
//}
//
//window.onresize(); // initial
var spring = 0.99;
var a_x = 0;
var a_y = 1000;
var Ball = function(x, y) {
    this.position_x = x || Math.random() * canvas.width;
    this.position_y = y || Math.random() * canvas.height;
    var dir = Math.random() * Math.PI * 2;
    var vel = Math.random() * 200;
    this.velocity_x = vel * Math.cos(dir);
    this.velocity_y = vel * Math.sin(dir);
    this.size = 10;
    this.collided = false;
    this.update = function(dt) {
        this.velocity_y += a_y * dt;
        this.position_x += this.velocity_x * dt;
        this.position_y += this.velocity_y * dt + 0.5 * a_y * dt * dt;
        

        if (this.position_x < this.size / 2) {
            this.position_x = this.size / 2;
            this.velocity_x *= -1;
        } else if (this.position_x > canvas.width - this.size / 2) {
            this.position_x = canvas.width - this.size / 2;
            this.velocity_x *= -1;
        }
        if (this.position_y < this.size / 2) {
            this.position_y = this.size / 2;
            this.velocity_y *= -1;
        } else if (this.position_y > canvas.height - this.size / 2) {
            this.position_y = canvas.height - this.size / 2;
            this.velocity_y *= -1;
        }
    };
    this.render = function() {
        ctx.beginPath();
        if (this.position_y < -this.size / 2) {
            ctx.moveTo(this.position_x, 0);
            ctx.lineTo(this.position_x + this.size / 2, Math.sqrt(3) * this.size / 2);
            ctx.lineTo(this.position_x - this.size / 2, Math.sqrt(3) * this.size / 2);
           ...