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. Bereichsleiter (m/w) Entwicklung Personalsoftware
    AKDB, München
  2. Mathematisch-Technische Assistenz 3D-Messtechnik für die Verkehrstechnik
    VITRONIC GmbH, Wiesbaden
  3. Softwareentwickler / Softwareentwicklerin Java Produktkonfigurator
    CAS Software AG, Karlsruhe
  4. Senior Softwareentwickler C# / .NET (m/w)
    PLSCOM GmbH, Berlin

 

Detailsuche


Folgen Sie uns
       


  1. Sony

    Smartwatch mit Armband aus E-Paper geplant

  2. Samsung SDC

    Displays werden bunter, biegsamer und fast durchsichtig

  3. Mozilla

    Ein-Klick-Suche im Firefox

  4. EU-Richtlinien beschlossen

    Recht auf Vergessen soll weltweit gelten

  5. Rekord

    Apple kommt Börsenwert von einer Billion US-Dollar näher

  6. Systemd und Launchd

    FreeBSD-Gründer sieht Notwendigkeit für modernes Init-System

  7. Internet und Energie

    EU will 315 Milliarden Euro für Netze mobilisieren

  8. Mobile Bürosuite

    Dropbox mit Microsoft-Office-Anschluss

  9. High Bandwith Memory

    SK Hynix liefert schnelleren Grafikkartenspeicher aus

  10. Streaming

    Wuaki lockt mit 4K-Filmen für Smart-TVs



Haben wir etwas übersehen?

E-Mail an news@golem.de



Core M-5Y70 im Test: Vom Turbo zur Vollbremsung
Core M-5Y70 im Test
Vom Turbo zur Vollbremsung
  1. Benchmark Apple und Nvidia schlagen manchmal Intels Core M
  2. Prozessor Schnellster Core M erreicht bis zu 2,9 GHz
  3. Die-Analyse Intels Core M besteht aus 13 Schichten

Intel Edison ausprobiert: Ich seh dich - das Mona-Lisa-Projekt
Intel Edison ausprobiert
Ich seh dich - das Mona-Lisa-Projekt
  1. Intel Edison Kleinrechner mit Arduino-ähnlichem Board als Breakout

Android 5.0: Lollipop läuft schneller ohne Dalvik und länger mit Volta
Android 5.0
Lollipop läuft schneller ohne Dalvik und länger mit Volta
  1. Android 5.0 Root für Lollipop ohne neuen Kernel
  2. Lollipop Android 5.0 für deutsche Nexus-Geräte ist da
  3. SE Android In Lollipop wird das Rooten schwer

    •  / 
    Zum Artikel