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. IT Projektmanager (m/w)
    Dürr IT Service GmbH, Bietigheim-Bissingen
  2. IT-Architekt (m/w)
    Vanderlande Industries GmbH, Dortmund
  3. Elektronik Ingenieur FPGA Design (m/w)
    NDT Global GmbH & Co. KG, Stutensee
  4. Bioinformatiker / Informatiker (m/w) molekulargenetische Diagnostik
    BIOSCIENTIA Institut für Medizinische Diagnostik GmbH, Ingelheim am Rhein

 

Detailsuche


Folgen Sie uns
       


  1. iPhone und iPad

    Apple fordert 64-Bit-Unterstützung für alle iOS-Apps

  2. Microsoft

    Neue Fensteranimationen für Windows 10

  3. Oneplus

    One-Smartphone nur eine Stunde lang vorbestellbar

  4. Visio.M

    Kleines Elektroauto mit 160 Kilometern Reichweite

  5. Handelsabkommen TPP

    USA wollen Urheberrechtsgesetze verschärfen

  6. Internetspionage

    China fängt angeblich iCloud-Passwörter ab

  7. Chugplug

    Zusatzakku klemmt sich ins Apple-Netzteil

  8. Quartalsbericht

    Apples iPad-Absatz geht erneut zurück

  9. Apple

    Das ist neu in iOS 8.1

  10. Same Day Delivery

    Ebay-Zustellung am selben Tag startet in Berlin



Haben wir etwas übersehen?

E-Mail an news@golem.de



Sony Alpha 7S im Test: Vollformater sieht auch bei Dunkelheit nicht schwarz
Sony Alpha 7S im Test
Vollformater sieht auch bei Dunkelheit nicht schwarz
  1. FPS 1000 Kamera soll 18.500 Frames pro Sekunde aufnehmen
  2. Bericht Sony will 4K-Superzoom-Kamera entwickeln
  3. Minikamera Ai-Ball Die WLAN-Kamera aus dem Überraschungsei

Google: Nexus 9 als erstes Tablet mit 64-Bit-Tegra von Nvidia
Google
Nexus 9 als erstes Tablet mit 64-Bit-Tegra von Nvidia
  1. Android L Das L steht für Lollipop
  2. Volantis Nexus 9 bekommt FCC-Zertifizierung

Legale Streaming-Anbieter im Test: Netflix allein macht auch nicht glücklich
Legale Streaming-Anbieter im Test
Netflix allein macht auch nicht glücklich
  1. Netflix-Statistik Die Schweiz streamt am schnellsten
  2. Deutsche Telekom Entertain ab dem 14. Oktober mit Netflix
  3. HTML5-Videostreaming Netflix bietet volle Linux-Unterstützung

    •  / 
    Zum Artikel