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.

Anzeige

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.

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

frägentuh 16. Aug 2006

Schaut mal auf http://www.wolf5k.com/ Da gibts ein Wolfenstein3D-Umsetzung für...

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...

Kommentieren


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

  1. Manager Entwicklung Internet / Interactive (m/w)
    OSRAM GmbH, München
  2. Controller International SAP Solutions (m/w)
    Alfred Kärcher GmbH & Co. KG, Winnenden
  3. IT-Security Engineer (m/w)
    Haufe Gruppe, Freiburg im Breisgau
  4. SAP Consultant (m/w) Schwerpunkt Support
    Fresenius Netcare GmbH, St. Wendel

Detailsuche



Anzeige
Hardware-Angebote
  1. MSI Mainboard-Cashback-Aktion
    bis zu 50€ Cashback
  2. NEU: Optische Maus mit 1.600 dpi
    1,99€ inkl. Versand
  3. TIPP: PCGH i5-6600K Overclocking Aufrüst Kit @ 4.5 GHz
    nur 649,90€

Weitere Angebote


Folgen Sie uns
       


  1. Ransomware

    Sächsischer Verfassungsschutz wurde verschlüsselt

  2. Kabelnetzbetreiber

    Angeblicher 300-Millionen-Deal zwischen Telekom und Kabel BW

  3. Fathom Neural Compute Stick

    Movidius packt Deep Learning in einen USB-Stick

  4. Das Flüstern der Alten Götter im Test

    Düstere Evolution

  5. Urheberrecht

    Ein Anwalt, der klingonisch spricht

  6. id Software

    Dauertod in Doom

  7. Nach Motorola

    Rick Osterloh soll neue Hardware-Abteilung von Google leiten

  8. Agon AG271QX

    Erster 1440p-Monitor mit 30-Hz-Freesync-Untergrenze

  9. Alienation im Test

    Mit zwei Analogsticks gegen viele Außerirdische

  10. Das Internet der Menschen

    "Industrie 4.0 verbannt Menschen nicht aus Werkhallen"



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Weltraumbahnhöfe: Die Raketen vom Schwarzen Drachenfluss und anderswo
Weltraumbahnhöfe
Die Raketen vom Schwarzen Drachenfluss und anderswo
  1. Raumfahrt Erste Rakete in Wostotschny gestartet
  2. Raumfahrt Embryonen wachsen im All
  3. Raumfahrt Erdrutsch auf Ceres

LG Minibeam im Test: Wie ein Beamer mein Begleiter wurde
LG Minibeam im Test
Wie ein Beamer mein Begleiter wurde
  1. Huawei P9 im Test Das Schwarz-Weiß-Smartphone
  2. HTC Vive im Test Zwei mal zwei Meter sind mehr, als man denkt
  3. Panono im Test Eine runde Sache mit ein paar Dellen

HTC 10 im Test: Seht her, ich bin ein gutes Smartphone!
HTC 10 im Test
Seht her, ich bin ein gutes Smartphone!
  1. HTC 10 im Hands on HTCs neues Topmodell erhält wieder eine Ultrapixel-Kamera

  1. Grabbelkiste

    eMaze | 01:26

  2. 2Tflops

    honna1612 | 01:26

  3. naja...

    Rulf | 01:12

  4. einmal dilettant...

    Rulf | 01:11

  5. Hahaha

    tomatentee | 01:03


  1. 00:05

  2. 19:51

  3. 18:59

  4. 17:43

  5. 17:11

  6. 16:22

  7. 16:15

  8. 15:03


  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