JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

CSS

* {
    margin:0px;
    padding:0px;
}
canvas {
    outline:1px black solid;
}

JavaScript

var c = document.createElement('canvas');
var ctx = c.getContext('2d');
document.body.appendChild(c);
var elements = [];
addEventListener('click', function (e) {

    elements.push(drawObject(e.pageX - 5, e.pageY - 5, 10, 10, .1, .1));
});
requestAnimationFrame(function anim() {

    ctx.clearRect(0, 0, c.width, c.height);
    elements.forEach(function (shot) {
        shot(0, 0);
        elements.forEach(function(everyother){
        if(everyother !==shot)
            everyother.collision(shot);
            });
    });
    requestAnimationFrame(anim);
});




var drawObject = function (x, y, width, height, vx, vy) {
    var obj = {};
    obj.can = document.createElement('canvas');
    // document.body.appendChild(obj.can);
    obj.can.width = width;
    obj.can.height = height;
    obj.x = x;
    obj.y = y;
    obj.vx = +vx;
    obj.vy = +vy;
    obj.ctx = obj.can.getContext('2d');
    obj.ctx.beginPath();
    obj.ctx.rect(0, 0, width, height);
    obj.ctx.fill();
    obj.collision = function (b) {
        var gco1 = obj.ctx.globalCompositeOperation;
        var gco2 = b.ctx.globalCompositeOperation;
        b.ctx.globalCompositeOperation = obj.ctx.globalCompositeOperation = 'xor';
        b.ctx.drawImage(obj.can, obj.x - b.x, obj.y - b.x);
                obj.ctx.drawImage(b.can, b.x - obj.x, b.y - obj.x);
        b.ctx.globalCompositeOperation=gco2;
        obj.ctx.globalCompositeOperation=gco1;
    };
    var _o = function (_x, _y) {
        obj.vx += Number(_x);
        obj.vy += Number(_y);
        obj.x += obj.vx;
        obj.y += obj.vy;
        //if (obj.x < 
        if (obj.x < 0 || obj.x > c.width - obj.can.width) {
            obj.vx *= -1
        }
        if (obj.y < 0 || obj.y > c.height - obj.can.height) {
            obj.vy *= -1;
        }
        ctx.drawImage(obj.can, obj.x, obj.y);
    
};
console.log(obj);
return _o;
};

elements.push(drawObject(10, 10, 30, 30, 1, 1));