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
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
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.