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. adesso AG, verschiedene Standorte
  2. über InterSearch Executive Consultants GmbH & Co. KG, Rhein-Main-Gebiet
  3. Daimler AG, Stuttgart
  4. Daimler AG, Leinfelden-Echterdingen


Anzeige
Blu-ray-Angebote
  1. (mehr als 2.500 reduzierte Titel)
  2. (u. a. Die Goonies, John Mick, Auf der Flucht, Last Man Standing)
  3. (u. a. Die Unfassbaren, Ghostbusters I & II, Jurassic World, Fast & Furious 7 Extended Version)

Folgen Sie uns
       


  1. Social Bots

    Furcht vor den neuen Wahlkampfmaschinen

  2. Fire OS 5.2.4.0 im Test

    Amazon vernetflixt die Fire-TV-Oberfläche

  3. 5K-Display

    LG Ultrafine 5K mit Verbindungsproblemen zum Mac

  4. IOS, TVOS, MacOS und WatchOS

    Apple aktualisiert seine Betriebssysteme

  5. Ohrhörer

    Apples Airpods verlieren bei Telefonaten die Verbindung

  6. Raumfahrt

    Chang'e 5 fliegt zum Mond und wieder zurück

  7. Android 7.0

    Sony stoppt Nougat-Update für bestimmte Xperia-Geräte

  8. Dark Souls 3 The Ringed City

    Mit gigantischem Drachenschild ans Ende der Welt

  9. HTTPS

    Weiterhin rund 200.000 Systeme für Heartbleed anfällig

  10. Verkehrsexperten

    Smartphone-Nutzung am Steuer soll strenger geahndet werden



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Shield TV (2017) im Test: Nvidias sonderbare Neuauflage
Shield TV (2017) im Test
Nvidias sonderbare Neuauflage
  1. Wayland Google erstellt Gamepad-Support für Android in Chrome OS
  2. Android Nougat Nvidia bringt Experience Upgrade 5.0 für Shield TV
  3. Nvidia Das Shield TV wird kleiner und kommt mit mehr Zubehör

Nintendo Switch im Hands on: Die Rückkehr der Fuchtel-Ritter
Nintendo Switch im Hands on
Die Rückkehr der Fuchtel-Ritter
  1. Nintendo Vorerst keine Videostreaming-Apps auf Switch
  2. Arms angespielt Besser boxen ohne echte Arme
  3. Nintendo Switch Eltern bekommen totale Kontrolle per App

Autonomes Fahren: Laserscanner für den Massenmarkt kommen
Autonomes Fahren
Laserscanner für den Massenmarkt kommen
  1. BMW Autonome Autos sollen mehr miteinander quatschen
  2. Nissan Leaf Autonome Elektroautos rollen ab Februar auf Londons Straßen
  3. Autonomes Fahren Neodriven fährt autonom wie Geohot

  1. Re: Nicht so schlimm

    opodeldox | 09:51

  2. Re: 24p?

    Dino13 | 09:51

  3. Re: Schade, dass es keinen Kommunismus in China gibt

    divStar | 09:50

  4. Design ist nicht alles

    dabbes | 09:50

  5. Re: schlecht recherchierter Artikel

    FaKre | 09:50


  1. 09:40

  2. 09:03

  3. 07:59

  4. 07:39

  5. 07:23

  6. 18:19

  7. 17:28

  8. 17:07


  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