php Dúvida criando Mapa

**Username_** · 20 de Agosto 2017

Olá,

Alguém saberia me dizer a melhor forma de criar um mapa 2D em PHP, tipo a lógica? Eu estou tentando usar arrays pra pegar a numeração do tile e outro array pra tentar carregar a imagem. Mas a imagem não esta aparecendo e não sei se tem como carregar a imagem em um array.

Não sei como conectaria o array com as numerações e o array que carrega as imagens, eu digo a lógica. Mas estou tentando desta forma:

É necessário se cadastrar para acessar o conteúdo.

Se alguém souber uma lógica legal e puder ajudar eu agradeço.

Obrigado.

**Username_** · 20 de Agosto 2017

Qual a melhor forma de imprimir um mapa 2D usando arrays?

O array que carrega as imagens está assim:

É necessário se cadastrar para acessar o conteúdo.

Para imprimir as imagens do array eu estou fazendo assim:

É necessário se cadastrar para acessar o conteúdo.

Mas está imprimindo até os "echos". E se eu tiro o "echo" ele não imprimi o array.

E tem a CSS que não sei qual a melhor maneira de utilizar pra deixar os tiles um ao lado do outro e emcima um do outro tipo usando posição absolute, float. Estou tentando fazer de tudo um pouco mas não sei se a lógica está correta pra um mapa 2D.

Imagem:

É necessário se cadastrar para acessar o conteúdo.

Está todo bagunçado.

Estou apanhando com o CSS como da pra ver na imagem.

Minha CSS está assim:

É necessário se cadastrar para acessar o conteúdo.

Se alguém tiver uma lógica melhor e puder compartilhar eu agradeço.

Abraços.

Cr4cko · 20 de Agosto 2017

A lógica você pode fazer de diversos modos. Voce pode criar um lista de numeros inteiros, e o numero em sí poderia representar o tipo de imagem que voce quer.

Por exemplo:

É necessário se cadastrar para acessar o conteúdo.

Esse seria o esqueleto do seu mapa. Você precisa usa-lo como base, e não montar ja o mapa no proprio array, pois seria bem dificil de dar manutenção.

Agora, com um esqueleto, voce pode fazer as substituicoes.

Vou fazer em javascript, o que muda poucas coisas em PHP, a lógica é a que importa, certo?

É necessário se cadastrar para acessar o conteúdo.

Você terá todo o mapa criado, com suas class e tudo mais. Ai no caso, em CSS voce coloca um background nas classes .grama e .pedra.

Veja um exemplo que criei no Codepen.io para você ver na prática como é simples:

É necessário se cadastrar para acessar o conteúdo.

Abraços.

**Username_** · 20 de Agosto 2017

Cara está muito bom seu mapa. Não sei se a lógica seria igual para mim pois as imagens são tiles isométricos. Mas estou vasculhando seus códigos tentando entender.

Mas se puder me dizer o que seria isso "class="tile grama"". Você está usando duas classes ao mesmo tempo?(a classe .tile e a classe .grama)?

Estou tentando recriar o código que você fez no PHP.

- O que é o comando "data-position" do JS? O que ele faz?

- Quando você faz "$('#my-map')" você está criando uma classe do CSS no JS?

- O que é este comando "$(document)"?

- E este comando "$(this).data('position');". "this" ele está pegando o documento "html"? E "position" é o que?

São muitas dúvidas, estou apanhando bastante. Pelo que vi por enquanto parece que está usando JQuery, certo? Estou meio confuso com o código mas estou tentando entender.

Se não quiser responder às dúvidas eu entendo. Mas é melhor postar do que não postar.

Obrigado pela ajuda.

**Username_** · 20 de Agosto 2017

Estou tentando mas por enquanto não consegui imprimir na tela do jeito que recomendou. Estou tentando.

CSS:

É necessário se cadastrar para acessar o conteúdo.

Ainda não está imprimindo nada na tela.

Obrigado pela ajuda.

**Username_** · 20 de Agosto 2017

Eu atualizei o código acima imprimindo diretamente a variável $mapa_renderizado sem o JS. O resultado foi que agora está imprimindo "0"(zero) na tela.

Código:

É necessário se cadastrar para acessar o conteúdo.

O resultado de $mapa_renderizado é

000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

Mas se eu imprimir o array diretamente, ele imprime normalmente os '0's (zero) e '1's (um) normalmente.

Então não estou conseguindo passar pra variável $mapa_renderizado a imagem a ser impressa.

O código que imprime o array normalmente, sem imagens:

É necessário se cadastrar para acessar o conteúdo.

O resultado é os valores do array:

100000000000000000111111000000000011000000000000110000000000001100000000000011000000000000000000000

Obrigado.

Cr4cko · 20 de Agosto 2017

Cara está muito bom seu mapa. Não sei se a lógica seria igual para mim pois as imagens são tiles isométricos. Mas estou vasculhando seus códigos tentando entender.

