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.

Anzeige

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.

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.


LaZiR 05. Sep 2007

Der Unterschied ist, der Quellcode von Brothercake ist lesbar und gut kommentiert. den...

fk 16. Aug 2006

neeneenee.de/vrml

frägentuh 16. Aug 2006

Schaut mal auf http://www.wolf5k.com/ Da gibts ein Wolfenstein3D-Umsetzung für...

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

Kommentieren


Fletcher's weblog / 16. Aug 2006

Firefox, der Dungeon Master

Daniel's Weblog / 16. Aug 2006

3D-Welten in CSS und Javascript - Teil 2



Anzeige

  1. Softwareentwickler (m/w) für Testsysteme im Bereich Mobilgeräte
    AMS Software & Elektronik GmbH, Flensburg
  2. Senior Produkt Manager (m/w)
    Sophos Technology GmbH, Karlsruhe
  3. Entwicklungsingenieur (m/w) - Hardwarenahe Software-Entwicklung
    R. STAHL HMI Systems GmbH, Köln
  4. Entwicklungsingenieur Ethernet-Kommunikation (m/w)
    MBtech Group GmbH & Co. KGaA, Sindelfingen bei Stuttgart (Home-Office möglich)

 

Detailsuche


Folgen Sie uns
       


  1. Echtzeit-Überwachung

    BND prüft angeblich Einsatz von SAPs Hana-Datenbank

  2. Xiaomi

    Design des Mi4 von Apple "inspiriert"

  3. Terrorabwehr

    Kriterien für Aufnahme in US-Terrordatenbank enthüllt

  4. Open Name System

    DNS mit Namecoin-Blockchain

  5. In eigener Sache

    Computec Media veröffentlicht Spielevideo-App Games TV 24

  6. Google-Suchergebnisse

    EU-Datenschützer verlangen weltweite Löschung

  7. Dating

    Parship darf Widerruf nicht mit hoher Rechnung verhindern

  8. O2

    Neue Prepaid-Tarife erlauben Datenmitnahme in den Folgemonat

  9. Freie .Net-Implementierung

    Mono soll schneller werden

  10. Oneplus One

    Eigenes ROM mit Stock Android 4.4.4 vorgestellt



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Smartphone-Hersteller Xiaomi: Wie Apple, nur anders
Smartphone-Hersteller Xiaomi
Wie Apple, nur anders
  1. Flir One Wärmebildkamera fürs iPhone lieferbar
  2. Per Smartphone Paypal ermöglicht Bezahlen in Restaurants landesweit
  3. Datenübertragung Smartphone-Kompass spielt Musik durch Magnetkraft

Nvidia Shield Tablet ausprobiert: Schnelles Spiele-Tablet für Android mit WLAN-Controller
Nvidia Shield Tablet ausprobiert
Schnelles Spiele-Tablet für Android mit WLAN-Controller
  1. Tegra K1 Start von Nvidias Shield Tablet zeichnet sich ab
  2. GM200 und GM204 Nvidias große Maxwell-GPUs zeigen sich beim Zoll
  3. Dual-GPU-Grafikkarte EVGA macht Titan-Z schmaler und leiser als Nvidia

PC-Spiele mit 4K, 6K, 8K, 15K: "Spielen mit Downsampling schlägt Full-HD immer"
PC-Spiele mit 4K, 6K, 8K, 15K
"Spielen mit Downsampling schlägt Full-HD immer"
  1. Transformers Ära des Untergangs - gefilmt mit Sensoren im Imax-Format
  2. Intel-Partnerschaft mit Samsung 4K-Monitore sollen unter 400 US-Dollar gedrückt werden
  3. Asus ROG Kleine Gaming-PCs im Konsolendesign mit Desktophardware

    •  / 
    Zum Artikel