JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mapinha">
  <img id="mapa_big" src="http://triviapw.hiperportal.blog.br/elysium_old/images/floresta_yujia_big_v2.jpg" />
  <img id="mapa_movimento" src="" />
</div>

CSS

#mapinha {
position: relative;
top: 0;
left: 0;
}
#mapa_big {
position: relative;
top: 0;
left: 0;
}
#mapa_movimento {
position: absolute;
top: 0px;
left: 0px;
}

JavaScript

function createMap(totalZones) {
  var source = "http://triviapw.hiperportal.blog.br/elysium_old/images/moves/";
  var zone = 'floresta_yujia_v2-b-%x%.png';
  var x = 0, percent;
  var _map = [];
  for (x; x <= totalZones; x++) {
  	percent = (x/totalZones)*100;
    _map.push({percent: percent, source: source + zone.replace('%x%',x+1)});
  }
  return _map;
}

var waitTime = 10;
var totalZones = 240;
var totalMapTime = totalZones * waitTime; // seconds 2400 -> 40m
var map = createMap(totalZones);
console.log(map);
function positionInTime() {
	var gameNow = new Date().getMinutes() * 60;
  if (gameNow >= totalMapTime) gameNow = gameNow - totalMapTime;
  return (gameNow / totalMapTime) * 100);
}

function updateMap(secondsInterval) {
	var position = positionInTime();
  var image = map.filter(function(object){return object.percent === position})[0];
  console.log(position, image);
  document.querySelector('#mapa_movimento').src = image.source;
  if (!secondsInterval) secondsInterval = waitTime;
  setTimeout(function(){ updateMap(secondsInterval) }, secondsInterval*1000);
}


updateMap();