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 ASP.NET (m/w)
    MWG-Biotech AG, Ebersberg (Großraum München)
  2. Akademischer Mitarbeiter (m/w)
    Hochschule Furtwangen, Furtwangen
  3. IT-Trainee (m/w)
    Allianz Deutschland AG, Stuttgart
  4. Software Entwickler (TTS) (m/w)
    Continental AG, Villingen-Schwenningen

 

Detailsuche


Folgen Sie uns
       


  1. Arin

    IPv4-Adressen in Nordamerika nähern sich dem Ende

  2. Flappy 48

    Zahlen statt Vögel

  3. Port 32764

    Netgear will angebliche Router-Lücke schließen

  4. Darknet

    Grams - eine Suchmaschine für Drogen

  5. Kitkat-Smartphone

    Samsungs Galaxy Ace Style kommt früher

  6. Netmundial-Konferenz

    Netzaktivisten frustriert über "Farce" der Internetkontrolle

  7. Zalando

    Onlinekleiderhändler schließt einen Standort

  8. Apple vs. Samsung

    Google versprach Samsung Hilfe im Patentstreit mit Apple

  9. Deadcore

    Indiegames-Turmbesteigung für PC, Mac und Linux

  10. Reprap

    "Waschmaschinen werden auch nur 5% der Lebenszeit verwendet"



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Techniktagebuch auf Tumblr: "Das Scheitern ist viel interessanter"
Techniktagebuch auf Tumblr
"Das Scheitern ist viel interessanter"

Im Techniktagebuch schreiben zwei Dutzend Autoren über den Alltag mit Computern, Handys und anderen Geräten. Im Gespräch mit Golem.de erläutert die Initiatorin Kathrin Passig, warum nicht jeder Artikel eine Pointe und nicht jeder Autor ein hohe Technikkompetenz haben muss.


Radeon R9 295X2 im Test: AMDs Wassermonster für 1.000-Watt-Netzteile
Radeon R9 295X2 im Test
AMDs Wassermonster für 1.000-Watt-Netzteile

Hybridkühlung, 50 Ampere auf der 12-Volt-Schiene - AMDs neue Dual-GPU-Grafikkarte ist ein kompromissloses Monster. In gut ausgestatteten High-End-PCs läuft sie dennoch problemlos und recht leise, und das so schnell, dass auch 4K-Auflösung mit allen Details spielbar wird.

  1. Grafiktreiber von AMD Catalyst 14.4 nicht nur für 295X2 öffentlich verfügbar
  2. Globalfoundries-Kooperation mit Samsung AMDs Konsolengeschäft kompensiert schwache CPU-Sparte
  3. Nvidia Maxwell Geforce GTX 750 und GTX 750 Ti im Februar

Owncloud: Dropbox-Alternative fürs Heimnetzwerk
Owncloud
Dropbox-Alternative fürs Heimnetzwerk

Kaputte Zertifikate durch Heartbleed und der NSA-Skandal: Es gibt genügend Gründe, seinen eigenen Cloud-Speicher einzurichten. Wir erklären mit Owncloud auf einem Raspberry Pi, wie das funktioniert.


    •  / 
    Zum Artikel