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.


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. IT-Programmmanager/-in für komplexe Softwareeinführungsprojekte
    Dataport, Hamburg
  2. Ingenieur (m/w) Materialflusssimulation / Intralogistiksysteme
    BEUMER Maschinenfabrik GmbH & Co. KG, Beckum (Raum Münster, Dortmund, Bielefeld)
  3. Social Media Manager (m/w)
    Hubert Burda Media, Offenburg
  4. Senior Consultant Reporting (m/w)
    b.telligent, München und Zürich

 

Detailsuche


Folgen Sie uns
       


  1. MPAA und RIAA

    Film- und Musikindustrie nutzte Megaupload intensiv

  2. F-Secure

    David Hasselhoff spricht auf der Re:publica in Berlin

  3. "Leicht zu verdauen"

    SAP bietet Ratenkauf und kündigt vereinfachte GUI an

  4. Test The Elder Scrolls Online

    Skyrim meets Standard-MMORPG

  5. AMD-Vize Lisa Su

    Geringe Chancen für 20-Nanometer-GPUs von AMD für 2014

  6. Bärbel Höhn

    Smartphone-Hersteller zu Diebstahl-Sperre zwingen

  7. Taxi-App

    Uber will trotz Verbot in weitere deutsche Städte

  8. First-Person-Walker

    Wie viel Gameplay braucht ein Spiel?

  9. Finanzierungsrunde

    Startup Airbnb ist zehn Milliarden US-Dollar wert

  10. Spähaffäre

    Snowden erklärt seine Frage an Putin



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Windows 8.1 Update 1 im Test: Ein lohnenswertes Miniupdate
Windows 8.1 Update 1 im Test
Ein lohnenswertes Miniupdate

Microsoft geht wieder einen Schritt zurück in die Zukunft. Mit dem Update 1 baut der Konzern erneut Funktionen ein, die vor allem für Mausschubser gedacht sind. Wir haben uns das Miniupdate für Windows 8.1 pünktlich zur Veröffentlichung angesehen.

  1. Microsoft Installationsprobleme beim Windows 8.1 Update 1
  2. Windows 8.1 Update 1 Wieder mehr minimieren und schließen
  3. Microsoft Windows 8.1 Update 1 vorab verfügbar

Test Fifa Fußball-WM Brasilien 2014: Unkomplizierter Kick ins WM-Finale
Test Fifa Fußball-WM Brasilien 2014
Unkomplizierter Kick ins WM-Finale

Am 8. Juni 2014 bezieht die deutsche Nationalmannschaft ihr Trainingslager "Campo Bahia" in Brasilien, um einen Anlauf auf den Gewinn des WM-Pokals zu nehmen. Wer sichergehen will, dass es diesmal mit dem Titel klappt, kann zu Fifa Fußball-WM Brasilien 2014 greifen.

  1. Fifa WM 2014 Brasilien angespielt Mit Schweini & Co. nach Südamerika
  2. EA Sports Fifa kickt in Brasilien 2014

OpenSSL: Wichtige Fragen und Antworten zu Heartbleed
OpenSSL
Wichtige Fragen und Antworten zu Heartbleed

Der Heartbleed-Bug in OpenSSL dürfte wohl als eine der gravierendsten Sicherheitslücken aller Zeiten in die Geschichte eingehen. Wir haben die wichtigsten Infos zusammengefasst.

  1. OpenSSL OpenBSD mistet Code aus
  2. OpenSSL-Lücke Programmierer bezeichnet Heartbleed als Versehen
  3. OpenSSL-Bug Spuren von Heartbleed schon im November 2013

    •  / 
    Zum Artikel