Abo
  • IT-Karriere:

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. awinia gmbh, Freiburg
  2. Vodafone GmbH, München

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. 299,00€
  2. 399€ (Wert der Spiele rund 212€)

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
       


Escape Room in VR ausprobiert

Wir haben uns das Spiel Huxley von Exit VR näher angesehen.

Escape Room in VR ausprobiert Video aufrufen
Sicherheitslücken: Zombieload in Intel-Prozessoren
Sicherheitslücken
Zombieload in Intel-Prozessoren

Forscher haben weitere Seitenkanalangriffe auf Intel-Prozessoren entdeckt, die sie Microarchitectural Data Sampling alias Zombieload nennen. Der Hersteller wusste davon und reagiert mit CPU-Revisionen. Apple rät dazu, Hyperthreading abzuschalten - was 40 Prozent Performance kosten kann.
Ein Bericht von Marc Sauter und Sebastian Grüner

  1. Open-Source Technology Summit Intel will moderne Firmware und Rust-VMM für Server
  2. Ice Lake plus Xe-GPGPU Intel erläutert 10-nm- und 7-nm-Zukunft
  3. GPU-Architektur Intels Xe beschleunigt Raytracing in Hardware

Kontist, N26, Holvi: Neue Banking-Apps machen gute Angebote für Freelancer
Kontist, N26, Holvi
Neue Banking-Apps machen gute Angebote für Freelancer

Ein mobiles und dazu noch kostenloses Geschäftskonto für Freiberufler versprechen Startups wie Kontist, N26 oder Holvi. Doch sind die Newcomer eine Alternative zu den Freelancer-Konten der großen Filialbanken? Ja, sind sie - mit einer kleinen Einschränkung.
Von Björn König


    Motorola One Vision im Hands on: Smartphone mit 48-Megapixel-Kamera für 300 Euro
    Motorola One Vision im Hands on
    Smartphone mit 48-Megapixel-Kamera für 300 Euro

    Motorola bringt ein weiteres Android-One-Smartphone auf den Markt. Die Neuvorstellung verwendet viel Samsung-Technik und hat ein sehr schmales Display. Die technischen Daten sind für diese Preisklasse vielversprechend.
    Ein Hands on von Ingo Pakalski

    1. Moto G7 Power Lenovos neues Motorola-Smartphone hat einen großen Akku
    2. Smartphones Lenovo leakt neue Moto-G7-Serie

      •  /