Isometrisches HTML/JS/CSS-Raster mit halbtransparenten Click-through-Kacheln

Question

Ich versuche, eine Web-App/ein Web-Spiel zu erstellen, das eine isometrische Seitenansicht und transparente Kacheln verwendet.Ich kann sie gut (aber nicht großartig) anzeigen, indem ich eine PHP-Formel verwende, die einfach jedes Div (jede Kachel) als position:absolute festlegt und die oberen und linken Parameter festlegt.Das Problem besteht darin, wie ich Klicks auf eine Kachel abfänge und Kacheln mit transparenten Teilen zu der darunter liegenden Kachel durchklicken lasse.

Ein Beispiel für mein Problem ist unter http://stuff.adammw.homeip.net/other/fv/farmville_2.html

Answer 1

Bei den Fliesenelementen selbst ist dies nicht möglich, da diese immer rechteckig sind.Sie müssen die Mausposition innerhalb eines übergeordneten Elements überwachen, das alle Kacheln enthält, und manuell ermitteln, welche Pixel welchen Kacheln entsprechen.

Für eine isometrische Zuordnung der Position zur Kachel wäre dies einfach, aber das würde bedeuten, dass die Punktposition als ein Ort „auf dem Boden“ betrachtet wird;Es würde Ihnen nicht erlauben, die Maskendaten des Bildes zu verwenden, um Objekte wie die Bäume, die vor dem Boden gerendert werden, einem Treffertest zu unterziehen.(Willst du das überhaupt machen?Derzeit verdecken einige Bäume die darunter liegende Bodenplatte völlig.)

Wenn Sie wirklich einen Test mit Bildmasken durchführen müssen, können Sie:

A.Schreiben Sie ein Skript, um die Maskendaten aus dem Bild zu extrahieren und sie als codierte binäre Bitmasken in die JavaScript-Quelle einzubinden.Ich habe dies zur Kollisionserkennung in JavaScript-Spielen gemacht, aber es macht nicht viel Spaß, da es viel Platz beanspruchen kann und man die Daten erneut exportieren muss, wenn man die Grafiken aktualisiert.

B.Extrahieren Sie die Bilddaten zum Testen mit a <canvas> Und getImageData.An diesem Punkt könnten Sie darüber nachdenken, auch eine Leinwand zum Rendern zu verwenden, da Sie bereits IE-Benutzer verloren haben.

Answer 2

Sie müssen css3 Transformationen verwenden, oder die Matrix in IE verwandeln.

Die Syntax sieht wie folgt aus:

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

Ein paar gute Beispiele:

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

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

Answer 3

Da dies eine Fliese basiertes Spiel, vielleicht sollten Sie einfach feststellen, welche Fliese der Benutzer mit interagiert durch eine einfache Formel. Verwenden Sie einige Javascript, um die Koordinaten eines Klicks oder andere Maßnahmen zu bestimmen. dann haben einige Arithmetik was Kachel, um herauszufinden, zu handeln. Ist das sinnvoll?

Ansonsten stimme ich bobince. Sie sind Ansatz wahrscheinlich nicht leicht arbeiten.