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 w = canvas.width; //размеры канваса
var h = canvas.height;
var g = canvas.getContext('2d');
g.font = "10px Verdana"; //дефолтный шрифт

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; //гравитация
	
	if (player.sx != 0) {
		
		var sx = Math.abs(player.sx);
		var vx = sx / player.sx; //вектор направления
		
		while(sx > tsize) { //скорость больше размера тайла
			player.x += tsize * vx;
			sx -= tsize;
			collision(player, 0);
			if (player.sx == 0) sx = 0;
		}
	
		player.x += sx * vx;
		collision(player, 0); //коллизия по x
	}
	
	if (player.sy != 0) {
		
		var sy = Math.abs(player.sy);
		var vy = sy / player.sy;
		
		while(sy > tsize) {
			player.y += tsize * vy;
			sy -= tsize;
			collision(player, 1);
			if (player.sy == 0) sy = 0;
		}
	
		player.onLand = false;
		player.y += sy * vy;
		collision(player, 1); //коллизия по y
	}
	
	//замедление по x
	if...