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. Bundeskriminalamt, Wiesbaden
  2. GSI Helmholtzzentrum für Schwerionenforschung GmbH, Darmstadt

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
Blu-ray-Angebote
  1. (2 Monate Sky Ticket für nur 4,99€)
  2. (nur für Prime-Mitglieder)

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
       


Sonos Beam im Hands on

Beam ist Sonos' erste smarte Soundbar und läuft mit Amazons Alexa. Im Zusammenspiel mit einem Fire-TV-Gerät kann dieses bequem mit Beam mit der Stimme bedient werden. Die Beam-Soundbar von Sonos kostet 450 Euro und soll am 17. Juli 2018 erscheinen.

Sonos Beam im Hands on Video aufrufen
Elektromobilität: Regierung bremst bei Anspruch auf private Ladesäulen
Elektromobilität
Regierung bremst bei Anspruch auf private Ladesäulen

Die Anschaffung eines Elektroautos scheitert häufig an der fehlenden Lademöglichkeit am heimischen Parkplatz. Doch die Bundesregierung will vorerst keinen eigenen Gesetzesentwurf für einen Anspruch von Wohnungseigentümern und Mietern vorlegen.
Ein Bericht von Friedhelm Greis

  1. ID Buzz und Crozz Volkswagen will Elektroautos in den USA bauen
  2. PFO Pininfarina plant Elektrosupersportwagen mit 400 km/h
  3. Einride Holzlaster T-Log fährt im Wald elektrisch und autonom

Smartphone von Gigaset: Made in Bocholt
Smartphone von Gigaset
Made in Bocholt

Gigaset baut sein Smartphone GS185 in Bocholt - und verpasst dem Gerät trotz kompletter Anlieferung von Teilen aus China das Label "Made in Germany". Der Fokus auf die Region ist aber vorhanden, eine erweiterte Fertigung durchaus eine Option. Wir haben uns das Werk angeschaut.
Ein Bericht von Tobias Költzsch

  1. Bocholt Gigaset baut Smartphone in Deutschland

Raumfahrt: Großbritannien will wieder in den Weltraum
Raumfahrt
Großbritannien will wieder in den Weltraum

Die Briten wollen eigene Raketen bauen und von Großbritannien aus starten. Ein Teil des Geldes dafür kommt auch von Investoren und staatlichen Investitionsfonds aus Deutschland.
Von Frank Wunderlich-Pfeiffer

  1. Esa Sonnensystemforschung ohne Plutonium
  2. Jaxa Japanische Sonde Hayabusa 2 erreicht den Asteroiden Ryugu
  3. Mission Horizons @Astro_Alex fliegt wieder

    •  /