Mas se puder me dizer o que seria isso "class="tile grama"". Você está usando duas classes ao mesmo tempo?(a classe .tile e a classe .grama)?

Estou tentando recriar o código que você fez no PHP.

- O que é o comando "data-position" do JS? O que ele faz?

- Quando você faz "$('#my-map')" você está criando uma classe do CSS no JS?

- O que é este comando "$(document)"?

- E este comando "$(this).data('position');". "this" ele está pegando o documento "html"? E "position" é o que?

São muitas dúvidas, estou apanhando bastante. Pelo que vi por enquanto parece que está usando JQuery, certo? Estou meio confuso com o código mas estou tentando entender.

Se não quiser responder às dúvidas eu entendo. Mas é melhor postar do que não postar.

Obrigado pela ajuda.

Cara, o que mais quero é te ajudar, fique tranquilo!

Vamos lá, antes de mais nada a lógica é a mesma em qualquer linguagem, pelo menos nessa dimensão que vivemos kkkk

A questão é, talvez eu precise entender melhor o que você precisa para encontrarmos o resultado perfeito.

Se voce quer fazer um jogo em 2d com uma biblioteca, que existem diversos tutoriais na internet, você pode dar uma pesquisada em ThreeJS, BabyloonJS que são frameworks javascript que você pode fazer jogos em 3d em primeira pessoa se quiser. Mas pelo que vi, tu é um cara que quer fazer a parada na raça. Então vou tentar te ajudaR:

Mas se puder me dizer o que seria isso "class="tile grama"". Você está usando duas classes ao mesmo tempo?(a classe .tile e a classe .grama)?

Sim, estou usando 2 classes de css dentro da mesma div/span. O que acontece é que eu gosto de componentizar até mesmo o CSS. Por exemplo,

no caso que fiz, eu não pensava em imagens ou imagens isometricas, eu so queria no exemplo, pintar de verde e cinza o chão. Entao criei 2 classes: grama e pedra. So adicionei uma cor, que é o unico atributo que diferencia as 2. E criei uma classe chamada tile, um nome aleatorio que coloquei (seguindo a ideia do teu post). Nele eu adicionei no css os componentes em comum tanto no pedra e grama. Ambos são quadrados, tamanhos iguais e adicionei uma borda so para voce ver cada div que foi criada e tal. Tipo, isso é legal em qualquer projeto, componentizar para reaproveitar. Principalmente voce que vai criar jogos, o ideal e voce componentizar as coisas. Voce nao precisa criar uma entidade Zumbi e uma entidade Humano. Voce pode criar uma entidade NPC com atributos em comum entre humano e zumbi, e criar um atributo chamado raca que pode variar entre humano e zumbi. Os 2 andam a uma VELOCIDADE, os 2 tem TAMANHOS, os 2 tem ACOES, os 2 tem CORES e FORCA. Veja que em maiusculo falei atributos em comum. Componentizar, esse é o esquema. Falei muito, mas quis deixar bem claro.

O que é o comando "data-position" do JS? O que ele faz?

tipo, dentro de uma tag voce pode colocar qualquer atributo, para trabalhar com javascript, jquery, etc. No caso, o data que eu usei, é um padrãozinho que o jQuery possui em sua coleção de códigos. Ele possui um comando chamado .data(), onde eu menciono 'position' no parametro, para ele procurar nos atributos DATA daquela div/span, o position. Position e so a index do for each que fiz no array de numeros que criamos no mapa. Se voce ver no jsfiddle, na parte de javascript, quando eu clico em um bloco de mapa, ele pega essa position na div e escreve dentro da div "selected-index" que criei. Nada demais.

Quando você faz "$('#my-map')" você está criando uma classe do CSS no JS?

Sim exatamente. Isso é graças ao jQuery. Daria para fazer tranquilamente com Javascript, mas estou usando o jQuery pois é mais simples e curta a sintaxe.

O que é este comando "$(document)"?

Tipo, como eu estou renderizando o mapa em HTML só depois do carregamento, então eu menciono o document , que é uma variavel javascript global, que contem todos os atributos do HTML. Entao eu meio que falo para ele que quero criar um evento de CLICK quando existir no DOCUMENT os #mapa-index. Se eles ja existissem (eu nao tivesse fazendo append com javascript no HTML), eu poderia so usar o #("#mapa-index"). É um esqueminha com jQuery que fazemos quando os elementos ainda não existem no documento ;)

E este comando "$(this).data('position');". "this" ele está pegando o documento "html"? E "position" é o que?

quando crio um evento para o id #mapa-index, o this seria ele em si. Entao eu procuro através do jQuery no THIS, o DATA daquela div com o nome POSITION.

Lembra que criei um evento de click no #mapa-index? Criei para cada posição do array, então tera muitos. Clicando em qualquer um deles, pega o data-position e joga no selected-position. É exatamente o que isso faz:

É necessário se cadastrar para acessar o conteúdo.

Cr4cko · 20 de Agosto 2017

