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. twocream, Wuppertal
  2. Sagemcom Fröschl GmbH, Walderbach (zwischen Cham und Regensburg)
  3. Warner Music Group Germany Holding GmbH, Hamburg
  4. LogControl GmbH, Pforzheim


Anzeige
Hardware-Angebote
  1. (u. a. DXRacer OH/RE9/NW für 199,90€ statt 226€ im Preisvergleich)
  2. (täglich neue Deals)

Folgen Sie uns
       


  1. VLC, Kodi, Popcorn Time

    Mediaplayer können über Untertitel gehackt werden

  2. Engine

    Unity bekommt 400 Millionen US-Dollar Investorengeld

  3. Neuauflage

    Neues Nokia 3310 soll bei Defekt komplett ersetzt werden

  4. Surface Studio

    Microsofts Grafikerstation kommt nach Deutschland

  5. Polar

    Fitnesstracker A370 mit Tiefschlaf- und Pulsmessung

  6. Schutz

    Amazon rechtfertigt Sperrungen von Marketplace-Händlern

  7. CPU-Architektur

    RISC-V-Patches für Linux erstmals eingereicht

  8. FSP Hydro PTM+

    Wassergekühltes PC-Netzteil liefert 1.400 Watt

  9. Matebook X und E im Hands on

    Huawei kann auch Notebooks

  10. Celsius-Workstations

    Fujitsu bringt sichere Notebooks und kabellose Desktops



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Google I/O: Google verzückt die Entwickler
Google I/O
Google verzückt die Entwickler
  1. Neue Version im Hands On Android TV bekommt eine vernünftige Kanalübersicht
  2. Play Store Google nimmt sich Apps mit schlechten Bewertungen vor
  3. Daydream Standalone-Headsets auf Preisniveau von Vive und Oculus Rift

Panasonic Lumix GH5 im Test: Die Kamera, auf die wir gewartet haben
Panasonic Lumix GH5 im Test
Die Kamera, auf die wir gewartet haben
  1. Die Woche im Video Scharfes Video, spartanisches Windows, spaßige Switch

Asus B9440 im Test: Leichtes Geschäftsnotebook liefert zu wenig Business
Asus B9440 im Test
Leichtes Geschäftsnotebook liefert zu wenig Business
  1. ROG-Event in Berlin Asus zeigt gekrümmtes 165-Hz-Quantum-Dot-Display und mehr

  1. Re: Warum überhaupt VLC nutzen

    unbuntu | 23:23

  2. Re: Grafikbox so gross wie PC?

    ecv | 23:22

  3. Nachtrag zur Haltbarkeit

    as (Golem.de) | 23:13

  4. Re: Unix, das Betriebssystem von Entwicklern, für...

    CptSparky | 23:13

  5. Re: Vaporware

    as (Golem.de) | 23:09


  1. 18:58

  2. 18:20

  3. 17:59

  4. 17:44

  5. 17:20

  6. 16:59

  7. 16:30

  8. 15:40


  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