• 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. SCOOP Software GmbH, Köln
  2. Bundesanstalt für Immobilienaufgaben, Bonn

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
Hardware-Angebote
  1. täglich neue Deals bei Alternate.de
  2. (reduzierte Überstände, Restposten & Co.)

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
       


Panasonic LUMIX DC-S5 im Hands on

Klein in der Hand, voll im Format - wir haben uns die neue Kamera von Panasonic angesehen.

Panasonic LUMIX DC-S5 im Hands on Video aufrufen
Cyberbunker-Prozess: Die Darknet-Schaltzentrale über den Weinbergen
Cyberbunker-Prozess
Die Darknet-Schaltzentrale über den Weinbergen

Am Montag beginnt der Prozess gegen die Cyberbunker-Betreiber von der Mittelmosel. Dahinter verbirgt sich eine wilde Geschichte von "bunkergeilen" Internetanarchos bis zu polizeilich gefakten Darknet-Seiten.
Eine Recherche von Friedhelm Greis

  1. Darkweb 179 mutmaßliche Darknet-Händler festgenommen
  2. Marktplatz im Darknet Mutmaßliche Betreiber des Wall Street Market angeklagt
  3. Illegaler Onlinehandel Admin des Darknet-Shops Fraudsters muss hinter Gitter

Watch SE im Test: Apples gelungene Smartwatch-Alternative
Watch SE im Test
Apples gelungene Smartwatch-Alternative

Mit der Watch SE bietet Apple erstmals parallel zum Topmodell eine zweite, günstigere Smartwatch an. Die Watch SE eignet sich unter anderem für Nutzer, die auf die Blutsauerstoffmessung verzichten können.
Ein Test von Tobias Költzsch

  1. Apple WatchOS 7.0.3 behebt Reboot-Probleme der Apple Watch 3
  2. Series 6 im Test Die Apple Watch zwischen Sport, Schlaf und Sättigung
  3. Apple empfiehlt Neuinstallation Probleme mit WatchOS 7 und Apple Watch lösbar

Shifoo: Golem.de startet Betatest seiner Karriere-Coaching-Plattform
Shifoo
Golem.de startet Betatest seiner Karriere-Coaching-Plattform

Beratung, die IT-Profis in Job & Karriere effizient und individuell unterstützt: Golem.de startet die Video-Coaching-Plattform Shifoo. Hilf uns in der Betaphase, sie für dich perfekt zu machen, und profitiere vom exklusiven Angebot!

  1. Stellenanzeige Golem.de sucht Verstärkung für die Redaktion
  2. Stellenanzeige Golem.de sucht CvD (m/w/d)
  3. In eigener Sache Die 24-kernige Golem Workstation ist da

    •  /