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. Softwareentwickler (m/w)
    ZF Friedrichshafen AG, Passau
  2. Wissenschaftliche Mitarbeiterin / Wissenschaftlicher Mitarbeiter am Lehrstuhl für Wirtschaftsinformatik
    Universität Passau, Passau
  3. Technischer Leiter (m/w)
    wenglor sensoric gmbh, Tettnang
  4. IT-Techniker (m/w)
    Dänisches Bettenlager GmbH & Co. KG, Handewitt (bei Flensburg)

 

Detailsuche


Folgen Sie uns
       


  1. Air Food One

    Post liefert online bestelltes Lufthansa-Essen nach Hause

  2. Threshold

    Microsoft China scherzt über Startmenü in Windows 9

  3. Lieferdrohnen

    Nasa entwickelt Leitsystem für Flugroboter

  4. Radeon R9 285

    Die schnellste Grafikkarte mit nur zwei 6-Pol-Anschlüssen

  5. Bitcoin

    Charles Shrem will sich schuldig bekennen

  6. Mozilla

    Firefox 32 verbessert Werkzeuge und Leistung

  7. Shiro Games

    Evoland 2 soll Hommage an Rollenspiel-Genre werden

  8. Gegen Vectoring

    Tele Columbus erhöht auf 150 MBit/s

  9. Libdrm

    Mesa bekommt erste Android-Unterstützung

  10. Die Sims 4

    Erster Patch macht Zäune zu Zäunen



Haben wir etwas übersehen?

E-Mail an news@golem.de



Kinkobox angeschaut: E-Mail-Verschlüsselung leicht gemacht
Kinkobox angeschaut
E-Mail-Verschlüsselung leicht gemacht
  1. IT-Sicherheitsgesetz Telekomfirmen müssen Nutzer über Cyberangriffe informieren
  2. IT-Sicherheitsgesetz Unternehmen dürfen ungefährliche Angriffe anonym melden
  3. Cryptophone Telekom mit Ende-zu-Ende-Verschlüsselung für Smartphones

Neues Instrument Holometer: Ist unser Universum zweidimensional?
Neues Instrument Holometer
Ist unser Universum zweidimensional?
  1. Gehirnforschung Licht programmiert Gedächtnis um
  2. Audio aus Video Gefilmte Topfpflanze verrät Gespräche
  3. Nahrungsmittel Trinken statt Essen

Alienware Alpha ausprobiert: Fast lautlose Steam-Machine mit eigenem Windows-UI
Alienware Alpha ausprobiert
Fast lautlose Steam-Machine mit eigenem Windows-UI
  1. Deutschland E-Sport ist mehr als eine Randerscheinung
  2. Crytek Ryse für PC mit 4K-Videos belegt über 120 GByte
  3. Wirtschaftssimulation Golem Labs entwickelt die Gilde 3

    •  / 
    Zum Artikel