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. Testmanager (m/w)
    MBtech Group GmbH & Co. KGaA, Ingolstadt, Regensburg bei Neutraubling
  2. Webdesigner (m/w)
    SCREWFIX DIRECT LIMITED, Offenbach am Main
  3. Consultant / Projektmanager (m/w) Software Lizenzmanagement
    Aspera GmbH, Aachen (teilweise Home-Office)
  4. Informatiker / Softwareentwickler (m/w) Schwerpunkt Microsoft .NET
    IT-Choice Software AG, Karlsruhe

 

Detailsuche


Hardware-Angebote
  1. NEU: PCGH-Professional-PC GTX970-Edition
    (Core i7-4790K + Geforce GTX 970)
  2. Angebote der Woche bei Notebooksbilliger
    (u. a. Samsung Galaxy Tab 4 für 239,90€, Bosch IXO IV für 39,90€)
  3. PCGH-Supreme-PC GTX980-Edition
    (Core i7-4790K + Geforce GTX 980)

 

Weitere Angebote


Folgen Sie uns
       


  1. Tarifstreit

    Amazon-Streiks werden bis Samstag fortgesetzt

  2. Leistungsschutzrecht

    Oettinger hält nationale Gesetze für nicht durchsetzbar

  3. Micromax Yureka

    Zweites Cyanogenmod-Smartphone vorgestellt

  4. Guardians of Peace

    Nordkorea soll den Sony-Hack befohlen haben

  5. Urteil

    Finger weg vom Handy beim Autofahren

  6. BSI-Sicherheitsbericht

    Hacker beschädigen Hochofen in deutschem Stahlwerk

  7. Innenminister de Maizière

    Jeder kleine Webshop muss sicher sein

  8. Smartwatch

    Pebble unterstützt Android Wear

  9. Sony-Leaks

    MPAA lobbyiert weiter für DNS-Sperren

  10. South Park S18

    Eine sehenswerte Staffel voller IT-Kritik



Haben wir etwas übersehen?

E-Mail an news@golem.de



E-Mail-Ausfall in München: Und wieder wars nicht Limux
E-Mail-Ausfall in München
Und wieder wars nicht Limux
  1. Öffentliche Verwaltung Massiver E-Mail-Ausfall bei der Stadt München
  2. Limux Kopf einziehen und über Verschwörung tuscheln
  3. Limux Windows-Rückkehr würde München Millionen kosten

Games-Verfilmungen: Videospiele erobern Hollywood
Games-Verfilmungen
Videospiele erobern Hollywood
  1. Adr1ft Mit Oculus Rift und UE4 ins All
  2. The Game Awards 2014 Dragon Age ist bestes Spiel, Miyamoto zeigt neues Zelda
  3. Space Engineers Minecraft im Weltraum

Nexus 6 gegen Moto X: Das Nexus ist tot
Nexus 6 gegen Moto X
Das Nexus ist tot
  1. Teardown Nexus 6 kommt mit wenig Kleber aus
  2. Google Nexus 6 kommt doch erst viel später
  3. Google Nexus 6 erscheint nächste Woche - doch nicht

    •  / 
    Zum Artikel