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) C/C++
    Dialog Lebensversicherungs-AG, Augsburg
  2. Softwareentwickler (m/w) als konzeptstarker und umsetzungsorientierter Projektleiter
    Vector Informatik GmbH, Stuttgart
  3. Softwareentwickler (m/w) ControlDesk
    dSPACE GmbH, Paderborn
  4. Anwendungsentwickler mit Schwerpunkt CAD (m/w)
    ZF Friedrichshafen AG, Schweinfurt

 

Detailsuche


Spiele-Angebote
  1. TOPSELLER: Sid Meier's Starships [PC Steam Code]
    8,74€
  2. Tom Clancy's Splinter Cell: Chaos Theory Download
    4,95€
  3. Wolfenstein: The Old Blood
    19,99€ (Release 08.05.)

 

Weitere Angebote


Folgen Sie uns
       


  1. Onion Omega

    Preiswertes Bastelboard für OpenWrt

  2. Noki

    Intelligentes Türschloss ohne Umbauten installierbar

  3. Samsung 850 Evo

    M.2- und mSATA-Kärtchen erhalten mehr Cache

  4. Mozilla

    Firefox 37 bringt Zertifikatsperren und Nutzerfeedback

  5. Assassin's Creed Chronicles angespielt

    Drei mörderische Zeitreisen

  6. Operation Volatile Cedar

    Spionagesoftware aus dem Libanon

  7. Studie

    Facebook trackt jeden

  8. Umfrage

    Notebook bleibt beliebtestes Gerät zur Internetnutzung

  9. Surface 3 im Hands on

    Das Surface ohne RT

  10. Fotodienst

    Flickr erlaubt gemeinfreie Bilder



Haben wir etwas übersehen?

E-Mail an news@golem.de



Macbook Pro 13 Retina im Test: Force Touch funktioniert!
Macbook Pro 13 Retina im Test
Force Touch funktioniert!
  1. Macbook 12 mit USB 3.1 Typ C Dieser Anschluss ist besetzt
  2. Apple Macbook Pro bekommt fühlendes Touchpad
  3. Grafikfehler Macbook-Reparaturprogramm jetzt auch in Deutschland

Fire TV mit neuer Firmware im Test: Streaming-Box wird vielfältiger
Fire TV mit neuer Firmware im Test
Streaming-Box wird vielfältiger
  1. Update Amazon wertet Fire TV auf
  2. Workshop Kodi bequemer auf Amazons Fire TV verwenden
  3. Streaming-App Allcast für iOS ist fertig

Galaxy S6 im Test: Lebe wohl, Kunststoff!
Galaxy S6 im Test
Lebe wohl, Kunststoff!
  1. Galaxy S6 Active Samsungs wasserdichtes Topsmartphone
  2. Galaxy S6 und S6 Edge Samsung meldet 20 Millionen Vorbestellungen
  3. Galaxy S6 und S6 Edge im Hands on Rund, schnell, teuer

  1. Schon seit Ewigkeiten ...

    gaelic | 07:51

  2. Re: Firefox Geschwindigkeit

    gaelic | 07:49

  3. Re: Warten auf NVMe ?

    Benutzername123 | 07:48

  4. Re: Java ist schonmal kein guter Ansatz.

    Soley | 07:45

  5. Re: Ghostery

    MarioWario | 07:44


  1. 07:46

  2. 07:29

  3. 23:51

  4. 18:29

  5. 18:00

  6. 17:59

  7. 17:22

  8. 16:32


  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