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-Projektleiter/-in für cross-funktionale Prozesse im Rahmen des Vorstandprojektes PBK
    Daimler AG, Sindelfingen
  2. Anwendungsbetreuer SAP Business ByDesign (ByD) (m/w)
    Roland Berger Strategy Consultants GmbH, München
  3. Security Consultant (m/w)
    Microsoft Deutschland GmbH, Berlin, Köln, München
  4. Projektleitung (m/w) IT-Bereich
    Robert Bosch Car Multimedia GmbH, Hildesheim

 

Detailsuche


Hardware-Angebote
  1. MSI-Cashback-Aktion: Ausgewählte Grafikkarte und Mainboard kaufen
  2. Amazon Fire TV
    89,00€ statt 99,00€
  3. TIPP: Evga Geforce GTX 960 SuperSC
    mit 20 Euro Cashback nur 194,90€ bezahlen

 

Weitere Angebote


Folgen Sie uns
       


  1. Galaxy S6 und Edge-Variante

    Samsungs neue Top-Smartphones im Glaskleid

  2. Smart Home

    D-Link will Z-Wave-Funk in seine Router integrieren

  3. Vive

    Valves VR-Brille kommt von HTC

  4. Huawei Watch im Hands On

    Kompakte Smartwatch mit rundem Saphirglas

  5. One M9 im Hands on

    HTCs Lollipop-Smartphone hat ein Zusatzknöpfchen

  6. Watch Urbane LTE im Hands On

    LGs Edelstahl-Uhr für geduldige Golfer

  7. Qi Wireless Charging

    Ikea-Möbel laden schnurlos Akkus

  8. Linux-Desktops

    Xfce 4.12 ist endlich fertig

  9. Fahrerdienst

    Uber verschweigt monatelang einen Server-Einbruch

  10. Linux 4.0

    Streit um das Live-Patching entbrennt



Haben wir etwas übersehen?

E-Mail an news@golem.de



Freenet: Das anonyme Netzwerk mit der Schmuddelecke
Freenet
Das anonyme Netzwerk mit der Schmuddelecke
  1. Geheimdienstchef Clapper Cyber-Armageddeon ist nicht zu befürchten
  2. U-Bahn Neue Überwachungskameras können schwenken und zoomen
  3. Matthew Garrett Intel erzwingt Entscheidung zwischen Sicherheit und Freiheit

Technical Preview im Test: So fühlt sich Windows 10 für Smartphones an
Technical Preview im Test
So fühlt sich Windows 10 für Smartphones an
  1. Internet Explorer Windows 10 soll asm.js voll unterstützen
  2. Microsoft Windows 10 erhält Anmeldestandard Fido
  3. Mobiles Betriebssystem Technical Preview von Windows 10 für Smartphones ist da

Lifetab P8912 im Test: Viel Rahmen für wenig Geld
Lifetab P8912 im Test
Viel Rahmen für wenig Geld
  1. Medion Lifetab P8912 9-Zoll-Tablet mit Infrarotsender kostet 180 Euro
  2. Medion Life X5001 5-Zoll-Smartphone mit Full-HD-Display für 220 Euro
  3. Lifetab S8311 8-Zoll-Tablet mit UMTS-Modem im Metallgehäuse für 200 Euro

  1. ¤200 Aufpreis für festverbauten 128 GB FLASH...

    cicero | 20:23

  2. Re: Langjährige Fans der Galaxy-S-Serie, kein SD...

    NaDu | 20:19

  3. iPhone zu teuer...

    S-to-the-d | 20:18

  4. Ein Gigant begeht Selbstmord

    Pohannesjaul III | 20:16

  5. Re: runde Smart-Uhren sind uncool

    Denkanstoss | 20:14


  1. 19:36

  2. 17:29

  3. 17:20

  4. 17:16

  5. 17:00

  6. 15:39

  7. 13:23

  8. 13:12


  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