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 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 updatePlayer() {
	player.sy += 0.1; //гравитация
	
	//если скорость больше размера тайла
	while(player.sx > tsize) {
		player.x += tsize;
		player.sx -= tsize;
		collision(player, 0); //коллизия по x
	}
	player.x += player.sx;
	collision(player, 0); //коллизия по x
	
	player.onLand = false;
	player.y += player.sy;
	collision(player, 1); //по y
	
	//замедление по 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[69]) player.sx = tsize*2; //световой скачок вправо на E
	
	if ((keys[38] || keys[87]) && player.onLand) {...