Eu atualizei o código acima imprimindo diretamente a variável $mapa_renderizado sem o JS. O resultado foi que agora está imprimindo "0"(zero) na tela.

Código:

É necessário se cadastrar para acessar o conteúdo.

Entre

ou

Cadastre-se

O resultado de $mapa_renderizado é

Mas se eu imprimir o array diretamente, ele imprime normalmente os '0's (zero) e '1's (um) normalmente.

Então não estou conseguindo passar pra variável $mapa_renderizado a imagem a ser impressa.

O código que imprime o array normalmente, sem imagens:

É necessário se cadastrar para acessar o conteúdo.

Entre

ou

Cadastre-se

O resultado é os valores do array:

Obrigado.

Voce ta dando ECHO dentro do for. Nao pode. Voce primeiro popula o mapa_renderizado com as divs e depois faz o echo. Esse echo no proprio HTML.

**Username_** · 20 de Agosto 2017

Muito obrigado pelas explicações.

Mas estou com um código similar ao que você fez e aqui não funciona, não imprime as imagens. Sinceramente não sei o que fazer. Estou travado nesta parte.

Meu objetivo seria criar um mapa pra um MMO usando um mapa como este:

É necessário se cadastrar para acessar o conteúdo.

Esse jogo é código aberto mas revirando o código dele, ele carrega as imagens com divs também. Mas não consegui entender o código a fundo a ponto de sair fazendo o meu próprio, tanto que tentei fazer com arrays carregando direto as imagens.

Se eu conseguisse recriar esse mapa e saber manipulá-lo eu estaria muito feliz e pronto pra fazer um jogo interessante.

Mas estou travado neste código sem saber o que fazer:

É necessário se cadastrar para acessar o conteúdo.

Usando o ECHO no html:

É necessário se cadastrar para acessar o conteúdo.

Resultado:

0

Está imprimindo zero. O código não está populando com as <div>'s.

Divs:

É necessário se cadastrar para acessar o conteúdo.

Continuo tentando.

Obrigado pela ajuda.

Cr4cko · 20 de Agosto 2017

Encontrei o problema. Eu fiz o código em Javascript, porém não se aplica algumas sintaxes no PHP.

No for, quando eu populo a variavel eu posso usar variavel += "conteudo" no javascript que seria o mesmo que varivavel = variavel + "conteudo".

Porém no PHP para concatenar não usamos o "+" e sim o "." kkkk Segue o codigo modificado, agora vai funcionar (pode inspecionar o elemento se precisar).

É necessário se cadastrar para acessar o conteúdo.

Sobre o jogo, no caso dei uma olhada por cima bem rapida. Voce cria tambem um evento igualzinho o click que criei, so que para HOVER. Entao no hover, verifica todos os players na index que voce ta passando. E no clique voce arrasta o personagem que esta logado para a posicao que esta mandando. So que no caso, esse mapa que fiz, é apenas 1 array de um pedaço do mapa. Pelo que vi no jogo, o negocio é absurdamente maior haha. Vai ter que fazer umas validações e tal, medir tamanhos e tudo mais.

**Username_** · 10 de Setembro 2017

Poxa estou eu aqui denovo.

Estou conseguindo imprimir o array. Porém minha lógica quando clico no botão "Leste" não atualiza o array. Eu estou chamando a mesma página e populando o array dentro de uma tag âncora <a> (link em html). Mas não atualiza o array, sendo que um pouco acima no código ele atualiza o array normalmente usando praticamente o mesmo código. Vai entender.

Se alguém puder ajudar.

Imagem

Essa é a lógica que estou usando. Dentro de uma tag html <a> (âncora) eu populo e atualizo o array.

É necessário se cadastrar para acessar o conteúdo.

Se alguém puder ajudar ou ter uma idéia melhor eu agradeço.

Obrigado.

-------- EDIT --------

O array está sendo montado e mostrando um único conjunto de valores. O problema é que não sei como atualizar pra ir mostrando mais valores.

A dúvida está em como criar uma lógica pra atualizar o array se eu clicar na seta.

Se alguém puder ajudar eu agradeço.

Obrigado.

Entrar

Quem está por aqui 0 membros estão online

php Dúvida criando Mapa

Posts Recomendados

Username_ 28

Link para o comentário

Compartilhar em outros sites

Username_ 28

Link para o comentário

Compartilhar em outros sites

Cr4cko 1.212

Link para o comentário

Compartilhar em outros sites

Username_ 28

Link para o comentário

Compartilhar em outros sites

Username_ 28

Link para o comentário

Compartilhar em outros sites

Username_ 28

Link para o comentário

Compartilhar em outros sites

Cr4cko 1.212

Link para o comentário

Compartilhar em outros sites

Cr4cko 1.212

Link para o comentário

Compartilhar em outros sites

Username_ 28

Link para o comentário

Compartilhar em outros sites

Cr4cko 1.212

Link para o comentário

Compartilhar em outros sites

Username_ 28

Link para o comentário

Compartilhar em outros sites

Conteúdo Similar

Informação Importante