HTML/JS/CSS grade isométrica com ladrilhos de cliques semi-transparentes

Question

Estou tentando criar um aplicativo/jogo da web que use uma visualização isométrica lateral e ladrilhos transparentes. Eu posso exibi -los OK (mas não ótimos) usando uma fórmula PHP que apenas define cada div (cada ladrilho) como posição: absoluto e defina os parâmetros superior e esquerda. O problema é como eu pego cliques em um ladrilho e deixo ladrilhos com bits transparentes cliquem no ladrilho abaixo dele.

Um exemplo do meu problema é em http://stuff.adammw.homeip.net/other/fv/farmville_2.html

Answer 1

Você não poderá fazer isso com os próprios elementos de ladrilhos, pois eles são sempre retangulares. Você terá que monitorar a posição do mouse dentro de um elemento pai contendo todos os ladrilhos e elaborar manualmente quais pixels correspondem a quais ladrilhos.

Para um mapeamento isométrico de posição para o ladrilho, isso seria fácil, mas isso estaria tomando a posição de ponto como um lugar 'no chão'; Não permitiria que você usasse os dados da máscara da imagem para testar objetos como as árvores que renderizam na frente do solo. (Você quer fazer isso de qualquer maneira? Atualmente, algumas árvores obscurecem totalmente o ladrilho moído abaixo delas.)

Se você realmente precisa acertar o teste contra máscaras de imagem, você pode:

uma. Escreva um script para extrair os dados da máscara da imagem e incluí -los na fonte JavaScript como máscaras binárias codificadas. Eu fiz isso para detecção de colisão em jogos JavaScript, mas não é muito divertido, pois pode ocupar muito espaço e você precisa reexportar os dados quando atualizar os gráficos.

b. extrair os dados da imagem para teste usando um <canvas> e getImageData. Nesse ponto, você pode considerar o uso de uma tela para renderizar também, já que você já perdeu os usuários do IE.

Answer 2

Você precisa usar as transformações CSS3 ou a transformação da matriz no IE.

A sintaxe se parece mais disso:

-webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
-moz-transform: skew(0deg, -30deg) scale(1, 1.16);

Alguns bons exemplos:

http://www.fofronline.com/experiments/cube/index.html

http://www.useragentman.com/blog/2010/03/09/cross-rowsher-css-transforms-even-in-ie/

Answer 3

Como este é um jogo baseado em ladrilhos, talvez você deva determinar com qual o ladrilho o usuário está interagindo usando uma fórmula simples. Use algum JavaScript para determinar as coordenadas de um clique ou outra ação. Em seguida, faça alguma aritmética para descobrir em que ladrilho agir. Isso faz sentido?

Caso contrário, eu concordo com Bobince. Sua abordagem provavelmente não funcionará facilmente.