Ich versuche eine Web-App / ein Spiel zu erstellen, das eine Side-on-isometrische Ansicht und transparente Kacheln verwendet. Ich kann sie mit einer PHP-Formel, die jedes div (jede Kachel) nur als position: absolute setzt und die oberen und linken Parameter festlegt, in Ordnung (aber nicht großartig) anzeigen. Das Problem besteht darin, wie ich Klicks auf eine Kachel erhalte und Kacheln mit transparenten Bits auf die darunter liegende Kachel klicke.
Ein Beispiel für mein Problem ist Ссылка
Das wird mit den Kachelelementen selbst nicht möglich sein, da sie immer rechteckig sind. Sie müssen die Mausposition innerhalb eines übergeordneten Elements mit allen Kacheln überwachen und manuell herausfinden, welche Pixel welchen Kacheln entsprechen.
Für eine isometrische Zuordnung von Position zu Kachel wäre dies einfach, aber das würde die Punktposition als einen Ort "auf dem Boden" einnehmen; Es würde Ihnen nicht erlauben, die Maskendaten des Bildes zu verwenden, um Objekte wie die Bäume, die vor dem Boden rendern, zu testen. (Möchten Sie das trotzdem tun? Zur Zeit verdecken einige Bäume die Bodenfliese unter ihnen.)
Wenn Sie einen Test für Bildmasken wirklich benötigen, können Sie:
a. Schreiben Sie ein Skript, um die Maskendaten aus dem Bild zu extrahieren und als codierte binäre Bitmasken in die JavaScript-Quelle aufzunehmen. Ich habe dies für die Kollisionserkennung in JavaScript-Spielen getan, aber es macht nicht viel Spaß, da es viel Platz beanspruchen kann und Sie die Daten beim Aktualisieren der Grafiken erneut exportieren müssen.
b. extrahiere die Bilddaten zum Testen mit <canvas> und getImageData . An diesem Punkt sollten Sie auch eine Leinwand für das Rendern verwenden, da Sie bereits IE-Benutzer verloren haben.
Da es sich um ein Kachel-basiertes Spiel handelt, sollten Sie vielleicht einfach anhand einer einfachen Formel bestimmen, mit welcher Kachel der Benutzer gerade interagiert. Verwenden Sie etwas Javascript, um die Koordinaten eines Klicks oder einer anderen Aktion zu bestimmen. Dann mach ein wenig Rechenarbeit, um herauszufinden, auf welcher Kachel du handeln sollst. Macht das Sinn?
Ansonsten stimme ich Bobince zu. Ihr Ansatz wird wahrscheinlich nicht einfach funktionieren.
Tags und Links javascript html isometric transparent tiles