JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

CSS

*{
    
padding:0px;
    margin:0px;

}
html,body{
    overflow:hidden;
padding:0px;
    margin:0px;
    width:100%;
    height:100%;
}

JavaScript

var vector = function vector(x, y) {
    this.x = x;
    this.y = y;
};

vector.prototype.calc = function (x) {
    return new vector(this.x * x, this.y * x);
};
var size = document.body.getBoundingClientRect();
var a = new vector(0, 5);
var v = new vector(0,25);//new vector(Math.random() * 15 - (15 / 2), Math.random() * 15 - (5 / 2));

var p = new vector(150,5);//new vector(Math.random() * size.width, Math.random() * size.height);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = size.width;
canvas.height = size.height;
document.body.appendChild(canvas);
var _offsetTime = 0;
function draw(_X) {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    
    var _x = (_X/100)-_offsetTime, 
        x = a.x / 2 * Math.pow(_x, 2) + _x * v.x + p.x ,
        y = a.y / 2 * Math.pow(_x, 2) + _x * v.y + p.y;
    function checkYBottom(){
    //console.log(x,y)
var velocityAtWally = Math.sqrt(v.y*v.y+2*a.y*(size.height-p.y));
    var timeAtWall = (velocityAtWally-(_x*a.y+v.y))/a.y;
    if (timeAtWall <0)
    {
        var _t = _x+timeAtWall;
        var _px = a.x / 2 * Math.pow(_t, 2) + (_t) * v.x + p.x,
            _py = a.y / 2 * Math.pow(_t, 2) + (_t) * v.y + p.y;
        
        p.x = _px;
        p.y = _py;
        v.y=-velocityAtWally;
        _offsetTime += _t;        
    }
    }
    function checkYTop(){
var velocityAtWally = Math.sqrt(v.y*v.y+2*a.y*-p.y);
    var timeAtWall = (velocityAtWally-(_x*a.y+v.y))/a.y;
    if (timeAtWall <0)
    {
        var _t = _x+timeAtWall;
        var _px = a.x / 2 * Math.pow(_t, 2) + (_t) * v.x + p.x,
            _py = a.y / 2 * Math.pow(_t, 2) + (_t) * v.y + p.y;
        
        p.x = _px;
        p.y = _py;
        v.y=-velocityAtWally;
        _offsetTime += _t;        
    }        
    }
    function checkXBottom(){
    var velocityAtWallx = Math.sqrt(v.x*v.x+2*a.x*(size.width-p.x));
    var timeAtWall = (velocityAtWallx-(_x*a.x+v.x))/a.x;
    if (timeAtWall...