JSFiddle - React, Tailwind, and code Playground

by Ryan Brown

HTML

<p>Bouncing Animation</p>
 <button id="clear" onclick="antimate()">Add another Ball</button>
<div id="myCanvas"><canvas></canvas></div>

CSS

body {
    text-align: center;
}
#myCanvas {
    position: relative;
    background-color: #ccddcc;
    margin: 1em auto;
    border-style: solid;
    box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.6);
}

.ball {
    position: absolute;
    display: inline-block;
    border-radius: 50%;
  border-style: dotted;
}


.ball:active {
        border-style: solid;
        animation: randomimg 5s infinite;
}


@keyframes  random {
    15% { background: radial-gradient(circle at 30% 30%, red, #000);}
    30% { background: radial-gradient(circle at 30% 30%, yellow, #000);}
    45% { background: radial-gradient(circle at 30% 30%, green, #000);}
    60% { background: radial-gradient(circle at 30% 30%, blue, #000);}
    75% { background: radial-gradient(circle at 30% 30%, white, #000);}  
}


@keyframes  randomimg {
    15% { background: url(https://image.flaticon.com/icons/svg/135/135728.svg);}
    30% { background: url(https://image.flaticon.com/icons/svg/135/135620.svg);}
    45% { background: url(https://image.flaticon.com/icons/svg/135/135598.svg);}
    60% { background: url(https://image.flaticon.com/icons/svg/135/135717.svg);}
    75% { background: url(https://image.flaticon.com/icons/svg/135/135576.svg);} 
}

JavaScript

var ctx = document.getElementById('myCanvas');


var myCanvas = {
    element: document.getElementById('myCanvas'),
    width: 600,
    height: 400,
    initialize: function () {
        this.element.style.width = this.width + 'px';
        this.element.style.height = this.height + 'px';
        document.body.appendChild(this.element);
    }
};

var Ball = {
    create: function (color, dx, dy) {
        var newBall = Object.create(this);
        newBall.dx = dx;
        newBall.dy = dy;
        newBall.width = 60;
        newBall.height = 60;
        newBall.element = document.createElement('div');
        newBall.element.style.backgroundColor = color;
        newBall.element.style.width = newBall.width + 'px';
        newBall.element.style.height = newBall.height + 'px';
        newBall.element.className += ' ball';
        newBall.width = parseInt(newBall.element.style.width);
        newBall.height = parseInt(newBall.element.style.height);
        myCanvas.element.appendChild(newBall.element);
        return newBall;
    },
    moveTo: function (x, y) {
        this.element.style.left = x + 'px';
        this.element.style.top = y + 'px';
    },
    changeDirectionIfNecessary: function (x, y) {
        if (x < 0 || x > myCanvas.width - this.width) {
            this.dx = -this.dx;
        }
        if (y < 0 || y > myCanvas.height - this.height) {
            this.dy = -this.dy;
        }
    },
    draw: function (x, y) {
        this.moveTo(x, y);
        var ball = this;
        setTimeout(function () {
            ball.changeDirectionIfNecessary(x, y);
            ball.draw(x + ball.dx, y + ball.dy);
        }, 1000 / 60);
    }
};




myCanvas.initialize();
var ball1 =  Ball.create("tan", 4, 3);

ball1.draw(100, 100);


  
  

function antimate() {

    var degx = Math.floor((Math.random() * 17) + 1);
    var degy = Math.floor((Math.random() * 17) + 1);
    var sp1 = Math.floor((Math.random() * 5) + 1);
    var sp2 = Math.floor((Math.random() * 6) + 1);
...