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.

Artikel veröffentlicht am ,

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.

Stellenmarkt
  1. Systementwickler/in (m/w/d) - Fahrzeug- und Systemfunktionen
    Volkswagen AG, Wolfsburg
  2. Requirements Engineer (w/m/d) Softwareentwicklung
    SSI SCHÄFER IT Solutions GmbH, Dortmund
Detailsuche

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.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed


Aktuell auf der Startseite von Golem.de
Der Nachfolger von Windows 10
Windows 11 ist da

Nun ist es offiziell: Microsoft kündigt das neue Windows 11 an. Vieles war bereits vorher bekannt, einiges Neues gibt es aber trotzdem.

Der Nachfolger von Windows 10: Windows 11 ist da
Artikel
  1. EE: Britische Netzbetreiber führen wieder Roaming ein
    EE
    Britische Netzbetreiber führen wieder Roaming ein

    Für britische Mobilfunk-Nutzer ist die Zeit des freien Telefonierens in der EU bald vorbei. EE und zuvor O2 und Three haben Einschränkungen angekündigt.

  2. Krypto-Betrug in Milliardenhöhe: Gründer von Africrypt stehlen 69.000 Bitcoin
    Krypto-Betrug in Milliardenhöhe
    Gründer von Africrypt stehlen 69.000 Bitcoin

    Die Gründer der Kryptoplattform Africrypt haben sich offenbar mit 69.000 gestohlenen Bitcoin abgesetzt. Der Betrug deutete sich schon vor Monaten an.

  3. Interview: Avatar und die global beleuchteten Mikrodetails von Pandora
    Interview
    Avatar und die global beleuchteten Mikrodetails von Pandora

    Waldplanet statt The Division: Golem.de hat mit dem Technik-Team von Avatar - Frontiers of Pandora über die Snowdrop-Engine gesprochen.
    Ein Interview von Peter Steinlechner

LaZiR 05. Sep 2007

Der Unterschied ist, der Quellcode von Brothercake ist lesbar und gut kommentiert. den...

fk 16. Aug 2006

neeneenee.de/vrml

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...

meder 15. Aug 2006

was mich immmer an den von dir aufgezählten Lösungen stört, ist, dass man ein Plug-In...


Folgen Sie uns
       


Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Schnäppchen • Mega-Wiedereröffnung bei MediaMarkt - bis zu 30 Prozent Rabatt • Samsung SSD 980 Pro PCIe 4.0 1TB 166,59€ • Gigabyte M27Q 27" WQHD 170Hz 338,39€ • AMD Ryzen 5 5600X 251,59€ • Dualsense Midnight Black + R&C Rift Apart 99,99€ • Logitech Lenkrad-Sets zu Bestpreisen [Werbung]
    •  /