Abo
  • Services:

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. BWI GmbH, deutschlandweit
  2. Robert Bosch GmbH, Salzgitter

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
Hardware-Angebote
  1. bei Alternate bestellen
  2. mit Gutschein: HARDWARE50 (nur für Neukunden, Warenwert 104 - 1.000 Euro)
  3. (Neuware für kurze Zeit zum Sonderpreis bei Mindfactory)

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
       


Fazit zu Shadow of the Tomb Raider

Wir tauchen mit Lara in der Apokalypse ab und verfassen unser Fazit.

Fazit zu Shadow of the Tomb Raider Video aufrufen
Athlon 200GE im Test: Celeron und Pentium abgehängt
Athlon 200GE im Test
Celeron und Pentium abgehängt

Mit dem Athlon 200GE belebt AMD den alten CPU-Markennamen wieder: Der Chip gefällt durch seine Zen-Kerne und die integrierte Vega-Grafikeinheit, die Intel-Konkurrenz hat dem derzeit preislich wenig entgegenzusetzen.
Ein Test von Marc Sauter

  1. AMD Threadripper erhalten dynamischen NUMA-Modus
  2. HP Elitedesk 705 Workstation Edition Minitower mit AMD-CPU startet bei 680 Euro
  3. Ryzen 5 2600H und Ryzen 7 2800H 45-Watt-CPUs mit Vega-Grafik für Laptops sind da

Lichtverschmutzung: Was Philips Hue mit der Tierwelt im Garten macht
Lichtverschmutzung
Was Philips Hue mit der Tierwelt im Garten macht

LEDs für den Garten sind energiesparend und praktisch - für Menschen und manche Fledermäuse. Für viele Tiere haben sie jedoch fatale Auswirkungen. Aber mit einigen Änderungen lässt sich die Gartenbeleuchtung so gestalten, dass sich auch Tiere wohlfühlen.
Ein Bericht von Werner Pluta

  1. Play und Signe Neue farbige Philips-Hue-Leuchten für indirektes Licht
  2. Smart Home Weitere Hue-Leuchten fürs Badezimmer vorgestellt
  3. Badezimmerspiegel Philips Hue kommt ins Bad

Shine 3: Neuer Tolino-Reader bringt mehr Lesekomfort
Shine 3
Neuer Tolino-Reader bringt mehr Lesekomfort

Die Tolino-Allianz bringt das Nachfolgemodell des Shine 2 HD auf den Markt. Das Shine 3 erhält mehr Ausstattungsdetails aus der E-Book-Reader-Oberklasse. Vor allem beim Lesen macht sich das positiv bemerkbar.
Ein Hands on von Ingo Pakalski

  1. E-Book-Reader Update macht Tolino-Geräte unbrauchbar

    •  /