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. Deutsche Post DHL Group, Bonn
  2. viastore SYSTEMS GmbH, Stuttgart oder Löhne
  3. Bundesinstitut für Risikobewertung, Berlin
  4. DYNAMIC ENGINEERING GMBH, München


Anzeige
Hardware-Angebote
  1. und Gears of War 4 gratis erhalten
  2. (u. a. Asus GTX 1070 Strix OC, MSI GTX 1070 Gaming X 8G und Aero 8G OC)

Folgen Sie uns
       


  1. Microsoft

    Besucher können die Hololens im Kennedy Space Center nutzen

  2. MacOS 10.12

    Fujitsu warnt vor der Nutzung von Scansnap unter Sierra

  3. IOS 10.0.2

    Apple beseitigt Ausfälle der Lightning-Audio-Kontrollen

  4. Galaxy Note 7

    Samsung tauscht das Smartphone vor der Haustür aus

  5. Falcon-9-Explosion

    SpaceX grenzt Explosionsursache ein

  6. Die Woche im Video

    Schneewittchen und das iPhone 7

  7. 950 Euro

    Abmahnwelle zu Pornofilm-Filesharing von Betrügern

  8. Jailbreak

    19-Jähriger will iPhone-7-Exploit für sich behalten

  9. Alle drei Netze

    Ericsson und Icomera bauen besseres Bahn-WLAN

  10. Oculus Rift

    Palmer Luckey im Netz als Trump-Unterstützer geoutet



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Starship Technologies: Es wird immer nach Diebstahl und Vandalismus gefragt
Starship Technologies
Es wird immer nach Diebstahl und Vandalismus gefragt
  1. Recore Mein Buddy, der Roboter
  2. Weltraumforschung DFKI-Roboter soll auf dem Jupitermond Europa abtauchen
  3. Softrobotik Oktopus-Roboter wird mit Gas angetrieben

PES 2017 im Test: Vom Feeling her ein gutes Gefühl
PES 2017 im Test
Vom Feeling her ein gutes Gefühl

Classic Computing 2016: Wie Nordhorn für ein Wochenende zu Nerdhome wurde
Classic Computing 2016
Wie Nordhorn für ein Wochenende zu Nerdhome wurde
  1. Fifa 17 Was macht Dragon Age in meiner Fifa-Demo?
  2. Feuerwerkwettbewerb Pyronale 2016 Erst IT macht prächtige Feuerwerke möglich
  3. Flüge gecancelt Delta Airlines weltweit durch Computerpanne lahmgelegt

  1. Re: 40 Millionen Kunden ohne LTE1800?

    ICH_DU | 22:38

  2. Re: O2 läuft prima

    ICH_DU | 22:37

  3. Re: Mein Sennheiser mit Audio Jack/Klinke

    unbuntu | 22:32

  4. Re: dafür sind Unis auch nicht da

    bstea | 22:29

  5. Re: Ach der qwerty

    ElMario | 22:27


  1. 12:51

  2. 11:50

  3. 11:30

  4. 11:13

  5. 11:03

  6. 09:00

  7. 18:52

  8. 17:54


  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