JSFiddle - React, Tailwind, and code Playground

by PerroAZUL

HTML

<canvas width="400" height="400"></canvas>

JavaScript

var context = document.getElementsByTagName("canvas")[0].getContext("2d");

var dt = 30; // ms
var accumulator = 0;
var t0 = Date.now();

var input = {
    left:  false,
    right: false,
    jump:  false
};

var prevpos  = {x: 200, y: 0};
var position = {x: 200, y: 0};
var velocity = {x:   0, y: 0};

window.onkeydown = function(e) { keyboard(e.keyCode || e.which, true); };
window.onkeyup   = function(e) { keyboard(e.keyCode || e.which, false); };

function frame()
{
    var t1 = Date.now();
    var frameTime = Math.min(t1 - t0, 250);
    
    t0 = t1;
    accumulator += frameTime;
    
    while (accumulator >= dt)
    {
        update(dt / 1000);
        accumulator -= dt;
    }
    
    draw(accumulator / dt);
    
    requestAnimationFrame(frame);
}

function keyboard(keyCode, pressed)
{
    switch (keyCode)
    {
        case 37: input.left  = pressed; break;
        case 39: input.right = pressed; break;
        case 38: input.jump  = pressed; break;
    }
}

function update(dt)
{
    var G    =  3920;
    var JUMP = -1200;
    var MOVE =  500;

    prevpos.x = position.x;
    prevpos.y = position.y;
    
    if (input.jump && position.y === 400)
        velocity.y = JUMP;
        
    velocity.x = input.left ? -MOVE : input.right ? MOVE : 0;
    velocity.y += G * dt;
    position.x += velocity.x * dt;
    position.y += velocity.y * dt;
    
    // resolve collisions
    position.y = Math.min(400, position.y);
    position.x = Math.min(400, Math.max(0, position.x));
}

function draw(framePercent)
{
    var x = prevpos.x + (position.x - prevpos.x) * framePercent; // lerp
    var y = prevpos.y + (position.y - prevpos.y) * framePercent;
    
    context.fillStyle = "#ccc";
    context.fillRect(0, 0, 400, 400);
    context.fillStyle = "#000";
    context.fillRect(x - 20, y - 40, 40, 40);
}


requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame;

frame();