3D-Dungeons im Browser mit CSS und JavaScript

Underground-Dungeon wird in Echtzeit generiert

Mit der Underground-II-Demo, zeigt der Web-Entwickler James Edwards, wie man mit CSS und Javascript Welten bauen kann, die vergleichbar mit 3D-Dungeons aus frühen Amiga- und PC-Zeiten sind.

Anzeige

Golem-Dungeon

Für die Erzeugung der entsprechenden "Polygon"-Flächen behilft sich James Edwards der Border-Eigenschaft in CSS. Mit einem geeigneten und vor allem breiten Wert für die Border-Breite (etwa border-width: 1em 1.5em; border-style: solid; wie im nebenstehnden Beispiel) und verschiedenen Farben für die Ränder (border-color: transparent rgb(74,90,116);) entstehen dabei die notwendigen Formen, die nur noch ausgeschnitten und mit "ein wenig" Mathematik und JavaScript passend in Szene gesetzt werden müssen.

Das Beispiel zeigt anschaulich, welche Möglichkeiten Webentwickler haben, möglicherweise erwartet einen in Zukunft gar ein Nachbau älterer 3D-Rollenspiele wie etwa Eye of the Beholder oder virtuelle Rundgänge auf Homepages.

3D-Dungeon: Underground-II-Demo
3D-Dungeon: Underground-II-Demo

Für einen Nachbau von 3D-Shootern der ersten Tage reicht es jedoch noch nicht, der Browser-Shooter Phosphor ist etwa in Shockwave-3D realisiert um 3D-Welten darzustellen.

In einem kurzen Test funktionierte die 3D-Demo Undergorund II in Opera, Firefox und Safari. Nutzer des Konqueror und des Internet Explorer bleiben außen vor. Die Quellen des immerhin fast 200 KByte großen Beispiels, können von Edwards Seite brothercake.com heruntergeladen werden.


LaZiR 05. Sep 2007

Der Unterschied ist, der Quellcode von Brothercake ist lesbar und gut kommentiert. den...

fk 16. Aug 2006

neeneenee.de/vrml

frägentuh 16. Aug 2006

Schaut mal auf http://www.wolf5k.com/ Da gibts ein Wolfenstein3D-Umsetzung für...

mofo 16. Aug 2006

Es gibt Online ein weiteres interessantes Browsergame, das man kostenlos spielen kann...

IndianaJones 16. Aug 2006

Wer den Schatz nicht findet, hat´s halt nicht verstanden... "Die Suche ist der Schatz...

Kommentieren


Fletcher's weblog / 16. Aug 2006

Firefox, der Dungeon Master

Daniel's Weblog / 16. Aug 2006

3D-Welten in CSS und Javascript - Teil 2



Anzeige

  1. SAP Inhouse Berater (m/w) mit den Schwerpunkten MM und QM
    JOST-Werke GmbH, Neu-Isenburg
  2. Senior Berater Agiles Testen (m/w)
    imbus AG, Hofheim (bei Frankfurt) und Möhrendorf (bei Erlangen)
  3. Javaentwickler (m/w)
    init AG, Karlsruhe
  4. Senior Software Tester / Testspezialist / Testberater / Senior Software Testconsultant (m/w)
    imbus AG, Möhrendorf (bei Erlangen) und München

 

Detailsuche


Folgen Sie uns
       


  1. Bungie

    Destiny und der Gesundheitsbalken

  2. Galaxy A3 und A5

    Samsungs dünne Smartphones im Metallkleid

  3. MSI GT80 Titan

    Erstes Gaming-Notebook mit mechanischer Tastatur

  4. Ministerpräsident

    Viktor Orban zieht Internetsteuer für Ungarn zurück

  5. Spielentwickung

    Engine-Trends jenseits der Grafik

  6. Gesetz über geistiges Eigentum

    Spanien erlässt eine Google-Gebühr

  7. Android-Smartphone

    Huaweis Ascend Mate 7 für 500 Euro zu haben

  8. Crescent Bay

    Oculus Rift und die Sache mit dem T-Rex

  9. Foto-App

    Instagram jetzt auch mit Werbefilmen

  10. Personalie

    Android-Schöpfer Andy Rubin verlässt Google



Haben wir etwas übersehen?

E-Mail an news@golem.de



Moore's Law: Totgesagte schrumpfen länger
Moore's Law
Totgesagte schrumpfen länger

Samsung Galaxy Note 4 im Test: Ausdauerndes Riesen-Smartphone mit Top-Hardware
Samsung Galaxy Note 4 im Test
Ausdauerndes Riesen-Smartphone mit Top-Hardware
  1. Galaxy Note 4 4,5 Millionen verkaufte Geräte in einem Monat
  2. Samsung Galaxy Note 4 wird teurer und kommt früher
  3. Gapgate Spalt im Samsung Galaxy Note 4 ist gewollt

iPad Air 2 im Test: Toll, aber kein Muss
iPad Air 2 im Test
Toll, aber kein Muss
  1. Tablet Apple verdient am iPad Air 2 weniger als am Vorgänger
  2. iFixit iPad Air 2 - wehe, wenn es kaputtgeht
  3. iPad Air 2 Benchmark Apples A8X überrascht mit drei Prozessor-Kernen

    •  / 
    Zum Artikel