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. Referent/in Porfolio- / Projektmanagement
    Wüstenrot Bausparkasse AG, Ludwigsburg
  2. Systemadministrator Microsoft (m/w)
    Stadtwerke Norderstedt, Norderstedt
  3. CMS-Administrator / CMS-Manager (m/w)
    ING-DiBa AG, Frankfurt
  4. Senior SAP Solution Inhouse Consultant (m/w)
    Leica Camera AG, Wetzlar

Detailsuche


Spiele-Angebote
  1. EXKLUSIV BEI MICROSOFT: Halo 5: Guardians Limited Collector's Edition für Xbox One
    249,99€
  2. Mafia III
    59,99€ mit Vorbesteller-Preisgarantie
  3. VORBESTELLBAR: PlayStation 4 - Konsole (1TB) Star Wars Battlefront Limited Edition
    499,00€ (Vorbesteller-Preisgarantie)

Weitere Angebote


Folgen Sie uns
       


  1. Medion

    Lollipop-Smartphone mit Glasrückseite für 250 Euro

  2. Betriebssysteme

    Linux 4.2 ist für AMDs Grafikkarten optimiert

  3. Breaking Bad in 4K

    Netflix-DRM offenbar gebrochen

  4. Smart Bike Computer

    Android Wear fürs Fahrrad

  5. Gremlins

    Aufklärungsdrohnen sollen im Flug eingesammelt werden

  6. Fixie

    Radfahrer irritiert autonomes Google-Auto

  7. Kaspersky Antivirus

    Sicherheitssoftware warnt vor Änderungen am Computer

  8. Supernerds

    Angst schüren gegen den Überwachungswahn

  9. O2-Netz

    Mobilfunkkunden von Kabel Deutschland gekündigt

  10. Landkreistag

    Warum der Bund den Glasfaserausbau nicht fördert



Haben wir etwas übersehen?

E-Mail an news@golem.de



The Flock im Test: Versteck spielen, bis alle tot sind
The Flock im Test
Versteck spielen, bis alle tot sind
  1. Lara Go im Test Tomb Raider auf Rätseltour
  2. Ronin im Test Auftragsmord mit Knobelpausen
  3. Test Til Morning's Light Abenteuer von Amazon

TempleOS im Test: Göttlicher Hardcore
TempleOS im Test
Göttlicher Hardcore
  1. Erste Probleme mit Zwangsupdates Windows-10-Patch bockt
  2. Windows 10 Microsoft gibt Enterprise-Version frei
  3. Microsoft Über 14 Millionen sind bereits auf Windows 10 gewechselt

ESL One: Standing Ovations für den unbeliebten Sieger
ESL One
Standing Ovations für den unbeliebten Sieger
  1. Sport oder nicht? Was E-Sport dem Kirschkernweitspucken voraushat
  2. E-Sport Mit Speicheltests gegen Doping
  3. The International Evil Geniuses gewinnt rund 6,6 Millionen US-Dollar

  1. Re: Ist mir zu doof

    dontcare | 10:44

  2. Re: Firmengeheimnisse? Eher Peinlichkeit ersparen!

    Komischer_Phreak | 10:43

  3. Re: Die großen Fische sind Bekannte der Politiker

    plutoniumsulfat | 10:42

  4. Re: Schland hat den Trend verschlafen.

    Zzimtstern | 10:42

  5. Re: Für viele sind 17 GB

    Jolla | 10:42


  1. 10:00

  2. 09:20

  3. 08:49

  4. 07:48

  5. 07:31

  6. 07:19

  7. 00:01

  8. 12:57


  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