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: 15,
    height: 15,
    gravity: 200,
    visible: true
});

var block1 = createBox({
    x: 0,
    y: 250,
    width: 20,
    height: 20,
    visible: true
});
var block2 = createBox({
    x: 30,
    y: 250,
    width: 20,
    height: 20,
    visible: true
})

var block3 = createBox({
    x: 40,
    y: 190,
    width: 20,
    height: 20,
    visible: true
})

var bounce = -1800;
var friction = 1.6;
var frictionY = -199.6;

player.collisioners = [block1, block2, block3];

var collisionManager = createCollisionManager();

function checkCallback (info) {
        var topFound = false;
        for(var w = 0; w < info.length; w++) {
            for(var i = 0; i < info[w].where.sides.length; i++) {
                if (info[w].where.sides[i] === 'top') {
                    topFound = true;
                    player.isJumping = false;
                    player.isGrounded = true;
                    player.position.y = (info[w].where.collisioner.position.y - player.height);
                    //player.position.x += info.collisioner.velX;
                    player.velY = 0;
                    return;                
                }
            }
            
        }
        
            for(var w = 0; w < info.length; w++) {
                for(var i = 0; i < info[w].where.sides.length; i++) {
                    //debugger;
                    if (info[w].where.sides[i] === 'bottom') {
                        player.velY = -player.velY;
                        player.position.y = info[w].where.collisioner.position.y + info[w].where.collisioner.height;
                    } 
                    if (info[w].where.sides[i] === 'left') {
                        player.isJumping = false;
                        player.position.x = info[w].where.collisioner.position.x - player.width;
                    }
                   ...