Abo
  • IT-Karriere:

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. Weleda AG, Schwäbisch Gmünd
  2. STRABAG BRVZ GMBH & CO.KG, Stuttgart

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.



Anzeige
Top-Angebote
  1. (u. a. Apple iPhone 6s Plus 32 GB für 299€ und 128 GB für 449€ - Bestpreise!)
  2. (u. a. Nikon D5600 Kit 18-55 mm + Tasche + 16 GB für 444€ statt 525€ ohne Tasche und...
  3. (heute u. a. iRobot Roomba 960 für 399€ statt ca. 460€ im Vergleich)
  4. 399€ + Versand oder kostenlose Marktabholung (Vergleichspreis ab 443€)

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
       


Doom Eternal angespielt

Slayer im Kampf gegen die Höllendämonen: Doom Eternal soll noch in diesem Jahr erscheinen.

Doom Eternal angespielt Video aufrufen
SEO: Der Google-Algorithmus benachteiligt Frauen
SEO
Der Google-Algorithmus benachteiligt Frauen

Websites von Frauen werden auf Google schlechter gerankt als die von Männern - und die deutsche Sprache ist schuld. Was lässt sich dagegen tun?
Von Kathi Grelck

  1. Google LED von Nest-Kameras lässt sich nicht mehr ausschalten
  2. FIDO Google führt Logins ohne Passwort ein
  3. Nachhaltigkeit 2022 sollen Google-Geräte Recycling-Kunststoff enthalten

Ryzen 5 3400G und Ryzen 3 3200G im Test: Picasso passt
Ryzen 5 3400G und Ryzen 3 3200G im Test
Picasso passt

Vier Zen-CPU-Kerne plus integrierte Vega-Grafikeinheit: Der Ryzen 5 3400G und der Ryzen 3 3200G sind zwar im Prinzip nur höher getaktete Chips, in ihrem Segment aber weiterhin konkurrenzlos. Das schnellere Modell hat jedoch trotz verlötetem Extra für Übertakter ein Preisproblem.
Ein Test von Marc Sauter

  1. Agesa 1003abb Viele ältere Platinen erhalten aktuelles UEFI für Ryzen 3000
  2. Ryzen 3000 Agesa 1003abb behebt RDRAND- und PCIe-Gen4-Bug
  3. Ryzen 5 3600(X) im Test Sechser-Pasch von AMD

Nachhaltigkeit: Jute im Plastik
Nachhaltigkeit
Jute im Plastik

Baustoff- und Autohersteller nutzen sie zunehmend, doch etabliert sind Verbundwerkstoffe mit Naturfasern noch lange nicht. Dabei gibt es gute Gründe, sie einzusetzen, Umweltschutz ist nur einer von vielen.
Ein Bericht von Werner Pluta

  1. Autos Elektro, Brennstoffzelle oder Diesel?
  2. Energie Wo die Wasserstoffqualität getestet wird
  3. Energiespeicher Heiße Steine sind effizienter als Brennstoffzellen

    •  /