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. IT-Infrastruktur- und Netzwerkspezialist (m/w)
    Platinion GmbH, Köln
  2. Technical Teamlead / Senior-SW-Entwickler/in für Kombiinstrumente
    Robert Bosch GmbH, Leonberg
  3. C++/Qt Frontend Developer (m/w)
    über Dr. Pendl & Dr. Piswanger, Vomp (Österreich)
  4. Mitarbeiter/-in IT-Sicherheit und IT-Risikomanagement
    SaarLB, Saarbrücken

 

Detailsuche


Hardware-Angebote
  1. TIPP: Alternate Schnäppchen Outlet
  2. NEU: MSI GeForce GTX 970 Gaming 4G
    369,90€ (günstigster Preis laut Preisvergleich)
  3. Alle PCGH-PCs inkl. The Witcher 3

 

Weitere Angebote


Folgen Sie uns
       


  1. Force Touch

    Apples Trackpad könnte künftig verschiedene Oberflächen simulieren

  2. Bodyprint

    Yahoo-Software verwandelt Touchscreen in Ohr-Scanner

  3. BKA

    Ab Herbst 2015 soll der Bundestrojaner einsetzbar sein

  4. Die Woche im Video

    Computerspiele, Whatsapp und Fire TV Stick

  5. Amtsgericht Hamburg

    Online-Partnervermittlungen dürfen kein Geld nehmen

  6. Elite Dangerous

    Powerplay im All

  7. Martin Gräßlin

    KDE Plasma läuft erstmals unter Wayland

  8. Canonical

    Ubuntus Desktop-Next soll auf DEB-Pakete verzichten

  9. Glasschair

    Mit der Google Glass den Rollstuhl steuern

  10. Günther Oettinger

    EU und Telekom wollen Regulierung zu Whatsapp und Google



Haben wir etwas übersehen?

E-Mail an news@golem.de



P8 im Hands On: Huawei setzt auf die Kamera
P8 im Hands On
Huawei setzt auf die Kamera
  1. Lite Huaweis kleines P8 kostet 250 Euro
  2. Huawei P8 Max Riesen-Smartphone mit 6,8-Zoll-Display kostet 550 Euro
  3. Netzwerk und Smartphone Huawei verdient 4,5 Milliarden US-Dollar

Vindskip: Das Schiff der Zukunft segelt hart am Wind
Vindskip
Das Schiff der Zukunft segelt hart am Wind
  1. Volvo Lifepaint Reflektorfarbe aus der Dose schützt Radfahrer
  2. Munin Moderne Geisterschiffe brauchen keinen Steuermann
  3. Globales Transportnetz China will längsten Tunnel am Meeresgrund bauen

Raspberry Pi im Garteneinsatz: Wasser marsch!
Raspberry Pi im Garteneinsatz
Wasser marsch!
  1. Hummingboard angetestet Heiß und anschlussfreudig
  2. Onion Omega Preiswertes Bastelboard für OpenWrt
  3. GCHQ Bastelnde Spione bauen Raspberry-Pi-Cluster

  1. Re: Stimme

    Sphinx2k | 10:43

  2. Re: Wozu?

    slead | 10:41

  3. Re: Meine Dashcam erstellt alle drei Minuten ein...

    Anonymouse | 10:38

  4. Re: ohne apt kein ubuntu

    oSu. | 10:31

  5. Re: So ein Blödsinn!

    Phantasmagorium | 10:31


  1. 10:05

  2. 09:50

  3. 09:34

  4. 09:01

  5. 18:41

  6. 16:27

  7. 16:04

  8. 15:06


  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