JSFiddle - React, Tailwind, and code Playground

by Maks M.

HTML

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

CSS

#canvas {
  border: 1px solid #000;
}

JavaScript

var canvas = document.getElementById('canvas');
var g = canvas.getContext('2d');
var w = canvas.width; //размеры канваса
var h = canvas.height;

var keys = {}; //нажатые клавиши
var player = {
	x:0, y:0, w: 16, h: 32,
	sx: 0, sy: 0, //скорость игрока
	onLand: false //возможность прыгать и тд
};
var tsize = 32; //размер тайла
var map = [
	[0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,1,0,0],
	[0,0,0,0,1,0,0,0,1,0,0,0],
	[0,0,1,0,0,0,0,0,0,1,1,0],
	[0,0,0,0,0,1,0,0,1,0,1,0],
	[1,1,1,1,1,1,1,1,1,1,1,1]
];
//array object lifehukc
map.w = map[0].length;
map.h = map.length;

//обработка клавиш
window.onkeydown = function (e) {
	keys[e.keyCode] = true;
}

window.onkeyup = function (e) {
	keys[e.keyCode] = false;
}

function drawPlayer() {
	g.fillStyle = "#F9A520";
	g.fillRect(player.x, player.y, player.w, player.h);
}

function drawMap() {
	g.fillStyle = "#A0A020";
	for (var iy = 0; iy < map.h; iy++)
	for (var ix = 0; ix < map.w; ix++) {
		var id = map[iy][ix];
		if (id != 0) g.fillRect(ix*tsize, iy*tsize, tsize, tsize);
	}
}

function updatePlayer() { //гравитация и управление
	player.sy += 0.1;
	
	if (player.onLand) { //торможение по x (только на земле)
		if (player.sx >= 0.1) player.sx -= 0.1;
		if (player.sx <= -0.1) player.sx += 0.1;
		if (Math.abs(player.sx) < 0.1) player.sx = 0;
	}
	
	if ((keys[37] || keys[65]) && player.sx > -3) player.sx -= 0.3;
	if ((keys[39] || keys[68]) && player.sx < 3) player.sx += 0.3;
	
	if ((keys[38] || keys[87]) && player.onLand) { //прыжок
		player.onLand = false;
		player.sy = -4;
	}
	
	if (keys[82]) { //перезапуск на клавишу R
		player.x = 0;
		player.y = 0;
		player.sx = 0;
		player.sy = 0;
	}
}

function getTile(x, y) {
	var cell = 0; //или 1/undefined/null/etc
	if (x > -1 && y > -1 && x < map.w && y < map.h) {
		cell = map[y][x];
	}
	return cell;
}

function block(x, y) {
	x = Math.floor(x/tsize);
	y = Math.floor(y/tsize);
	player.tx = x*tsize;
	player.ty = y*tsize;
	
	if (getTile(x, y) == 0) return...