[ipsBruno]

Sistema de Mapas Online

Por Bruno da Silva

Hoje vou publicar uma pequena pбgina que fiz 3 de novembro de 2011 e nгo pude postar no fуrum sa:mp por estar banido. Se trata de um sistemas de mapa online, totalmente feito em javacript sem menor dificuldade de implementar ele.

O mapa online й uma imagem do mapa de san andreas onde mostra pontos coloridos que representam os players diretamente da WEB !! Tudo atualizado em tempo real, usando ajax implementado a javascript que pega as informaзхes em php que pega tudo do servidor. Que salva os dados!


Modo de uso
Mude a seguinte trecho da pбgina mapa.html:

Vocк precisarб mudar:

var siteUrl = "teste.php"; // pбgina php para ler jogadores
var tempoAtualizacao = 800; // tempo de atualizaзгo do mapa

Em ler_Players.php vocк precisarб mudar:
$arquivo = "dadosMapa.txt"; // Localizaзгo dos arquivos do servidor

Enquanto ao salvarJogadores.amx precisarб ser carregado no servidor

Download:
http://www.solidfiles.com/d/814c/download/

Crйditos
O sistema foi criado por mim (Bruno da Silva), por favor, mantenha os crйditos. Em breve colocarei uma demo que estou fazendo.

Estб bem simples, mas achei muito eficiente e leve, sem precisar do uso de APIs alheias.

Espero que gostem.

[ipsBruno]

Este script tem a mesma funзгo deste:
https://sampforum.blast.hk/showthread.php?tid=48543

Mas nгo utiliza APIs da ******. Eu prуprio recriei baseado em uma imagem e usei cбlculos para deixar preciso a colocaзгo do player em relaзгo a posiзгo da imagem/ponto

_
ATUALIZAЗГO IMPORTANTE

mapa.html Atualizado 21/06/2012

PHP Code:


<DIV style='position:relative;' id="armazenarTudo">
    <img id=tamanhoImagem src='mapa_cista.jpg' height=480 width=480 style='position:absolute; top:3px; left:1px;'>
    </img>
</div>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<script>
// =========================== [ Configuraзхes ] =========================================
var siteUrl = "index.php?lermapas=1";
var tempoAtualizacao = 1000;
var hoverLigado = false;
// =========================== [ Configuraзхes ] =========================================
executarArquivo();
    
function deletarUsuarios()
{
    document.getElementById("armazenarTudo").innerHTML = "<img id=tamanhoImagem src='mapa_cista.jpg' height=480 width=480 style='position:absolute; top:3px; left:1px;'></img>";
    return true;
}
function criarUsuario(playerid, vida, colete, dinheiro, arma, nome , cor)
{
    var c = parseInt(cor);
    var r = (c >> 24) & 0xFF;
    var g = (c >> 16) & 0xFF;
    var b = (c >> 8) & 0xFF;
 
 
    var cor_rgb =  '#' + r.toString(16) + g.toString(16) +b .toString(16);
    return document.getElementById("armazenarTudo").innerHTML += "<div style='position:absolute; top:0px; left:6px; ' id='textoAcima" + playerid + "' onMouseOver='document.getElementById(\"textoEncima" + playerid +  "\").style.display = \"block\";hoverLigado= true;' onmouseout='document.getElementById(\"textoEncima" + playerid +  "\").style.display = \"none\";hoverLigado= false;'><font size=6 color="+ cor_rgb +">•</font><div style='float:left;position:absolute;top:35;height:120px;width:210px;background-color:black;-webkit-border-radius: 10px 15px;display:none;' id='textoEncima" + playerid + "' ><p><font size=1 color=white face=verdana>    Jogador: "+ nome + "<br/>    Vida:" + vida + "<br/>    Colete: " + colete + "<br/>    Dinheiro: " + dinheiro + "<br/>    Arma: " + arma + "</font></p></div></div>";
}
function executarArquivo()
{
    if(hoverLigado == false)
    {
        deletarUsuarios();
    
        $.get(siteUrl, function (data) {
        
            var jogadores = data.split("\n");
        
            for(var i = 1; i != (jogadores.length + 1); i++)
            {    
    
                var dados = jogadores[i].split("|");
                if(dados[0].length > 2) {
                    criarUsuario(i, dados[1], dados[2], dados[3], dados[4], dados[0], dados[7]);
    
                    colocarPosicao(i, Math.round(dados[5]), Math.round(dados[6]));
                }
            }
        
        });
    }
    setTimeout('executarArquivo();',tempoAtualizacao);
}
function colocarPosicao(playerid, x,y)
{
    x = Math.round(((x         + 2855) / 2) * (document.getElementById("tamanhoImagem").width  / 3000));
    y = Math.round((((y * -1)     + 2855) / 2) * (document.getElementById("tamanhoImagem").height / 3000));
    var name = 'textoAcima' + playerid;
    document.getElementById(name).style.top =  (y) +  "px";
    document.getElementById(name).style.left =  (x)  +  "px";
}
</script> 


IMAGEM DO FUNCIONAMENTO

[cJMaster_]

Oque eu estava precisando! Thanks

[Smith.]

Nossa, muito bom

[ipsBruno]

Obrigado! Atualizei com uma imagem do funcionamento do mesmo e uma pequena correзгo de um bug devido a atualizaзгo dos navegadores !!

[paulor]

Fodбstico, nunca tinha pensado nisso antes! Vou usar, Parabйns!

[bgmrk]

Interessante.

Quote:

Originally Posted by doodem Oque eu estava precisando! Thanks

Й bom saber que vocк voltou a ativa amigo.

[Truck]

kkkkkkkk Genial. Muito bom, +rep.

[sanalex]

Йpico!!!

[Kuddy]

Lуl =D

Repetaculй drakins.

@off

E esses maninho da йpoca das cavernas ae ? o.O