a amazing maze

[Licht]

Hallo,

vermutlich kennen einige das "3D"-Maze z.B. aus Programmier-Büchern:
http://www.brothercake.com/games/underground/underground.html

Ich habe das ganze mal in HTML5, CSS und JS neu programmiert:
http://www.alexander-meissner.de/projects/mob/index.html

Bis jetzt funktioniert es leider nur auf Safari 5 oder höher (Chrome unterstützt es nur teilweise). Für die, die kein WebKit haben gibt es auch Bildschirmfotos. Es ist noch nicht fertig, aber um zu zeigen, was mit HTML5 alles möglich ist (auch ohne Canvas, WegGL, Flash oder andere Plugins) reicht es alle male. Das Spiel müsst ihr euch ein wenig wie Pacman vorstellen nur halt aus der Ego-Perspektive.

Ausschnitte aus dem CSS-Quellcode:

  
-webkit-transform-style: preserve-3d;  
-webkit-perspective: 750;  
-webkit-transition: all 1s ease-in-out;  
-webkit-backface-visibility: hidden;  
-webkit-transform: translate3d(250px, -100px, -500px) rotateY(90deg);  

Wie findet Ihr es?

Mfg Licht

[suit]

Wie findet Ihr es?

Es funktioniert in Opera und Firefox nicht - mit CSS hat das nicht viel zu tun, wenn du auf proprietäre Webkit-Eigenschaften setzt ;)

In Webkit-Browsern selbst (Safari und Chrome, beides probiert) funktionierts aber ebenfalls nur sehr dürftig - es ist nicht spielbar.

Auf den Screenshots siehts ok aus, aber im Browser ist es nicht Spielbar.

btw: es heist "an amazing maze" :p

[Licht]

Hallo

btw: es heist "an amazing maze" :p

Ups, ja hast recht.

In Webkit-Browsern selbst (Safari und Chrome, beides probiert) funktionierts aber ebenfalls nur sehr dürftig - es ist nicht spielbar.

Hängt von deiner CPU ab... bei mir läuft es komplett flüssig

Es funktioniert in Opera und Firefox nicht - mit CSS hat das nicht viel zu tun, wenn du auf proprietäre Webkit-Eigenschaften setzt ;)

Stimmt nicht ganz: Momentan ist es auf WebKit möglich klar, habe aber letztens erst letztens bei W3C gelesen, dass in CSS3 "aufgenommen" werden soll. Außerdem sind Opera und Firefox auch schon dabei, dort wird nur noch nicht die Perspektive unterstützt. Man kann also schon von CSS reden (insofern, wir IE auslassen weil man dort eh nicht erwarten kann, dass die das jemals unterstützen werden. Ansonsten wäre das eine große Überraschung)

Mfg Licht

[suit]

In Webkit-Browsern selbst (Safari und Chrome, beides probiert) funktionierts aber ebenfalls nur sehr dürftig - es ist nicht spielbar.
Hängt von deiner CPU ab... bei mir läuft es komplett flüssig

Wie wäre es mit einem QX6850? :p

Mit nicht spielbar meinte ich eher es gibt Darstellungsfehler ohne Ende.

Außerdem sind Opera und Firefox auch schon dabei, dort wird nur noch nicht die Perspektive unterstützt.

Jein, im Falle von Opera lässt sich das seit längerem mit skew erreichen http://www.opera.com/docs/specs/presto27/css/transforms/ - das ist aus SVG entliehen und lässt sich ohne Probleme von den perspective-Eigenschaften übertragen.

[Licht]

Mit nicht spielbar meinte ich eher es gibt Darstellungsfehler ohne Ende.

Welche Safari-Version benutzt Du?
Ich 5.0.2 und es gibt bei mir keine Darstellungsfehler.

Skew heißt Scherung und durch Scherung kann man aus einem Quadrat höchstens ein Parallelogramm oder eine Raue erzeugen, aber kein Trapez also auch keine Perspektive. Wie soll das denn bitte schön funktionieren?

Mfg Licht