JSFiddle - React, Tailwind, and code Playground

by Pysis

HTML

<canvas id="gameArea" width="800" height="600"></canvas>

JavaScript

(function () {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();


/**************************** Object Definitions ***********************/
function FireworksShot(position, velocity, acceleration, color, life) {
    this.position = position;
    this.velocity = velocity;
    this.acceleration = acceleration;
    this.color = color;
    this.life = life;
}
FireworksShot.prototype.update = function (timeSinceLastFrame) {
    this.velocity.x += this.acceleration.x;
    this.velocity.y += this.acceleration.y;
    this.position.x = this.velocity.x;
    this.position.y = this.velocity.y;

    this.life--;
}
FireworksShot.prototype.draw = function (context) {
    drawPixel(context, this.color, this.position);
}
FireworksShot.prototype.isDead = function (){
    return (this.life <= 0);
}

function FireworksExplosion(position, velocity, acceleration, color, life) {
    this.position = position;
    this.velocity = velocity;
    this.acceleration = acceleration;
    this.color = color;
    this.life = life;
}
FireworksExplosion.prototype.update = function (timeSinceLastFrame) {
    this.velocity.x += this.acceleration.x;
    this.velocity.y += this.acceleration.y;
    this.position.x = this.velocity.x;
    this.position.y = this.velocity.y;

    this.life -= timeSinceLastFrame;
}
FireworksExplosion.prototype.draw = function (context) {
    drawPixel(context, this.color, this.position);
}

/*********************** Global Functions **********************/

function makeFillStyle(r, g, b, a) {
    a = a || 255;
    return 'rgba(' + r + ',' + g + ',' + b + ',' + (a / 255) + ')';
}

function drawPixel(context, color, position) {
    context.fillStyle = makeFillStyle(color.r, color.g, color.b, 255);
    context.fillRect(x, y, 1, 1);
}

//isOutside
////can make more general to a box and a point and...