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. ARRI Media GmbH, München
  2. Bahlsen GmbH & Co. KG, Hannover
  3. ORBIT Gesellschaft für Applikations- und Informationssysteme mbH, Darmstadt
  4. CSS Computer Software Service Franz Schneider GmbH, Heilbronn, Künzelsau


Anzeige
Top-Angebote
  1. (heute u. a. Samsung Galaxy S8 499,00€, PS4 inkl. FIFA 18 und 2 Controllern 279,00€)
  2. (heute u. a. reduzierte PS4-Bundles, Videospiele und Fernseher. Weitere Aktionen u. a. Echo Plus...

Folgen Sie uns
       


  1. SuperSignal

    Vodafone Deutschland schaltet Smart-Cells ab

  2. Top Gun 3D

    Mit VR-Headset kostenlos ins Kino

  3. Übernahme

    Marvell kauft Cavium für 6 Milliarden US-Dollar

  4. Wilhelm.tel

    Weiterer Kabelnetzbetreiber schaltet Analog-TV ab

  5. Grafiktreiber

    AMDs Display-Code in Linux-Kernel aufgenommen

  6. Oneplus 5T im Test

    Praktische Änderungen ohne Preiserhöhung

  7. Vito, Sprinter, Citan

    Mercedes bringt Lieferwagen als Elektrofahrzeuge heraus

  8. JoltandBleed

    Oracle veröffentlicht Notfallpatch für Universitäts-Software

  9. Medion Akoya P56000

    Aldi-PC mit Ryzen 5 und RX 560D kostet 600 Euro

  10. The Update Aquatic

    Minecraft bekommt Klötzchendelfine



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Windows 10 Version 1709 im Kurztest: Ein bisschen Kontaktpflege
Windows 10 Version 1709 im Kurztest
Ein bisschen Kontaktpflege
  1. Windows 10 Microsoft stellt Sicherheitsrichtlinien für Windows-PCs auf
  2. Fall Creators Update Microsoft will neues Windows 10 schneller verteilen
  3. Windows 10 Microsoft verteilt Fall Creators Update

Orbital Sciences: Vom Aufstieg und Niedergang eines Raketenbauers
Orbital Sciences
Vom Aufstieg und Niedergang eines Raketenbauers
  1. Astronomie Erster interstellarer Komet entdeckt
  2. Jaxa Japanische Forscher finden riesige Höhle im Mond
  3. Nasa und Roskosmos Gemeinsam stolpern sie zum Mond

Ideenzug: Der Nahverkehr soll cool werden
Ideenzug
Der Nahverkehr soll cool werden
  1. 3D-Printing Neues Druckverfahren sorgt für bruchfesteren Stahl
  2. Autonomes Fahren Bahn startet selbstfahrende Buslinie in Bayern
  3. Mobilitätsprojekt Ioki Bahn macht Sammeltaxi zum autonomen On-Demand-Shuttle

  1. Verschenke meinen Oneplus 5T Invite mit 20¤ Rabatt

    TechnikMax | 02:06

  2. Re: Immer noch nicht hoehenverstellbar

    packansack | 02:02

  3. Das Problem sind die Privatsender!

    zuschauer | 01:32

  4. Re: Auf MacOS unbrauchbar

    Takkun Cat | 01:11

  5. Laute Musik im Video überflüssig, stört und nervt

    zuschauer | 01:10


  1. 17:26

  2. 17:02

  3. 16:21

  4. 15:59

  5. 15:28

  6. 15:00

  7. 13:46

  8. 12: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