Anzeige

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.

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.

Anzeige

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.


eye home zur Startseite
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

Stellenmarkt
  1. Interhyp Gruppe, München
  2. Robert Bosch GmbH, Schwieberdingen
  3. Neubrandenburger Stadtwerke GmbH, Neubrandenburg
  4. Continental AG, Dienstsitz Frankfurt, Einsatzgebiet deutschlandweit


Anzeige
Spiele-Angebote
  1. 99,99€
  2. 134,98€
  3. 199,99€

Folgen Sie uns
       


  1. Vorstandard

    Nokia will bereits ein 5G-fähiges Netz haben

  2. Vielfliegerprogramm

    Hacker stehlen Millionen Air-India-Meilen

  3. Funknetz

    BVG bietet offenes WLAN auf vielen U-Bahnhöfen

  4. Curiosity

    Weitere Hinweise auf einst sauerstoffreiche Mars-Atmosphäre

  5. Helium

    Neues Gas aus Tansania

  6. Streaming

    Netflix arbeitet intensiv an einer Sprachsuche

  7. Millionenrückzahlung

    Gericht erklärt Happy Birthday für gemeinfrei

  8. Trials of the Blood Dragon im Test

    Motorräder im B-Movie-Rausch

  9. Raumfahrt

    Kepler Communications baut Internet für Satelliten

  10. Klage zum Leistungsschutzrecht

    Verlage ziehen gegen Google in die nächste Runde



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Geforce GTX 1080/1070 im Test: Zotac kann Geforce besser als Nvidia
Geforce GTX 1080/1070 im Test
Zotac kann Geforce besser als Nvidia
  1. Die Woche im Video Superschnelle Rechner, smarte Zähler und sicherer Spam
  2. Geforce GTX 1080/1070 Asus und MSI schummeln mit Golden Samples
  3. Geforce GTX 1070 Nvidia nennt Spezifikationen der kleinen Pascal-Karte

Prozessor: Den einen Core M gibt es nicht
Prozessor
Den einen Core M gibt es nicht
  1. Elitebook 1030 G1 HPs Core-M-Notebook soll 13 Stunden durchhalten

IT und Energiewende: Fragen und Antworten zu intelligenten Stromzählern
IT und Energiewende
Fragen und Antworten zu intelligenten Stromzählern
  1. Smart Meter Bundestag verordnet allen Haushalten moderne Stromzähler
  2. Intelligente Stromzähler Besitzern von Solaranlagen droht ebenfalls Zwangsanschluss
  3. Smart-Meter-Gateway-Anhörung Stromsparen geht auch anders

  1. ...Es gibt keinen Heliummangel

    OhYeah | 18:38

  2. Re: Ältere Win7 Systeme gar nicht für 10 ausgelegt

    Spiritogre | 18:37

  3. Re: Weshalb gibt Tesla keine PS mehr im...

    ldlx | 18:34

  4. Re: Selbst mit Subvention ~ 5¤ - kaum glaubwürdig.

    Rulf | 18:32

  5. Re: 4,9 Mio Euro in der ersten Ausbaustufe?

    Freiheit | 18:27


  1. 18:25

  2. 18:17

  3. 17:03

  4. 16:53

  5. 16:44

  6. 15:33

  7. 14:47

  8. 14:00


  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