JSFiddle - React, Tailwind, and code Playground

by Didier Cauvin

HTML

<canvas id="mycanvas" width=400 height=400>
    canvas not supported
</canvas>

JavaScript

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");

var player = createBox({
    x: 0,
    y: 0,
    width: 10,
    height: 10,
    gravity: 0.4
});

var block1 = createBox({
    x: 0,
    y: 350,
    width: 20,
    height: 20
});
var block2 = createBox({
    x: 20,
    y: 350,
    width: 20,
    height: 20
})

var bounce = -7;
var friction = 1.6;

player.collisioners = [block1, block2];

var collisionManager = createCollisionManager();

loop();

function loop() {
    requestAnimationFrame(loop);
    context.clearRect(0, 0, 400, 400);

    player.position.x += player.velX;

    if (player.gravity > 0) {
        player.velY += player.gravity;
        player.position.y += player.velY;
    }

    var info = collisionManager.check(player);

    if (info) {
        if (info.where === 'bottom') {
            player.velY = -player.velY;
            player.position.y = info.collisioner.position.y + info.collisioner.height;
        }
        if (info.where === 'top') {
            player.isJumping = false;
            player.isGrounded = true;
            player.position.y = (info.collisioner.position.y - player.height);
            player.position.x += info.collisioner.velX;
            player.velY = 0;
        }
        if (info.where === 'left') {
            player.isJumping = false;
            player.position.x = info.collisioner.position.x - player.width;
        }
        if (info.where === 'right') {
            player.isJumping = false;
            player.position.x = info.collisioner.position.x + info.collisioner.width;
        }
    }

    block1.render();
    block2.render();
    player.render();
}

function createCollisionManager() {
    var that = {};

    function boxWithBoxCollision(obj1, obj2) {
        var c1X = obj1.getCenterPositionX();
        var c2X = obj2.getCenterPositionX();
        var c1Y = obj1.getCenterPositionY();
        var c2Y = obj2.getCenterPositionY();

        var normal = {
            x: (c1X -...