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. Mitarbeiter (m/w) Produktionssteu­erung
    Koch, Neff & Volckmar GmbH, Stuttgart
  2. System Architekt (m/w) Exchange / Microsoft Windows
    DATAGROUP Köln GmbH, Köln
  3. Mitarbeiter (m/w) Software - Support und Lizenzmanagement
    REALTECH AG, Walldorf
  4. Leiter Systemsteuerung (m/w)
    Sparkasse Herford, Herford

 

Detailsuche


Folgen Sie uns
       


  1. Leistungsschutzrecht

    Kartellamt weist Beschwerde gegen Google zurück

  2. Projekt DeLorean

    Microsofts Game-Streaming rechnet 250 ms Latenz weg

  3. Digitale Agenda

    Bitkom fordert komplette Nutzung des 700-Megahertz-Bandes

  4. Watch Dogs

    Gezielt Freunde hacken

  5. Test Rules

    Gehirntraining für Fortgeschrittene

  6. Transformer Pad TF303

    Neues Asus-Tablet mit Full-HD-Display und Tastatur-Dock

  7. Kalifornien im Rechner

    Google wollte fahrerlose Autos nur in virtueller Welt testen

  8. Affen-Selfie

    US-Behörde spricht Tieren Urheberrechte ab

  9. LG PW700

    LED-Projektor funkt Ton per Bluetooth an Lautsprecher

  10. Formel E

    Motorsport zum Zuhören



Haben wir etwas übersehen?

E-Mail an news@golem.de



Banana Pi im Test: Bananen sind keine Himbeeren
Banana Pi im Test
Bananen sind keine Himbeeren
  1. Eric Anholt Freier Grafiktreiber für Raspberry Pi von Broadcom
  2. Raspberry Pi Compute Module ist lieferbar
  3. PiUSV im Test Raspberry Pi per USV sauber herunterfahren

Rogue angespielt: Das etwas bösere Assassin's Creed
Rogue angespielt
Das etwas bösere Assassin's Creed
  1. Ubisoft Abkehr von Xbox 360 und PS3 ab 2015
  2. Assassin's Creed Rogue Als Templer nach New York
  3. Assassin's Creed Unity Gameplay und Geschichte

Alternatives Android im Überblick: Viele Wege führen nach ROM
Alternatives Android im Überblick
Viele Wege führen nach ROM
  1. Paranoid Android Zweite Betaversion von PA 4.5 veröffentlicht
  2. Cyanogenmod CM11s Oneplus verteilt Android 4.4.4 für das One
  3. Android-x86 Neue stabile Version des Android-ROMs für PCs veröffentlicht

    •  / 
    Zum Artikel