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. Uvex Winter Holding GmbH & Co. KG, Fürth
  2. ENERCON GmbH, Aurich, Bremen
  3. GERMANIA Fluggesellschaft mbH, Berlin
  4. prevero AG, München


Anzeige
Top-Angebote
  1. 219,90€ + 7,98€ Versand (Vergleichspreis 269€)
  2. ab 179,99€

Folgen Sie uns
       


  1. Umfrage

    88 Prozent wollen bezahlbaren Breitbandanschluss

  2. Optimierungsprogramm

    Ccleaner-Malware sollte wohl Techkonzerne ausspionieren

  3. VPN

    Telekom startet ihr Weltnetz für Unternehmen

  4. Smartphone

    Apple könnte iPhone X verspätet ausliefern

  5. C't-Editorial kopiert

    Bundeswahlleiter stellt Strafanzeige gegen Brieffälscher

  6. Bundestagswahl 2017

    Viagra, Datenbankpasswörter und uralte Sicherheitslücken

  7. Auto

    Tesla will eigene Hardware für seine autonom fahrenden Autos

  8. Pipewire

    Fedora bekommt neues Multimedia-Framework

  9. Security

    Nest stellt komplette Alarmanlage vor

  10. Creators Update

    "Das zuverlässigste und sicherste Windows seit jeher"



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Anki Cozmo im Test: Katze gegen Roboter
Anki Cozmo im Test
Katze gegen Roboter
  1. Die Woche im Video Apple, Autos und ein grinsender Affe
  2. Anki Cozmo ausprobiert Niedlicher Programmieren lernen und spielen

Edge Computing: Randerscheinung mit zentraler Bedeutung
Edge Computing
Randerscheinung mit zentraler Bedeutung
  1. Software AG Cumulocity IoT bringt das Internet der Dinge für Einsteiger
  2. DDoS 30.000 Telnet-Zugänge für IoT-Geräte veröffentlicht
  3. Deutsche Telekom Narrowband-IoT-Servicepakete ab 200 Euro

Mobilestudio Pro 16 im Test: Wacom nennt 2,2-Kilogramm-Grafiktablet "mobil"
Mobilestudio Pro 16 im Test
Wacom nennt 2,2-Kilogramm-Grafiktablet "mobil"
  1. Wacom Vorschau auf Cintiq-Stift-Displays mit 32 und 24 Zoll

  1. Re: natürlich ist das sinnvoll

    Teilnehmer | 14:31

  2. Re: Es nervt!!!

    Cyber | 14:29

  3. Re: Mal was positives.

    HansiHinterseher | 14:29

  4. Re: Apple könnte das iPhone auch pünktlich...

    budweiser | 14:29

  5. Re: Wahlprogramm Die PARTEI

    Peace Р| 14:25


  1. 13:58

  2. 13:15

  3. 13:00

  4. 12:45

  5. 12:33

  6. 12:05

  7. 12:02

  8. 11:58


  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