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.

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.


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

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. Mitarbeiter/in für die Fachadministration Finanz- und Rechnungswesen
    Erzbistum Köln Generalvikariat, Köln
  2. Linux-Systemadministrator (m/w)
    energy & meteo systems GmbH, Oldenburg
  3. Java-Entwickler/in Crossmediale Austauschsysteme IT-Planung und Softwareentwicklung
    Hessischer Rundfunk Anstalt des öffentlichen Rechts, Frankfurt
  4. PHP-Entwickler (m/w)
    Aspera GmbH, Aachen

Detailsuche



Anzeige
Blu-ray-Angebote
  1. VORBESTELLBAR: X-Men Apocalypse [Blu-ray]
    19,99€ (Vorbesteller-Preisgarantie)
  2. NEU: 3 Blu-rays für 18 EUR
    (u. a. Rache für Jesse James, Runaway, The Wanderers)
  3. NEU: The Revenant - Der Rückkehrer (+ 4K Ultra HD-Blu-ray)
    29,99€

Weitere Angebote


Folgen Sie uns
       


  1. Telekom-Chef

    Konkurrenz soll aufhören zu "jammern"

  2. Android TV

    Google nimmt Nexus Player vom Markt

  3. Solid-State-Drive

    Samsung bringt die SSD 750 Evo nach Deutschland

  4. Xperia X im Hands on

    Sonys vorgetäuschte Oberklasse

  5. Autonomes Fahren

    Ethik-Kommission soll Leitlinien für Algorithmen entwickeln

  6. Keine freie Software

    Cryengine ist öffentlich auf Github verfügbar

  7. Siri-Lautsprecher

    Apple plant Konkurrenten zu Amazons Echo

  8. E-Paper

    E-Ink wird farbig

  9. Philips BDP7501 und BDP7301

    Ein dritter 4K-UHD-Blu-ray-Player kommt

  10. Smartphones

    Huawei verklagt Samsung wegen LTE-Patenten



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Googles Neuvorstellungen: Alles nur geklaut?
Googles Neuvorstellungen
Alles nur geklaut?
  1. Google I/O Android Auto wird eine eigenständige App
  2. Jacquard und Soli Google bringt smarte Jacke und verbessert Radar-Chip
  3. Modulares Smartphone Project Ara soll 2017 kommen - nur noch teilweise modular

Cloudready im Test: Ein altes Gerät günstig zum Chromebook machen
Cloudready im Test
Ein altes Gerät günstig zum Chromebook machen
  1. Chrome OS Android-Apps kommen auf Chromebooks
  2. Acer-Portfolio 2016 Vom 200-Hz-Curved-Display bis zum 15-Watt-passiv-Detachable

Doom im Technik-Test: Im Nightmare-Mode erzittert die Grafikkarte
Doom im Technik-Test
Im Nightmare-Mode erzittert die Grafikkarte
  1. Blackroom John Romero und das Shooter-Holodeck
  2. Doom Hölle für alle
  3. Doom Bericht aus der Bunnyhopping-Hölle

  1. Re: Auflösung ist vernachlässigbar

    Sicaine | 13:00

  2. Re: "die alten Regeln gelten nicht für uns (=Google)"

    Dwalinn | 12:59

  3. Re: Im Allgemeinen versteht man unter 4K alles...

    The_Soap92 | 12:58

  4. Ein neuer Kindle DX mit Farbdisplay wäre toll...

    NeoCronos | 12:57

  5. Re: CRYTEK-CRYENGINE

    meinungsmonopolist | 12:57


  1. 13:07

  2. 12:45

  3. 12:30

  4. 12:06

  5. 12:05

  6. 11:55

  7. 11:41

  8. 11:31


  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