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. Support-Berater (m/w) für den Bereich Patientenmanagement mit SAP IS-H
    RZV Rechenzentrum Volmarstein GmbH, Wetter (Ruhr)
  2. Business Analyst / QlikView (m/w)
    redcoon GmbH, Aschaffenburg
  3. (System-)Administrator (m/w) für Monitoring- / Testsystem
    Unitymedia GmbH, Stuttgart-Wangen
  4. Software Entwicklungsingenieur FEM (m/w)
    Continental AG, Hannover

 

Detailsuche


Spiele-Angebote
  1. VORBESTELLBAR: Guild Wars 2 Heart of Thorns Vorverkaufsbox
    44,99€ (Vorbesteller-Preisgarantie)
  2. VORBESTELLBAR: Assassin's Creed Syndicate
    ab 59,95€ (Vorbesteller-Preisgarantie)
  3. God of War 3 Remastered - [PlayStation 4]
    49,00€ (Release 15. Juli)

 

Weitere Angebote


Folgen Sie uns
       


  1. Tox

    Kostenloser digitaler Erpressungsdienst

  2. FTV-Skin für Kodi angeschaut

    Kodi bekommt eine Fire-TV-Oberfläche

  3. Apple Fusion Keyboard

    Tasten in der Doppelrolle als Trackpad

  4. Quadcopter

    Gopro will Drohnen verkaufen

  5. iOS 9

    Öffentlicher Nahverkehr soll in Apple Maps auftauchen

  6. Streaming

    Bald 30 Prozent aller Daten von Fernsehgeräten erzeugt

  7. Waffensystem

    Darpa testet Laserkanone

  8. Ortungsdienste

    Chrome-Erweiterung erstellt Bewegungsprofile bei Facebook

  9. Borderlands

    Dreimal so viele legendäre Gegenstände

  10. Security

    Zwei neue Exploits auf Routern entdeckt



Haben wir etwas übersehen?

E-Mail an news@golem.de



SSD HyperX Predator im Test: Kingstons Mischung ist gelungen
SSD HyperX Predator im Test
Kingstons Mischung ist gelungen
  1. Z-Drive 6300 Neue SSD bietet bis zu 6,4 TByte Speicherplatz
  2. Crucial BX100 und MX200 im Test Mehr SSD pro Euro gibt's derzeit nicht
  3. Plextor M6e Black Edition im Kurztest Auch eine günstige SSD kann teuer erkauft sein

BND-Affäre: Keine Frage der Ehre
BND-Affäre
Keine Frage der Ehre
  1. NSA-Affäre Merkel wohl über Probleme mit No-Spy-Abkommen informiert
  2. Freedom Act US-Senat lehnt Gesetz zur NSA-Reform ab
  3. BND-Chef Schindler "Wir sind abhängig von der NSA"

Macbook 12 im Test: Einsamer USB-Port sucht passende Partner
Macbook 12 im Test
Einsamer USB-Port sucht passende Partner
  1. Apple Store Apple erhöht Hardwarepreise
  2. Workaround Macbook 12 kann bei Erstinstallation hängen bleiben
  3. Hydradock Elf Ports für das Macbook 12

  1. Re: Ob das wohl angenommen wird?

    Peter Brülls | 10:04

  2. Re: "Die Qualität hat sich seitdem deutlich...

    tunnelblick | 10:04

  3. Kennt jemand ein Big Picture Skin?

    liberavia | 10:02

  4. Re: Löblich

    corpid | 10:02

  5. Re: Aeon MQ

    Eisklaue | 10:01


  1. 09:41

  2. 09:00

  3. 07:48

  4. 07:32

  5. 07:25

  6. 22:51

  7. 19:01

  8. 17:24


  1. Themen
  2. A
  3. B
  4. C
  5. D
  6. E
  7. F
  8. G
  9. H
  10. I
  11. J
  12. K
  13. L
  14. M
  15. N
  16. O
  17. P
  18. Q
  19. R
  20. S
  21. T
  22. U
  23. V
  24. W
  25. X
  26. Y
  27. Z
  28. #
 
    •  / 
    Zum Artikel