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. IT Projektleitung (w/m/d) Informationssicherheit
    Hessische Zentrale für Datenverarbeitung, Wiesbaden
  2. Mitarbeiter Qualitätssicherung Softwareentwicklung Sozialwesen (m/w/d)
    Anstalt für Kommunale Datenverarbeitung in Bayern (AKDB), München
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


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



Aktuell auf der Startseite von Golem.de
Unix-Nachfolger
Plan 9 sollte bessere Audio-Kompression bekommen als MP3

Die Entwicklung der Audio-Kompression und die schwierige MP3-Patentsituation hätte ohne das Nein eines Anwalts wohl anders ausgesehen.

Unix-Nachfolger: Plan 9 sollte bessere Audio-Kompression bekommen als MP3
Artikel
  1. Vision, Disruption, Transformation: Populäre Denkfehler in der Digitalisierung
    Vision, Disruption, Transformation
    Populäre Denkfehler in der Digitalisierung

    Der Essay Träge Transformation hinterfragt Schlagwörter des IT-Managements und räumt mit gängigen Vorstellungen auf. Die Lektüre ist aufschlussreich und sogar lustig.
    Eine Rezension von Ulrich Hottelet

  2. Mireo Plus H: Brandenburgischer Verkehrsbetrieb kauft Brennstoffzellenzüge
    Mireo Plus H
    Brandenburgischer Verkehrsbetrieb kauft Brennstoffzellenzüge

    Siemens liefert sieben mit Wasserstoff betriebene Züge an den Verkehrsbetrieb NEB. Sie sollen ab Ende 2024 im Einsatz sein.

  3. Pro Electric SuperVan: Ford zeigt Elektro-Van mit 1.490 kW
    Pro Electric SuperVan
    Ford zeigt Elektro-Van mit 1.490 kW

    Ford hat auf dem Goodwood Festival of Speed den Ford Pro Electric SuperVan gezeigt, der die Tradition der Transit-Showcars des Unternehmens fortsetzt.

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
    Daily Deals • Prime Video: Filme leihen 0,99€ • Alternate: Gehäuse & Co. von Fractal Design • Nur noch heute: 16.000 Artikel günstiger bei MediaMarkt • MindStar (Samsung 970 EVO Plus 250GB 39€) • Hori RWA 87,39€ • Honor X7 128GB 150,42€ • Phanteks Eclipse P200A + Glacier One 280 157,89€ [Werbung]
    •  /