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. Analog Test / Product Engineer (m/w)
    TEXAS INSTRUMENTS Deutschland GmbH, Freising near Munich
  2. DSP Software Expert (m/w)
    Visteon Electronics Germany GmbH, Karlsruhe
  3. Mitarbeiter (m/w) VMware / Windows-Support
    SHD Technologie und Service GmbH & Co. KG, Andernach
  4. Teamleiter IT (m/w)
    über Baumann Unternehmensberatung AG, Schwandorf

 

Detailsuche


Folgen Sie uns
       


  1. Panasonic Lumix DMC-LX100 im Test

    Kamera zum Begeistern und zum Verzweifeln

  2. Kanzlerhandy

    Bundesanwaltschaft will NSA-Ermittlungsverfahren einstellen

  3. Internetsuche

    EU-Parlamentarier erwägen Google-Aufspaltung

  4. 15 Jahre Unreal Tournament

    Spiel, Bot und Sieg

  5. Inmarsat und Alcatel Lucent

    Internetzugang im Flugzeug mit 75 MBit/s

  6. Managed Apps

    Unternehmen können App-Store von Windows 10 anpassen

  7. Elektronikdiscounter

    Wie Preisvergleichsdienste ausgehebelt werden

  8. Open Data

    Cern befreit LHC-Kollisionsdaten

  9. Multimediabibliothek

    FFmpeg dank Debian wieder in Ubuntu

  10. Valve Software

    Neue Richtlinien für Early Access



Haben wir etwas übersehen?

E-Mail an news@golem.de



Yoga 3 Pro Convertible im Test: Flach, leicht, hochauflösend, kurzatmig
Yoga 3 Pro Convertible im Test
Flach, leicht, hochauflösend, kurzatmig
  1. Benchmark Apple und Nvidia schlagen manchmal Intels Core M
  2. Weniger Consumer-Notebooks Toshiba baut 900 Arbeitsplätze in der PC-Sparte ab
  3. Asus Zenbook UX305 Das flachste Ultrabook mit QHD-Display

IMHO zum Jugendmedienschutz: Altersschranke nützt nicht Kindern, sondern Erotikseiten
IMHO zum Jugendmedienschutz
Altersschranke nützt nicht Kindern, sondern Erotikseiten
  1. Pornofilter Internet Provider gegen britische Zensurkultur
  2. Internetzensur Tor und die große chinesische Firewall
  3. Kein britisches Modell Medienrat will Pornofilter ohne Voraktivierung

Lichtfeldkamera Lytro Illum: Das Spiel mit der Tiefenschärfe
Lichtfeldkamera Lytro Illum
Das Spiel mit der Tiefenschärfe
  1. Lichtfeldkamera Lytro will in neue Märkte einsteigen
  2. Augmented Reality Google investiert 542 Millionen US-Dollar in Magic Leap
  3. Lytro Lichtfeldfotografie bildet die Tiefe der Welt ab

    •  / 
    Zum Artikel