3

Estou fazendo uma página que funciona como um GPS para um personagem em determinado jogo. O conteúdo da página, nada mais é do que um mapa com um caminho marcado, e 240 imagens sobrepondo este mapa para "marcar" a localização do personagem.

As 240 imagens demoram 40 minutos e 35 segundos para fazer o loop (ir do ponto inicial até o ponto final, e retornar ao ponto inicial).

Com a ajuda do Sergio nesta outra questão, consegui ajustar meu código para trocar as imagens a cada 10 segundos, baseado na hora atual.

Agora o problema que estou enfrentando é: meu javascript ficou absurdamente grande, com mais de 40 mil linhas, está deixando a página com aproximadamente 1,8mb, e isso pode causar uma lentidão para alguns usuários.

Seguindo está lógica para troca das imagens:

function mudarYujia() {
  var currentHora = new Date().getHours();
  var currentMinuto = new Date().getMinutes();
  var currentSegundo = new Date().getSeconds();
  var img = document.getElementById("mapa_movimento");
  var base = "http://triviapw.hiperportal.blog.br/elysium_old/images/moves/";
  var prefixo = "floresta_yujia_v2-b-";
  var extensao = ".png";

if (0<= currentHora && currentHora < 1){
   if (2 <= currentMinuto && currentMinuto < 3){
    if (45 <= currentSegundo && currentSegundo < 55){
   img.src = base + prefixo + '1' + extensao;
    }}}
if (0<= currentHora && currentHora < 1){
   if (3 <= currentMinuto && currentMinuto < 4){
    if (5 <= currentSegundo && currentSegundo < 15){
   img.src = base + prefixo + '2' + extensao;
    }}}
if (0<= currentHora && currentHora < 1){
   if (3 <= currentMinuto && currentMinuto < 4){
    if (15 <= currentSegundo && currentSegundo < 25){
   img.src = base + prefixo + '3' + extensao;
    }}}
if (0<= currentHora && currentHora < 1){
   if (3 <= currentMinuto && currentMinuto < 4){
    if (26 <= currentSegundo && currentSegundo < 36){
   img.src = base + prefixo + '4' + extensao;
    }}}
if (0<= currentHora && currentHora < 1){
   if (3 <= currentMinuto && currentMinuto < 4){
    if (36 <= currentSegundo && currentSegundo < 46){
   img.src = base + prefixo + '5' + extensao;
    }}}
...


return mudarYujia;
}

setInterval(mudarYujia(), 1000); // atualizar a cada 1 segundo

A função verifica a hora, minuto e segundo atual, para poder dizer que imagem deve ser exibida neste momento. Todas imagens estão numeradas de 1 até 240 neste formato "floresta_yujia_v2-b-1.png", "floresta_yujia_v2-b-2.png"...

O código completo pode ser visto aqui no jsfiddle

O mapa utilizado é este

E as imagens sobrepostas ao mapa, que são trocadas, não apenas um objeto utilizado para marcar a localização, e seguem neste formato, porém em outras posições floresta_yujia_v2-b-1.png

Um detalhe importante, é que o personagem recomeça o caminho (imagem "floresta_yujia_v2-b-1.png") todos os dias às 00 horas, 2 minutos e 35 segundos.

Tentei localizar algo na internet que pudesse me ajudar a reduzir tudo, mas não obtive nenhum resultado.

1
  • Por favor evitem longas discussões nos comentários; a conversa de vocês foi movida para o chat
    – Maniero
    Commented 30/01/2017 às 0:22

2 Respostas 2

12

Em vez de ficar trocando uma máscara com o pin em cada posição, podemos repensar na lógica e usarmos a mesma imagem em posições diferentes.

O Marcador (pin)

Vamos começar pelo pin:

pin

Se colocamos o pin dentro de um container com posição absoluta, basta mudar as propriedades top e left conforme necessário. É claro que neste caso, precisamos considerar o "bico" do marcador, e não o canto esquerdo superior dele. Isto é simples de se resolver, basta subtrairmos a altura dele do ponto desejado, e metade da largura.


