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.
il serait probablement bon de "perdre" ces satanés IE utilisateurs imho =) – Chii
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. –