JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<canvas id="myCanvas" width="1300" height="301" style="border:15px solid gray;
-moz-border-radius-bottomleft:40px;
-moz-border-radius-bottomright:40px;
-webkit-border-bottom-left-radius:40px;
-webkit-border-bottom-right-radius:40px;
-webkit-border-top-left-radius:40px;
-webkit-border-top-right-radius:40px;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
cxt.fillStyle = "#030303";
cxt.fillRect(0, 0, canvas.width, canvas.height);
var cyc = 10;
var a = 80;
var balls = [];
var fireAsync = eval(Jscex.compile("async", function () {
while (true) {
if (balls.length > 100) {
balls.shift();
}
cxt.fillStyle = "rgba(0, 0, 0, .3)";
cxt.fillRect(0, 0, canvas.width, canvas.height);
cxt.fillStyle = "#fff";
for (i in balls) {
cxt.beginPath();
cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
balls[i].y += balls[i].vy * cyc / 1000;
balls[i].x += balls[i].vx * cyc / 1000;
if (balls[i].r + balls[i].y >= canvas.height) {
if (balls[i].vy > 0) {
balls[i].vy *= -0.7;
}
}
else {
balls[i].vy += a;
}
}
$await(Jscex.Async.sleep(cyc));
}
}))
function getRandomNumber(min, max) {
return (min + Math.floor(Math.random() * (max - min + 1)))
}
function fire() {
var ball = {
...