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

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...

meder 15. Aug 2006

was mich immmer an den von dir aufgezählten Lösungen stört, ist, dass man ein Plug-In...


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. Kassenzahnärztliche Vereinigung Baden-Württemberg, Freiburg
  2. über 3C - Career Consulting Company GmbH, Frankfurt am Main
  3. Deutsche Bundesbank, Frankfurt am Main
  4. Consilia GmbH Wirtschaftsprüfungsgesellschaft, Passau


Anzeige
Top-Angebote
  1. 34,99€
  2. 99,99€ für Prime-Mitglieder (Bestpreis!) - Lieferbar Ende Januar
  3. 89,90€ + 5,99€ Versand (Vergleichspreis 109,99€)

Folgen Sie uns
       


  1. Swift 5

    Acers dünnes Notebook kommt ab 1.000 Euro in den Handel

  2. Vodafone

    Callya-Flex-Tarife bekommen mehr Datenvolumen

  3. Elektromobilität

    Lithium ist genug vorhanden, aber es wird teurer

  4. Indiegames-Rundschau

    Krawall mit Knetmännchen und ein Mann im Fass

  5. Microsoft

    Surface Book 2 mit 15 Zoll kommt nach Deutschland

  6. Patent

    Huawei untersucht alternative Smartwatch-Bedienung

  7. AirSpaceX

    Lufttaxi Mobi-One kann fliegen und fahren

  8. NGSFF alias M.3

    Adata zeigt seine erste SSD mit breiterer Platine

  9. Ransomware

    Krankenhaus zahlt 60.000 US-Dollar trotz Backups

  10. Curie

    Google verlegt drei neue Seekabel



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
EU-Netzpolitik: Mit vollen Hosen in die App-ocalypse
EU-Netzpolitik
Mit vollen Hosen in die App-ocalypse

Preiswertes Grafik-Dock ausprobiert: Ein eGPU-Biest für unter 50 Euro
Preiswertes Grafik-Dock ausprobiert
Ein eGPU-Biest für unter 50 Euro
  1. XG Station Pro Asus' zweite eGPU-Box ist schlicht
  2. Zotac Amp Box (Mini) TB3-Gehäuse eignen sich für eGPUs oder SSDs
  3. Snpr External Graphics Enclosure KFA2s Grafikbox samt Geforce GTX 1060 kostet 500 Euro

Kryptowährungen: Von Tulpen, Berg- und Talfahrten
Kryptowährungen
Von Tulpen, Berg- und Talfahrten
  1. Bitcoin Israels Marktaufsicht will Kryptoverbot an Börse durchsetzen
  2. Geldwäsche EU will den Bitcoin weniger anonym machen
  3. Kryptowährung 4.700 Bitcoin von Handelsplattform Nicehash gestohlen

  1. Re: also $286000 pro Tonne ?

    markus.obi | 14:21

  2. Re: Einfach abartig

    tomate.salat.inc | 14:20

  3. Re: gezwungen?

    a user | 14:19

  4. selber Effekt

    TC | 14:18

  5. Re: Zweifle an dem Nutzen solcher Studien

    stiGGG | 14:18


  1. 14:21

  2. 13:25

  3. 12:30

  4. 12:00

  5. 11:48

  6. 11:20

  7. 10:45

  8. 10:25


  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