Abo
  • Services:
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.

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.

Anzeige

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.


eye home zur Startseite
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...


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

Stellenmarkt
  1. Knauf Gips KG, Iphofen (Raum Würzburg)
  2. DZR Deutsches Zahnärztliches Rechenzentrum GmbH, Stuttgart
  3. BLANCO GmbH + CO KG, Oberderdingen
  4. Continental AG, Frankfurt


Anzeige
Top-Angebote
  1. (u. a. Palit Geforce GTX 1070 für 434,90€, Zotac Geforce GTX 1080 nur 689,00€, Samsung M.2 256...
  2. 199,00€
  3. 0,90€

Folgen Sie uns
       


  1. Ausfall

    Störung im Netz von Netcologne

  2. Cinema 3D

    Das MIT arbeitet an 3D-Kino ohne Brille

  3. AVM

    Hersteller für volle Routerfreiheit bei Glasfaser und Kabel

  4. Hearthstone

    Blizzard feiert eine Nacht in Karazhan

  5. Gmane

    Wichtiges Mailing-Listen-Archiv offline

  6. Olympia

    Kann der Hashtag #Rio2016 verboten werden?

  7. Containerverwaltung

    Docker für Mac und Windows ist einsatzbereit

  8. Drosselung

    Telekom schafft wegen intensiver Nutzung Spotify-Option ab

  9. Quantenkrytographie

    Chinas erster Schritt zur Quantenkommunikation per Satellit

  10. Sony

    Absatz der Playstation 4 weiter stark



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Wolkenkratzer: Wer will schon 2.900 Stufen steigen?
Wolkenkratzer
Wer will schon 2.900 Stufen steigen?
  1. Hafen Die Schauerleute von heute sind riesig und automatisch
  2. Bahn Siemens verbessert Internet im Zug mit Funklochfenstern
  3. Fraunhofer-Institut Rekord mit Multi-Gigabit-Funk über 37 Kilometer

Festplatten mit Flash-Cache: Das Konzept der SSHD ist gescheitert
Festplatten mit Flash-Cache
Das Konzept der SSHD ist gescheitert
  1. Ironwolf, Skyhawk und Barracuda Drei neue 10-TByte-Modelle von Seagate
  2. 3PAR-Systeme HPE kündigt 7,68- und 15,36-TByte-SSDs an
  3. NVM Express und U.2 Supermicro gibt SATA- und SAS-SSDs bald auf

Huawei Matebook im Test: Guter Laptop-Ersatz mit zu starker Konkurrenz
Huawei Matebook im Test
Guter Laptop-Ersatz mit zu starker Konkurrenz
  1. Netze Huawei steigert Umsatz stark
  2. Huawei Österreich führt Hybridtechnik ein
  3. Huawei Deutsche Telekom testet LTE-V auf der A9

  1. Re: Der Preis...

    Pjörn | 04:26

  2. Wo soll das noch hinführen?

    hle.ogr | 04:14

  3. Re: Tiefbaukosten

    DerDy | 04:04

  4. Re: Klar kann #Rio2016 verboten werden!

    Hanmac | 03:46

  5. Re: Wo ist der Haken?

    Funnyzocker | 03:31


  1. 18:21

  2. 18:05

  3. 17:23

  4. 17:04

  5. 16:18

  6. 14:28

  7. 13:00

  8. 12:28


  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