JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width=900></canvas>

JavaScript

var canvas = document.getElementById('canvas'),
		cnv = canvas.getContext('2d');
		canvas.width = 900;
		canvas.height = 250;
		var x = 0, y = 0;
		var cell_size = 16;   
        var step  = 20;       // Если использовать шаги, то как-то криво получается
	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,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,0,0,1,1,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,0,0,0],
[0,0,2,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0],
[0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0],
[0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0],
[0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,1,0,1,0,0,0,1,1,1,1,0,0,0,0,0,0],
[0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0],
[0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0],
[0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,1,1,1,0,0,0,2,0,0],
[0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,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,0,0,0,0,0,0,0,0,0,0,0,0,0]
];

console.log(map.length, map[0].length);

 	canvas.width  = map[0].length * cell_size;
	canvas.height = map.length * cell_size;
 


function init(){
cnv.fillStyle = "#eee";
cnv.fillRect(0,0, 900, 450);
	cnv.fillStyle = "orange";
	for(var i = 1; i < map.length; i++){
		for(var j = 1; j <= map[0].length; j++){
			if(map[i][j] == 1){
				cnv.fillRect(j * cell_size, i * cell_size, cell_size, cell_size); 
			}
		}
	}
}

function player(){

    document.onkeydown = function(e){
        var last_x = x;
        var last_y = y;
        
        if(e.keyCode == 37) x-=cell_size;
        if(e.keyCode == 38) y-=cell_size;
        if(e.keyCode == 39) x+=cell_size;
        if(e.keyCode == 40) y+=cell_size;
        
        if(!collision(x/cell_size, y/cell_size)) {   // здесь...
            cnv.clearRect(x,y, cell_size,cell_size);
            init();
            
            cnv.fillStyle = "#000";
            cnv.fillRect(x, y, cell_size,...