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.

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-Spezialist (m/w) Infrastruktur und Anwendungsbetreuung
    Madeleine Mode GmbH, Zirndorf (bei Nürnberg/Fürth)
  2. IT Inhouse SAP Einkaufslogistik SRM (m/w)
    Media-Saturn IT-Services GmbH, Ingolstadt
  3. Teamleiter (m/w) Functional Test
    T-Systems Multimedia Solutions GmbH, Dresden
  4. Frontend Developer (m/w) JavaScript / AngularJS
    über personal total GmbH München-Riem, München

Detailsuche


Blu-ray-Angebote
  1. Erbarmungslos [Blu-ray]
    5,00€
  2. Ocean's Trilogy Collection [Blu-ray]
    13,99€
  3. Butterfly Effect 1-3 - Collection [Blu-ray]
    13,99€

Weitere Angebote


Folgen Sie uns
       


  1. Die Woche im Video

    Raider heißt jetzt Twix ...

  2. Alpenföhn

    Der Olymp soll 340 Watt an Leistung abführen

  3. Eurocom X9E

    Monster-Notebook nutzt Diamant- und Flüssigmetallpaste

  4. Willkürliche Festsetzung

    Schwedische Regierung spottet über Assange

  5. IoT statt Smartphones

    Mozilla gibt Firefox OS schneller auf als erwartet

  6. Rise of the Tomb Raider

    Update schafft Klarheit

  7. Time Machine VR angespielt

    Wir tauchen mit den Monstern der Tiefe

  8. KEF

    Kommission empfiehlt Senkung des Rundfunkbeitrags

  9. Helio X20

    Mediatek bestreitet Hitzeprobleme des Smartphone-Chips

  10. Container

    CoreOS setzt mit rkt 1.0 weiter auf Sicherheit



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Überblick: Den Kabelsalat um USB Typ C entwirrt
Überblick
Den Kabelsalat um USB Typ C entwirrt

Kaufberatung: Die richtige CPU und Grafikkarte
Kaufberatung
Die richtige CPU und Grafikkarte
  1. Halbleiterfertigung Samsung zeigt SRAM-Zelle mit 10FF-Technik
  2. Visc-Roadmap Soft Machines will Apples und Intels Prozessoren schlagen
  3. C900 Matrox' kleine Profi-Grafikkarte steuert neun Displays an

Raspberry Pi Zero angetestet: Der Bastelrechner für stille, dunkle Ecken
Raspberry Pi Zero angetestet
Der Bastelrechner für stille, dunkle Ecken
  1. Jaguarboard Noch ein Bastelcomputer mit Intel-Chip
  2. Cricetidometer mit Raspberry Pi Ein Schrittzähler für den Hamster
  3. Orange Pi Lite Preis- und Größenkampf der Bastelcomputer

  1. Re: wir halten das schlicht für Unfug...

    Muellersmann | 10:21

  2. Re: Netscape scheint immer noch durch

    Tylon | 10:14

  3. Re: Demokratie? Rechtsstaatlichkeit? Am Arsch!

    raphaelo00 | 10:11

  4. Re: Bei E-Plus gibts doch eh nur Edge

    iToms | 10:11

  5. Re: Anbieter bescheißen auch bei Drosselung

    Dragos | 10:09


  1. 09:01

  2. 21:49

  3. 16:04

  4. 15:45

  5. 15:18

  6. 15:02

  7. 14:03

  8. 13:30


  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