• IT-Karriere:
  • 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. Media Cologne GmbH, Hürth
  2. CITTI Handelsgesellschaft mbH & Co. KG, Kiel

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


Anzeige
Spiele-Angebote
  1. (u. a. Far Cry 5 für 14,99€, Far Cry New Dawn für 17,99€, Far Cry für 3,99€)
  2. 11,49€
  3. (-28%) 42,99€
  4. (-40%) 5,99€

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
       


Nubia Z20 - Test

Das Nubia Z20 hat sowohl auf der Vorderseite als auch auf der Rückseite einen Bildschirm. Dadurch ergeben sich neue Möglichkeiten der Benutzung, wie sich Golem.de im Test angeschaut hat.

Nubia Z20 - Test Video aufrufen
Verkehr: Das Kaltstart-Dilemma der Autos mit Hybridantrieb
Verkehr
Das Kaltstart-Dilemma der Autos mit Hybridantrieb

Bei Hybridautos und Plugin-Hybriden kommt es häufiger zu Kaltstarts als bei normalen Verbrennungsmotoren - wenn der Verbrennungsmotor ausgeht und der Elektromotor das Auto durch die Stadt schiebt. Wie schnell lässt sich der Katalysator vorwärmen, damit er Abgase dennoch gut reinigen kann?
Von Rainer Klose

  1. Elektromobilität Umweltbonus gilt auch für Jahreswagen
  2. Renault City K-ZE Dacia plant City-Elektroauto
  3. Elektroautos EU-Kommission billigt höheren Umweltbonus

Wolcen im Test: Düster, lootig, wuchtig!
Wolcen im Test
Düster, lootig, wuchtig!

Irgendwo zwischen Diablo und Grim Dawn: Die dreckige Spielwelt von Wolcen - Lords Of Mayhem ist Schauplatz für ein tolles Hack'n Slay - egal ob offline oder online, alleine oder gemeinsam. Und mit Cryengine.
Ein Test von Marc Sauter

  1. Project Mara Microsoft kündigt Psychoterror-Simulation an
  2. Active Gaming Footwear Puma blamiert sich mit Spielersocken
  3. Simulatoren Nach Feierabend Arbeiten spielen

Leistungsschutzrecht: Drei Wörter sollen ...
Leistungsschutzrecht
Drei Wörter sollen ...

Der Vorschlag der Bundesregierung für das neue Leistungsschutzrecht stößt auf Widerstand bei den Verlegerverbänden. Überschriften mit mehr als drei Wörtern und Vorschaubilder sollen lizenzpfichtig sein. Dabei wenden die Verlage einen sehr auffälligen Argumentationstrick an.
Eine Analyse von Friedhelm Greis

  1. Leistungsschutzrecht Memes sollen nur noch 128 mal 128 Pixel groß sein
  2. Leistungsschutzrecht Französische Verlage reichen Beschwerde gegen Google ein
  3. Leistungsschutzrecht Französische Medien beschweren sich über Google

    •  /