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. über Robert Half Technology, Pforzheim
  2. Concardis GmbH, Eschborn
  3. Robert Bosch GmbH, Reutlingen
  4. Bosch Rexroth AG, Stuttgart-Bad Cannstatt


Anzeige
Hardware-Angebote
  1. 110,00€
  2. ab 229,00€

Folgen Sie uns
       


  1. Modulares Smartphone

    Lenovo bringt Moto Z mit Moto Z Play nach Deutschland

  2. Yoga Book

    Lenovos Convertible hat eine Tastatur und doch nicht

  3. Huawei Connect 2016

    Telekom will weltweit zu den größten Cloudanbietern gehören

  4. 20 Jahre Schutzfrist

    EU-Kommission plant das maximale Leistungsschutzrecht

  5. CCP Games

    Eve Online wird ein bisschen kostenlos

  6. Gear S3 im Hands on

    Samsungs neue runde Smartwatch soll drei Tage lang laufen

  7. Geleakte Zugangsdaten

    Der Dropbox-Hack im Jahr 2012 ist wirklich passiert

  8. Forerunner 35

    Garmin zeigt Schnickschnack-freie Sportuhr

  9. Nahverkehr

    Hamburg und Berlin kaufen gemeinsam saubere Busse

  10. Zertifizierungsstelle

    Wosign stellt unberechtigtes Zertifikat für Github aus



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Weltraumforschung: DFKI-Roboter soll auf dem Jupitermond Europa abtauchen
Weltraumforschung
DFKI-Roboter soll auf dem Jupitermond Europa abtauchen
  1. Softrobotik Oktopus-Roboter wird mit Gas angetrieben
  2. Warenzustellung Schweizer Post testet autonome Lieferroboter
  3. Lernroboter-Test Besser Technik lernen mit drei Freunden

OxygenOS vs. Cyanogenmod im Test: Ein Oneplus Three, zwei Systeme
OxygenOS vs. Cyanogenmod im Test
Ein Oneplus Three, zwei Systeme
  1. Android-Smartphone Update soll Software-Probleme beim Oneplus Three beseitigen
  2. Oneplus Three Update soll Speichermanagement verbessern
  3. Android-Smartphone Diskussionen um Speichermanagement beim Oneplus Three

Kritische Infrastrukturen: Wenn die USV Kryptowährungen schürft
Kritische Infrastrukturen
Wenn die USV Kryptowährungen schürft
  1. Ripper Geldautomaten-Malware gibt bis zu 40 Scheine aus
  2. Ransomware Trojaner Fantom gaukelt kritisches Windows-Update vor
  3. Livestreams Ein Schuss, ein Tor, ein Trojaner

  1. Re: Recht hat der Mann!

    Atalanttore | 04:49

  2. Re: Rauchmelder der endscheidet ob es brennt...

    Pjörn | 04:45

  3. Re: 2 gleiche Displays

    Pjörn | 04:08

  4. Re: Geilste Teile ever

    amagol | 03:16

  5. Re: Wer braucht die Telekom?

    GenXRoad | 03:16


  1. 22:19

  2. 20:31

  3. 19:10

  4. 18:55

  5. 18:16

  6. 18:00

  7. 17:59

  8. 17:13


  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