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. Junior Systemingenieur/in oder Techniker/in für die Weiterentwicklung vernetzter Infotainmentfunktionen
    ESG Elektroniksystem- und Logistik-GmbH, Ingolstadt
  2. Software Developer (m/w)
    transact Elektronische Zahlungssysteme GmbH - epay, Martinsried bei München
  3. Softwareentwickler für modellbasierte Entwicklung und Embedded Systeme (m/w)
    MBtech Group GmbH & Co. KGaA, Mannheim, Sindelfingen bei Stuttgart, Ulm/Neu-Ulm, Rüsselsheim (Home-Office möglich)
  4. Abteilungsleiter (m/w) Manufacturing Execution Systems (MES)
    MVI PROPLANT Nord GmbH, Wolfsburg

 

Detailsuche


Hardware-Angebote
  1. PCGH-Professional-PC GTX970-Edition
    (Core i7-4790K + Geforce GTX 970)
  2. PCGH-Supreme-PC GTX980-Edition
    (Core i7-4790K + Geforce GTX 980)
  3. Crucial MX100 256GB zum Bestpreis bei Redcoon
    95,50€

 

Weitere Angebote


Folgen Sie uns
       


  1. Project Tango

    Googles 3D-Sensor-Konzept verlässt Experimentierstatus

  2. Messenger

    Telefoniefunktion für Whatsapp erreicht erste Nutzer

  3. iTunes Connect

    Hallo, fremdes Benutzerkonto

  4. Sprachassistent

    Google Now bindet externe Apps ein

  5. Kartensoftware

    Google Earth Pro jetzt kostenlos

  6. Versicherung

    Feuer, Wasser, Cybercrime

  7. Die Woche im Video

    Autonome Autos, Spionageprogramme und Werbelügen

  8. Spionagesoftware

    NSA-Programm Regin zwei Jahre im Kanzleramt aktiv

  9. Biofabrikation

    Forscher wollen Gewebe aus Spinnenseide drucken

  10. Ultrabook-Prozessor

    Intels Skylake ersetzt Broadwell bereits im Frühsommer



Haben wir etwas übersehen?

E-Mail an news@golem.de



HDR und Dolby Vision: Die vorläufige Rückkehr der dicken Fernseher
HDR und Dolby Vision
Die vorläufige Rückkehr der dicken Fernseher
  1. Super Hi-Vision NHK will 13-Zoll-OLED mit 8K-Auflösung zeigen
  2. Catopsys Immersis Das halbe Wohnzimmer als Leinwand für Spiele
  3. CoreStation Teufels teurer HDMI-Receiver passt hinter den Fernseher

Testplattform für Grafikkarten: Des Golems Zauberwürfel
Testplattform für Grafikkarten
Des Golems Zauberwürfel
  1. Maxwell-Grafikkarte Nvidia korrigiert die Spezifikationen der Geforce GTX 970
  2. Geforce GTX 960 Nvidias neue Grafikkarte ist eine halbe GTX 980
  3. Bis 4 GHz Takt Samsung verdoppelt Grafikspeicher-Kapazität

Grim Fandango im Test: Neues Leben für untotes Abenteuer
Grim Fandango im Test
Neues Leben für untotes Abenteuer
  1. Vorschau 2015 Von Hexern, Fledermausmännern und VR-Brillen
  2. Spielejahr 2014 Gronkh, GTA 5 und #Gamergate
  3. Day of the Tentacle (1993) Zurück in die Zukunft, Vergangenheit und Gegenwart

    •  / 
    Zum Artikel