As coordenadas

Basicamente o que vai acontecer é uma mudança de posição num plano bidimensional, ao longo de um tempo determinado. Então, em vez de usarmos 240 imagens, basta iterarmos por 240 pares de x e y. Em JavaScript isto é fácil com arrays:

var coordenadas = [ [20, 30], [25,87], ...., [98,103] ];

No caso estamos usando uma array de coordenadas, sendo cada coordenada um array de x e y. Nada impediria de fazermos algo mais "simples" alternando x e y num array só, mas por uma questão tanto de didática e de leitura, vamos manter o formato acima.


O tempo

Como você vai tratar de um tempo determinado, onde o movimento tem uma hora inicial e uma hora final, não faz sentido usarmos um intervalo de tempo para calcular isto (incrementar a cada n segundos), melhor usarmos o tempo absoluto. Intervalos costumam apresentar um desvio com o tempo.

Traduzindo em JS:

segundosInicio = 2 * 60 + 35;
segundosDuracao = 40 * 60 + 35;
segundosAgora = ( Date.now() / 1000 ) % 86400;

// calculo do ciclo variando de 0 a <1
c = (( segundosAgora - segundosInicio + segundosDuracao ) % segundosDuracao )
    / segundosDuracao;

Se quiser um movimento de ida e volta, pode usar esta lógica:

// transformando o ciclo em posicao das coordenadas
i = Math.floor((coords.length * 2 - 2) * c);
// aqui determinamos se o movimento é de ida ou volta
if( i >= coords.length ) i = coords.length * 2 - i - 1;

Se quiser um movimento só de ida (por exemplo um caminho circular) basta isso:

// transformando o ciclo em posicao das coordenadas
i = Math.floor(coords.length * c);

Sendo que i é o índice usado para pegar a coordenada correta.


Juntando tudo

O código abaixo é uma demonstração das idéias postas em prática. O tempo da demonstração é calculado diferentemente do mencionado acima, apenas para que seja possível acompanhar o algoritmo em funcionamento sem perder muito tempo. Note como o código é bem enxuto:

var coords = [
   [ 84,270], [148,247], [145,225], [179,184], [240,132],
   [294, 86], [395, 58], [422, 99], [486,117], [516,167],
   [495,227], [509,269], [528,314], [501,376], [489,450],
   [447,504], [377,536], [292,583], [252,526], [217,459],
   [158,338], [140,295]
];

function mudarYujia() {
   // Esta formula aqui e' apenas para demonstracao no site
   // veja o topico anterior para calculo do 'i' ao longo do dia
   var seconds = Date.now() / 1000;
   var i = Math.floor(seconds % coords.length);

   var pin = document.getElementById('pin');
   pin.style.left = (coords[i][0] - 15) + 'px';
   pin.style.top  = (coords[i][1] - 45) + 'px';
}

// Alem de preparar o interval temos que chamar a funcao uma vez
mudarYujia();
setInterval(mudarYujia, 1000);
#map {
	position:relative;
	margin:0;
	padding:0;
	width:600px;
	height:757px;
	background:url(https://i.sstatic.net/J0tAr.jpg);
}

#pin {
	position:absolute;
	width:30px;
	height:45px;
	background:url(https://i.sstatic.net/x3J2d.png);
	background-size:30px 45px;
	top:0;
	left:0;
}
Clique no link "página toda" para ver melhor<br>
<div id="map"><div id="pin"></div></div>

