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. Experte (m/w) IT-Validierung
    gempex GmbH, Mannheim
  2. Service-Desk-Agent (m/w)
    MSH Medien System Haus GmbH & Co. KG, Stuttgart
  3. IT-Support-Mitarbeiter/in
    Clifford Chance, Frankfurt
  4. Ingenieur / Techniker für E- und MSR-Technik (m/w)
    KLAUS UNION GmbH & Co. KG, Bochum

 

Detailsuche


Spiele-Angebote
  1. Aktion: The Witcher 3: Wild Hunt + Comicbuch
  2. NEU: WWE 2K16 - Steelbook Edition (exklusiv bei Amazon.de) - [PlayStation 4]
    Vorbesteller erhalten zwei exklusive spielbare Versionen von Arnold Schwarzenegger als Terminator...
  3. NEU: Far Cry 2 - Fortune's Edition [PC Download]
    3,40€

 

Weitere Angebote


Folgen Sie uns
       


  1. Anonymisierung

    Weiterer Angriff auf das Tor-Netzwerk beschrieben

  2. Internet

    Unitymedia senkt die Preise

  3. TempleOS im Test

    Göttlicher Hardcore

  4. Ermittlungen gegen Netzpolitik.org

    Mehrere Ministerien wussten Bescheid

  5. Enlighten

    BMW erkennt Ampelphasen und zeigt Countdown an

  6. Spielentwicklung

    Zielgruppe Gamer

  7. Microsoft

    Erste Version der Hololens soll 2016 erscheinen

  8. Kartendienst

    Deutsche Autokonzerne übernehmen Nokias Kartendienst Here

  9. Juke

    Media-Saturn setzt stark auf Film- und Musikdownloads

  10. Spielentwicklung

    Prozedurale Welten



Haben wir etwas übersehen?

E-Mail an news@golem.de



Simulus QR-X350.PRO im Test: Der Quadcopter, der vom Himmel fiel
Simulus QR-X350.PRO im Test
Der Quadcopter, der vom Himmel fiel
  1. Flugverkehrskontrolle Amazon will Drohnenverkehr regeln
  2. Paketzustellung Google will Flugverkehrskontrolle für Drohnen entwickeln
  3. Luftzwischenfall Beinahekollision zwischen Lufthansa-Flugzeug und Drohne

OCZ Trion 100 im Test: Macht sie günstiger!
OCZ Trion 100 im Test
Macht sie günstiger!
  1. PM863 Samsung packt knapp 4 TByte in ein flaches Gehäuse
  2. 850 Evo und Pro Samsung veröffentlicht erste Consumer-SSDs mit 2 TByte
  3. TLC-Flash Samsung plant SSDs mit 2 und 4 TByte

Broadwell-C im Test: Intels Spätzünder auf Speed
Broadwell-C im Test
Intels Spätzünder auf Speed
  1. Prozessorgeneration Skylake soll Detachable-Akkulaufzeit um ein Drittel steigern
  2. Core i7-5775C im Kurztest Dank Iris Pro Graphics und EDRAM überraschend flott
  3. Prozessor Intels Broadwell bietet die schnellste integrierte Grafik

  1. Re: Gottes Betriebssystem

    azeu | 15:08

  2. Re: Am Ende ist die Motivation egal

    Ach | 15:08

  3. Re: Erde an Windows-Lemminge (inkl. Golem)! Bitte...

    Michael H. | 15:08

  4. Re: Optische Erkennung und Car2Car Kommunikation

    photoliner | 15:08

  5. Re: Ich will endlich einen richtigen Router

    koki | 15:05


  1. 13:59

  2. 12:59

  3. 12:01

  4. 12:00

  5. 10:38

  6. 10:30

  7. 10:18

  8. 09:48


  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