JSFiddle - React, Tailwind, and code Playground

by awesomespaceman

HTML

<canvas id="canvas" style = "border: solid 5px black; background:darkgray"></canvas>

JavaScript

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

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = 500,
    height = 200,
    player = {
        x: width / 2 - 120,
        y: height - 100,
        width: 10,
        height: 10,
        speed: 5,
        velX: 0,
        velY: 0,
        jumping: false,
        grounded: false
    },
       player2 = {
        x: width / 2 + 130,
        y: height - 100,
        width: 10,
        height: 10,
        speed: 4,
        velX: 0,
        velY: 1,
        jumping: false,
        grounded: false,
        attacking:false
    },
    keys = [],
    friction = 0.8,
    gravity = 0.3,
    friction2 = 0.8,
    gravity2 = 0.3;

var boxes = [];

// dimensions
boxes.push({
    x: 0,
    y: 0,
    width: 10,
    height: height + 50
});
boxes.push({
    x: 0,
    y: height - 2,
    width: width,
    height: 50
});
boxes.push({
    x: width - 10,
    y: 0,
    width: 50,
    height: height + 50
});

boxes.push({
    x:Math.floor(Math.random()*400),
    y: Math.floor(Math.random()*180),
    width: 60,
    height: 40
});
boxes.push({
    x: 170,
    y: 60,
    width: 40,
    height: 60
});
boxes.push({
    x: 240,
    y: 100,
    width: 60,
    height: 43
});
boxes.push({
    x: 350,
    y: 150,
    width: 60,
    height: 43
});
boxes.push({
    x: 85,
    y: 100,
    width: 60,
    height: 43
});
boxes.push({
    x: 10,
    y: 60,
    width: 60,
    height: 43
});
boxes.push({
    x: 300,
    y: 50,
    width: 60,
    height: 10
});
boxes.push({
    x: 400,
    y: 70,
    width: 60,
    height: 10
});

canvas.width = width;
canvas.height = height;

function update() {
    // check keys
    if (keys[38] || keys[32]) {
        // up arrow or space
        if (!player.jumping &&...