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. SAP-PM Projektbetreuer (m/w)
    Stadtwerke Schwerin GmbH, Schwerin
  2. IT-Engineer/SE (m/w)
    HWI IT e.K., Teningen
  3. Software-Entwickler (m/w) Continuous Integration
    e.solutions GmbH, Ulm
  4. Consultant Finance Processes & Applications (m/w)
    Fresenius Netcare GmbH, Bad Homburg

 

Detailsuche


Blu-ray-Angebote
  1. NUR NOCH HEUTE: The Pacific [Blu-ray]
    16,97€
  2. 4 Blu-rays für 30 EUR
    (u. a. Die Unfassbaren, Escape Plan, RED 2, Braveheart, Fast & Furious 6, Titanic)
  3. NUR NOCH HEUTE: Noah [3D Blu-ray]
    12,97€

 

Weitere Angebote


Folgen Sie uns
       


  1. UNHRC

    Die UNO hat einen Sonderberichterstatter für Datenschutz

  2. Nordamerika

    Arin aktiviert Wartelistensystem für IPv4-Adressen

  3. Modellreihe CUH-1200

    Neue PS4 nutzt halb so viele Speicherchips

  4. Die Woche im Video

    Apple Music gestartet, Netzneutralität bedroht, NSA geleakt

  5. Internet.org

    Mark Zuckerberg will Daten per Laser auf die Erde übertragen

  6. TLC-Flash

    Samsung plant SSDs mit 2 und 4 TByte

  7. Liske

    Bitkom schließt Vorstandsmitglied im Streit aus

  8. Surfen im Ausland

    Apple SIM in Deutschland erhältlich

  9. Haushaltshilfe

    Rockets Helpling kauft Hassle.com

  10. Zynq Ultra Scale Plus

    Xilinx lässt erste 16-nm-Chips fertigen



Haben wir etwas übersehen?

E-Mail an news@golem.de



Pebble Time im Test: Nicht besonders smart, aber watch
Pebble Time im Test
Nicht besonders smart, aber watch
  1. Smartwatch Pebble Time kostet außerhalb von Kickstarter 250 Euro
  2. Smartwatch Apple gibt iOS-App für die Pebble Time frei
  3. Smartwatch Pebbles iOS-App wird von Apple nicht freigegeben

Radeon R9 Fury X im Test: AMDs Wasserzwerg schlägt Nvidias Titan in 4K
Radeon R9 Fury X im Test
AMDs Wasserzwerg schlägt Nvidias Titan in 4K
  1. Grafikkarte Auch Fury X rechnet mit der Mantle-Schnittstelle flotter
  2. Radeon R9 390 im Test AMDs neue alte Grafikkarten bekommen einen Nitro-Boost
  3. Grafikkarte AMDs neue R7- und R9-Modelle sind beschleunigte Vorgänger

PGP: Hochsicher, kaum genutzt, völlig veraltet
PGP
Hochsicher, kaum genutzt, völlig veraltet
  1. OpenPGP Facebook verschlüsselt E-Mails
  2. Geheimhaltung IT-Experten wollen die NSA austricksen
  3. Security Wie Google Android sicher macht

  1. Re: HDMI 2.0 ?

    HubertHans | 11:13

  2. Re: DRM frei für erkannte Stücke

    Eve666 | 11:10

  3. den Trend gibts auch bei Android 5.1.1

    pk_erchner | 11:09

  4. Re: Ich hätt da noch 'ne Idee ...

    wittiko | 11:08

  5. pEp - Pretty Easy Privacy

    cansik | 11:00


  1. 14:04

  2. 11:55

  3. 10:37

  4. 09:33

  5. 16:52

  6. 16:29

  7. 16:25

  8. 15:52


  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