JSFiddle - React, Tailwind, and code Playground

by PerroAZUL

CSS

body {margin:0}

JavaScript

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

canvas.width = 50*12;
canvas.height = 50*12;

document.querySelector("body").appendChild(canvas);

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

var player = {
	box: {w: 40, h: 40},
	prevpos: {x: 200, y: 0},
	position: {x: 200, y: 0},
	velocity: {x: 0, y: 0},
	on_floor: false,
	input: {
		left:  false,
		right: false,
		jump:  false
	}
};

var map = {
	w: 12,
	h: 12,
	tile_size: 50,
	tiles: [
		0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
		1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
		1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
		1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
		1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
		1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
		1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
		1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1,
		1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1,
		1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 0, 1,
		1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1,
		1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
	]
};

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

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 draw(framePercent)
{
	context.fillStyle = "#CCF";
	context.fillRect(0, 0, canvas.width, canvas.height);

	context.fillStyle = "#000";

	var tsz = map.tile_size;

	for (var y = 0, i = 0; y < map.h; y++)
	{
		for (var x = 0; x < map.w; x++)
		{
			if (map.tiles[i++] === 1)
				context.fillRect(x * tsz, y * tsz, tsz, tsz);
		}
	}

	var x = player.prevpos.x + (player.position.x - player.prevpos.x) * framePercent;
	var y = player.prevpos.y + (player.position.y - player.prevpos.y) * framePercent;

	context.fillStyle = "#F00";
	context.fillRect(x - player.box.w/2, y - player.box.h, player.box.w,...