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. Hochschule für Gestaltung Schwäbisch Gmünd, Schwäbisch Gmünd
  2. Dataport, Hamburg, Altenholz bei Kiel
  3. Aareon Deutschland GmbH, Leipzig, Dortmund
  4. T-Systems International GmbH, Berlin


Anzeige
Blu-ray-Angebote
  1. 49,99€ mit Vorbesteller-Preisgarantie
  2. (u. a. Der Marsianer 8,79€, Blade Runner 8,97€, Interstellar 8,74€, X-Men Apocalypse 8,79€)

Folgen Sie uns
       


  1. Interview auf Youtube

    Merkel verteidigt Ziel von 1 Million Elektroautos bis 2020

  2. Ransomware

    Not-Petya-Angriff kostet Maersk 200 Millionen US-Dollar

  3. Spielebranche

    Mikrotransaktionen boomen zulasten der Kaufspiele

  4. Autonomes Fahren

    Fiat Chrysler kooperiert mit BMW und Intel

  5. Auto

    Toyota will Fahrzeugsäulen unsichtbar machen

  6. Amazon Channels

    Prime-Kunden erhalten Fußball-Bundesliga für 5 Euro im Monat

  7. Dex-Bytecode

    Google zeigt Vorschau auf neuen Android-Compiler

  8. Prozessor

    Intels Ice Lake wird in 10+ nm gefertigt

  9. Callya Flex

    Vodafone eifert dem Congstar-Prepaid-Tarif nach

  10. Datenbank

    MongoDB bereitet offenbar Börsengang vor



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Breitbandausbau auf Helgoland: Deutschlands Hochseefelsen bekommt nur Vectoring
Breitbandausbau auf Helgoland
Deutschlands Hochseefelsen bekommt nur Vectoring
  1. Provider Dreamhost will keine Daten von Trump-Gegnern herausgeben
  2. Home Sharing Airbnb wehrt sich gegen Vorwürfe zu Großanbietern
  3. Illegale Waffen Migrantenschreck gibt es wieder - jetzt als Betrug

Google Home auf Deutsch im Test: "Tut mir leid, ich verstehe das nicht"
Google Home auf Deutsch im Test
"Tut mir leid, ich verstehe das nicht"
  1. Kompatibilität mit Sprachassistenten Trådfri-Update kommt erst im Herbst
  2. Smarte Lampen Ikeas Trådfri wird kompatibel mit Echo, Home und Homekit
  3. Lautsprecher-Assistent Google Home ab 8. August 2017 in Deutschland erhältlich

Mercedes S-Klasse im Test: Das selbstfahrende Auto ist schon sehr nahe
Mercedes S-Klasse im Test
Das selbstfahrende Auto ist schon sehr nahe
  1. 3M Verkehrsschilder informieren autonom fahrende Autos
  2. Waymo Autonomes Auto zerstört sich beim Unfall mit Fußgängern
  3. Mobileye Intel will 100 autonom fahrende Autos auf die Straßen lassen

  1. Metamaterialien

    ecv | 23:32

  2. Apple-Fehler

    Beeblox | 23:29

  3. Macht die i7 CPU da überhaupt Sinn?

    Tet | 23:25

  4. Re: Also hinter der Uni steht dann

    Suppenpulver | 23:23

  5. Re: 8 Milliarden Diesel-Subventionen pro Jahr

    GenXRoad | 23:22


  1. 16:57

  2. 16:25

  3. 16:15

  4. 15:32

  5. 15:30

  6. 15:02

  7. 14:49

  8. 13:50


  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