JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

Right,Left,Down,Right,Up,Right,Down,Left,Up,Left

JavaScript

var pathFinder = {
	map: [],
	max: -1,
	path: '',
	humanNames: ['Up', 'Right', 'Down', 'Left'],
	debug: false,
	dummyMap: [
		[1,1,1,1,6,1,1,1],
		[6,1,1,1,1,1,1,1],
		[1,1,6,2,2,6,1,6],
		[1,1,2,1,1,1,1,1],
		[1,1,1,1,1,6,1,1],
		[9,6,1,2,2,1,1,2],
		[1,1,1,1,1,6,1,2],
		[1,6,2,1,2,1,1,1]
	]
};

pathFinder.init = function() {
	var ctx = pathFinder;
	console.time('Work');
	ctx.parse();
	ctx.findPath(ctx.map);
	console.timeEnd('Work');
};

pathFinder.parse = function() {
	var ctx = this,
		submap = [];

	try {
		// read map from html
		$('.snowclean-cell').each(function( i, v) {
			//console.log(i);
			var snow = $(this).find('.g45-snow');
			if(snow.size() > 1) {
				submap.push(9); // player
			} else if(snow.hasClass('i45-snowdrift')) {
				submap.push(1); // small snow
			} else if(snow.hasClass('i45-snowdrift-big')) {
				submap.push(2); // big snow
			} else if(snow.hasClass('i45-ice')) {
				submap.push(6); // ice
			}
			if(i%8 == 7) {
				ctx.map.push(submap);
				submap = [];
			}
		});
	} catch(e) {
		throw new Error('Couldn`t find map :(');
		if(ctx.map.length == 0) {
			ctx.map = ctx.dummyMap;
		}
	}
};

pathFinder.to4 = function(num) {	
	var r = ''; 
	while(num > 0) {
		r += num%4;
		num = Math.floor(num/4);
	}
	r += Array(10-r.length).join(0);
	return r;
};
pathFinder.toHuman = function(path) {
	var result = [];
	path.split('').forEach(function(v) {
		result.push(pathFinder.humanNames[+v]);
	});
	return result;
};

pathFinder.getStartCoords = function(map) {
	var startCoords = {};
	for(var i =0; i < map.length; i++) {
		for(var j = 0; j < map[0].length; j++) {
			if(map[i][j] == 9) {
				startCoords.x = j;
				startCoords.y = i;
				map[i][j] = 0;
				break;
			}
		}
	}
	return startCoords;
}

pathFinder.calcPath = function(mapCopy, path) {
	var ctx = this;
	var startCoords = this.getStartCoords(mapCopy);// find start coords
	// current coords
	var x = startCoords.x,
		y = startCoords.y,
		count = 0;
	
	ctx.debug && console.log('-- Path: ' +...