8
  • já marquei sua resposta como aceita, pois funcionou muito bem tudo que me ensinou, obrigado. Já posso ir trabalhando desta forma para meus mapas. A respeito de trabalhar com '%' invés de 'px' não consegui sozinho também, o mais "perto" de responsivo que consegui chegar foi no mapa se reajustar conforme a largura do navegador codepen.io/anon/pen/rjpQjW, mas o pin sumiu para qualquer uma das outras alternativas que tentei, você havia falado que poderia reajustar depois, então vou aguardar, obrigado novamente Bacco.
    – Wesley
    Commented 30/01/2017 às 20:47
  • Para transformar as coordenadas que já tem em porcentagem é simples: (coords[i][0]/600*100) + '%'; e (coords[i][1]/757*100) + '%'; - a única coisa que vai faltar é por no CSS do PIN um margin-left:-15px;margin-top:-45px para ajustar o "bico". Sendo que 600 é a largura da imagem e 757 a altura.
    – Largato
    Commented 30/01/2017 às 21:28
  • não consigo encontrar o que fiz errado codepen.io/anon/pen/pRpqMZ, alterei a parte do javascript e adicionei os dois parâmetros no CSS, porém o pin continua fora do mapa quando a página tem menos de 600px de largura.
    – Wesley
    Commented 30/01/2017 às 22:06
  • Se quer que ocupe com base na largura, melhor especificar o #map em vw, e o pin também. vw é porcentagem da largura. Notar que do jeito que eu fiz, mesmo que você distorça na altura, funciona: codepen.io/bacco/pen/PWEVKE - Dividi a duração por 10 só para ficar mais fácil de analisar.
    – Largato
    Commented 30/01/2017 às 22:23
  • me desculpe por tomar tanto do seu tempo, aprendi bastante coisa com minha pergunta, esse sistema de vw é mais uma que eu nunca tinha ouvido falar. parece que está funcionando perfeitamente! Muito agradecido.
    – Wesley
    Commented 30/01/2017 às 22:45
1

PS.: aproveitei alguns conceitos apresentados pelo Bacco na Resposta acima.

A primeira coisa que precisa fazer, é armazenar a data do evento e as coordenadas do mesmo, então você terá um objeto semelhante ao seguinte.:

var positions = [
    {"data":"2017-01-30T04:16:00.415Z","posX":79,"posY":270},
    {"data":"2017-01-30T04:16:01.350Z","posX":152,"posY":245},
    {"data":"2017-01-30T04:16:01.822Z","posX":146,"posY":218},
    {"data":"2017-01-30T04:16:02.358Z","posX":180,"posY":179},
    {"data":"2017-01-30T04:16:02.847Z","posX":245,"posY":134},
    {"data":"2017-01-30T04:16:03.334Z","posX":291,"posY":86}
]

no exemplo abaixo, se você clicar no mapa, ele irá armazenar a data do click e a posição do mesmo. se clicar em gravar, ele irá reiniciar o processo.

uma vez que possua todos os pontos, será preciso definir a duração da sua animação, no caso será o tempo decorrido desde o primeiro evento até o ultimo.

var primeiro = positions[0];
var ultimo = positions[positions.length - 1];
var total = ultimo.data.getTime() - primeiro.data.getTime();

o segundo passo será definir as etapas da animação, lembrando que ela deve ir de 0% a 100%, ou seja, terá de aplicar uma regra de três simples. no final terá um css como o seguinte.:

.animacao { animation: animacao 3093ms infinite }
@keyframes animacao {
    0.00% { top: 270px; left: 80px; }
    23.15% { top: 248px; left: 148px; }
    42.29% { top: 221px; left: 143px; }
    64.02% { top: 170px; left: 198px; }
    85.22% { top: 101px; left: 273px; }
    100.00% { top: 69px; left: 325px; }
}

no exemplo abaixo, se clicar em executar após criar as coordenadas no mapa, o javaScript irá gerar um CSS dinâmico que irá reproduzir os seus clicks.

var map = document.getElementById("map");
var gravar = document.getElementById("gravar");
var executar = document.getElementById("executar");
var positions = [];

var pin = null;
var style = null;
map.addEventListener("click", function (event) {
  var posX = document.body.scrollLeft - map.offsetLeft + event.clientX;
  var posY = document.body.scrollTop - map.offsetTop + event.clientY;
  
  if (pin) 
    pin.classList.add("transparente");
  pin = document.createElement("div");
  pin.classList.add("pin");
  pin.style.top = posY + "px";
  pin.style.left = posX + "px";
  map.appendChild(pin);
  
  positions.push({ 
    data: new Date(), 
    posX: posX, 
    posY: posY
  });
});

