2010-02-14 14 views
8

J'essaie de créer une application/un jeu Web qui utilise une vue latérale «isométrique» et des carreaux transparents. Je peux les afficher ok (mais pas génial) en utilisant une formule PHP qui ne fait que placer chaque div (chaque tile) en position: absolute et définir les paramètres haut et gauche. Le problème est de savoir comment attraper les clics sur une tuile et laisser les tuiles avec des clics transparents cliquer sur la tuile en dessous.Grille isométrique HTML/JS/CSS avec carreaux de clichés semi-transparents

Un exemple de mon problème est à http://stuff.adammw.homeip.net/other/fv/farmville_2.html

Répondre

4

Vous ne serez pas en mesure de le faire avec les éléments de tuiles eux-mêmes, car ils sont toujours rectangulaires. Vous devrez surveiller la position de la souris dans un élément parent contenant toutes les tuiles et déterminer manuellement quels pixels correspondent à quelles tuiles. Pour une représentation isométrique de la position sur la dalle, cela serait facile, mais cela signifierait que la position du point serait «au sol»; cela ne vous permettrait pas d'utiliser les données de masque de l'image pour tester des objets tels que les arbres qui apparaissent devant le sol. (Voulez-vous faire de toute façon actuellement des arbres tout à fait obscure la tuile terre en dessous d'eux?).

Si vous avez vraiment besoin de frapper épreuve contre des masques d'image, vous pouvez:

a. écrire un script pour extraire les données de masque de l'image et les inclure dans la source JavaScript sous forme de masques binaires codés. Je l'ai fait pour la détection de collision dans les jeux JavaScript, mais ce n'est pas très amusant car cela peut prendre beaucoup de place et vous devez réexporter les données lorsque vous mettez à jour les graphiques.

b. extraire les données d'image pour les tests en utilisant un <canvas> et getImageData. À ce stade, vous pourriez envisager d'utiliser un canevas pour le rendu, étant donné que vous aurez déjà perdu des utilisateurs d'IE.

+1

il serait probablement bon de "perdre" ces satanés IE utilisateurs imho =) – Chii

+0

Après être allé avec de la toile, il est un peu difficile de trouver un bon moyen de le faire, mais heureusement, j'ai trouvé quelque chose qui a fait exactement at - http://philip.html5.org/demos/canvas/spritepick/example.html Le seul problème avec cette méthode est qu'il est très javascript/processeur intensif et je ne suis pas sûr si cela fonctionnera pour le but original qui était de fournir une compatibilité avec le navigateur Web iPhone. –

1

Puisqu'il s'agit d'un jeu basé sur des tuiles, vous devriez peut-être simplement déterminer avec quelle tuile l'utilisateur interagit en utilisant une formule simple. Utilisez du javascript pour déterminer les coordonnées d'un clic ou d'une autre action. Ensuite, faites un peu d'arithmétique pour déterminer quelle tuile agir. Cela a-t-il du sens?

Sinon, je suis d'accord avec Bobince. Vous approchez probablement ne fonctionnera pas facilement.

+0

Donne beaucoup de sens – Jonno