JSFiddle - React, Tailwind, and code Playground

by jbristowe

JavaScript

var c = document.getElementById("canvas");
var a = c.getContext("2d");

var w = c.width;
var h = c.height;

var hearts = [];

function Heart(xCoordinate, yCoordinate, sizeValue, sizeDirection, aValue) {
    this.x = xCoordinate;
    this.y = yCoordinate;
    this.size = sizeValue;
    this.sizeDirection = sizeDirection;
    this.a = aValue;
}

function dotFilter(element) {
    return element.y >= 0 && element.a >= 0;
}

c.onmousemove = function(e) {
    var mouseX, mouseY;

    if (e.offsetX) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    }
    else if (e.layerX) {
        mouseX = e.layerX;
        mouseY = e.layerY;
    }

    hearts.push(new Heart(mouseX - 4, mouseY - 4, (Math.random() * 60)|0 + 50, "u", 1));
};

window.setInterval(function() {

    a.fillStyle = "#000";
    a.fillRect(0, 0, w, h);

    if (hearts.length === 0) return;

    hearts = hearts.filter(dotFilter);

    for (i = 0; i < hearts.length; i = i + 1) {
        hearts[i].y = hearts[i].y + 5;
        hearts[i].a = hearts[i].a - 0.01;

        if (hearts[i].sizeDirection === "u") {
            hearts[i].size = hearts[i].size + 5;
            if (hearts[i].size >=100) hearts[i].sizeDirection = "d";
        } else {
            hearts[i].size = hearts[i].size - 5;
            if (hearts[i].size <= 20) hearts[i].sizeDirection = "u";
        }

        a.save();
        a.font = hearts[i].size + 'px Arial';
        a.fillStyle = "hsla(" + ((Math.random() * 30)|0 + 10) + ",100%,50%," + hearts[i].a + ")";
        a.fillText('♥', hearts[i].x, hearts[i].y);
        a.restore();
    }
}, 17);