var removerPins = function () {
  var pins = document.querySelectorAll(".pin");
  [].forEach.call(pins, function (pin, indice) {
    map.removeChild(pin);
  });
}

gravar.addEventListener("click", function (event) {
  positions.length = 0;
  removerPins();
});

executar.addEventListener("click", function (event) {
  removerPins(); 
  var primeiro = positions[0];
  var ultimo = positions[positions.length - 1];
  var total = ultimo.data.getTime() - primeiro.data.getTime();
  
  var animation = ".animacao { animation: animacao " + total + "ms infinite }\n";
  animation += "@keyframes animacao {\n";
  var tempos = positions.forEach(function (position, indice) {
    var elapsed = position.data.getTime() - primeiro.data.getTime();
    elapsed = ((elapsed / total) * 100).toFixed(2);
    var posX = position.posX;
    var posY = position.posY;
    animation += "\t" + elapsed + "% { top: " + posY + "px; left: " + posX + "px; }\n";
  });
  animation += "}";
  var blob = new Blob([animation], { type: 'text/css' });
  var cssUrl = URL.createObjectURL(blob);
  
  if (style) 
    document.head.removeChild(style);
  style = document.createElement("link");
  style.rel = "stylesheet";
  style.type = "text/css";
  style.href = cssUrl;
  document.head.appendChild(style);
  
  pin = document.createElement("div");
  pin.classList.add("pin");
  pin.classList.add("animacao");
  map.appendChild(pin);
});
#map {
  position:relative;
  margin:0;
  padding:0;
  width:600px;
  height:757px;
  background:url(https://i.sstatic.net/J0tAr.jpg);
}

.transparente {
  opacity: 0.5;
}

.pin {
  position:absolute;
  width:30px;
  height:45px;
  background:url(https://i.sstatic.net/x3J2d.png);
  background-size:30px 45px;
  transform: translate(-50%, -100%)
}
<input id="gravar" type="button" value="gravar" />
<input id="executar" type="button" value="executar" />
<div id="map">
  
</div>

6
  • obrigado por sua alternativa, achei realmente interessante. Talvez não tenha acompanhado tudo que comentamos aqui, mas eu não entendia nada sobre como trabalhar com as coordenadas para alterar a imagem na página, com o resultado que o Bacco apresentou, já está no caminho final para meu objetivo, mas vou olhar com mais calma o que você me forneceu também. Testei aqui e adicionei diversos pontos, cliquei em executar e o pin fez o caminho certo, porém quando atualiza a página, as informações são perdidas e tinha que regravar. Amanha vou reler para ver se deixei passar algo, muito obrigado
    – Wesley
    Commented 30/01/2017 às 5:42
  • @Wesley à função "gravar" está aí apenas para simular os eventos, o ideal seria que eles já venham preenchidos do servidor. Mas se precisar que eles sejam armazenados localmente, pode usar o localStorage ou o IndexedDB. Commented 30/01/2017 às 10:18
  • @Wesley segue um exemplo usando localStorage.: jsfiddle.net/uyu2m1h8 Commented 30/01/2017 às 12:43
  • tá aí mais um recurso que não conhecia, esse localStorage, muito obrigado. Imaginei que ele acrescentaria algo no arquivo usado para gravar a rota, mas não vi nada diferente nele após fazer a gravação do percurso, caso precise fazer a edição de algum dos pontos após gravado, é possível alterar a localização só dele ou devo regravar tudo?
    – Wesley
    Commented 30/01/2017 às 16:15
  • @Wesley entenda que o LocalStorage fica salvo na máquina do usuário, porém o ideal é salvar no servidor. Em todo caso, no exemplo que passei, ele utiliza o StorageJS, ele possui métodos para remover e atualizar um registro pelo id, no seu caso, uma coordenada. Commented 30/01/2017 às 16:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .