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. Thalia Bücher GmbH, Berlin
  2. Road Deutschland GmbH, Bretten bei Bruchsal
  3. über Ratbacher GmbH, Hamburg
  4. Fachhochschule Südwestfalen, Meschede


Anzeige
Blu-ray-Angebote
  1. (u. a. The Complete Bourne Collection Blu-ray 14,99€, Harry Potter Complete Blu-ray 44,99€)
  2. (u. a. London Has Fallen, The Imitation Game, Lone Survivor, Olympus Has Fallen)
  3. (u. a. Der Hobbit 3, Der Polarexpress, Ice Age, Pan, Life of Pi)

Folgen Sie uns
       


  1. Nintendo

    Super Mario Run für iOS läuft nur mit Onlineverbindung

  2. USA

    Samsung will Note 7 in Backsteine verwandeln

  3. Hackerangriffe

    Obama will Einfluss Russlands auf US-Wahl untersuchen lassen

  4. Free 2 Play

    US-Amerikaner verzockte 1 Million US-Dollar in Game of War

  5. Die Woche im Video

    Bei den Abmahnanwälten knallen wohl schon die Sektkorken

  6. DNS NET

    Erste Kunden in Sachsen-Anhalt erhalten 500 MBit/s

  7. Netzwerk

    EWE reduziert FTTH auf 40 MBit/s im Upload

  8. Rahmenvertrag

    VG Wort will mit Unis neue Zwischenlösung für 2017 finden

  9. Industriespionage

    Wie Thyssenkrupp seine Angreifer fand

  10. Kein Internet

    Nach Windows-Update weltweit Computer offline



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Großbatterien: Sechs 15-Megawatt-Anlagen sollen deutsches Stromnetz sichern
Großbatterien
Sechs 15-Megawatt-Anlagen sollen deutsches Stromnetz sichern
  1. HPE Hikari Dieser Supercomputer wird von Solarenergie versorgt
  2. Tesla Desperate Housewives erzeugen Strom mit Solarschindeln
  3. Solar Roadways Erste Solarzellen auf der Straße verlegt

Google, Apple und Mailaccounts: Zwei-Faktor-Authentifizierung richtig nutzen
Google, Apple und Mailaccounts
Zwei-Faktor-Authentifizierung richtig nutzen
  1. Bugs in Encase Mit dem Forensik-Tool die Polizei hacken
  2. Red Star OS Sicherheitslücke in Nordkoreas Staats-Linux
  3. 0-Day Tor und Firefox patchen ausgenutzten Javascript-Exploit

Steep im Test: Frei und einsam beim Bergsport
Steep im Test
Frei und einsam beim Bergsport
  1. PES 2017 Update mit Stadion und Hymnen von Borussia Dortmund
  2. Motorsport Manager im Kurztest Neustart für Sportmanager
  3. NBA 2K17 10.000 Schritte für Ingame-Boost

  1. Richtig so!

    mhstar | 17:31

  2. Re: LÖSUNG: Linux und Windows Dualboot...

    Analysator | 17:31

  3. Re: Class Action Suit...

    Danijoo | 17:30

  4. Re: mit Linux...

    sg-1 | 17:26

  5. Re: Interesssanter Effekt - dieses Free2Play

    Welpenschutz | 17:25


  1. 17:27

  2. 12:53

  3. 12:14

  4. 11:07

  5. 09:01

  6. 18:40

  7. 17:30

  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