Ajaxschmiede.de

Der Portugiese António Afonso lässt einen alten Spieleklassiker als Javascript-Spiel im Browser aufleben. Die Rede ist von Sierra’s witzigen Erotik-Adventure Leisure Suit Larry in the Land of the Lounge Lizards aus dem Jahre 1987 (1991 VGA-Neuauflage).

Um dieses Stück PC-Spielegeschichte browserseitig umzusetzen, machte sich Afonso zuerst daran die Spieleengine AGI (Adventure Game Interpreter) in Javascript zu portieren. Die Engine dient sowohl zum Steuern des Spielecharakters Larry Laffer mittels Pfeiltasten als auch zum Ausführen der in die Konsole eingegebenen Befehle.

Die Spielegrafik wurde in png-Dateien exportiert. Alles weitere wird vom JS-Interpreter mit Hilfe einer XML-Datei übergeben. Die Logik wurde in Javascript-Code konvertiert, wobei sich einige Abschnitte, wie Afonso meint, nur schwer übertragen ließen und weiterer Optimierung bedürfen.

Die JS-Implementierung ist weder vollständig und noch absolut stabil. Einige Features des Originalspiels fehlen und manchmal stürzt der Browser einfach ab oder bringt kryptische Fehlermeldungen

Extrem nervig erscheint mir der Jugendschutz des Spiels, der darin besteht 5 Fragen zu beantworten, die nur Erwachsene wissen (könn(t)en). Ich muss zugeben, dass ich nur 1/4 der dort gestelten Fragen ohne irgendwo nachzuschauen richtig beantworten konnte.

Um häufige Wiederholungen zu vermeiden, worden reichlich (>100) Fragen integriert. Für Nicht-Amerikaner führt dies leicht zu Frust. Zum Glück kann man mit der Tastenkombination ALT+X den „Schutzmechanismus“ überspringen.

Um es allen etwas leichter zu machen, die mit dem Spiel und dessen Konsolenbefehlen nicht vertraut sind, will ich hier eine (womöglich unvollständige) Auflistung mit auf dem Weg geben:

• ASK, BEAT, BITE, BRIBE, BURN, BUY, CALL, CARRY, CHANGE, CLEAN, CLIMB, CLOSE, CRAWL, DANCE, DIVE, DRINK, EAT, ENTER, ESCAPE, EXIT, FACE, FIX, FLIRT, FRESH,
• GET, GIVE, GRIP, HEAR, HELLO, HELP, HIT, HOLD, HUG, JUMP, KICK, KISS, KNOCK, LAUGH, LEAP, LEAVE, LET, LIFT, LIGHT, LISTEN, LOAD, LOCK, LOOK, MOVE,
• NAME, NORMAL, OPEN, ORDER, PAY, PLAY, POCKET, PRESENT, PULL, PUNCH, PUSH, READ, REST, RUN, SEARCH, SEE, SHAKE, SHOUT, SHOW, SHMELL, SPEAK,
• SPEND, SPILL, SPRAY, STEAL, SWING, TAKE, TALK, TASTE, TELL, THANKS, THROW, TOUCH, TURN, UNLOCK, WAIT, WALK, WAVE, WINK

Derzeit hat Afonso die Arbeiten Larry unterbrochen um sich auf voll und ganz auf seinen Studienabschluß zu konzentrieren. Anschließend will er sich den Bugs widmen.

Ich halte die Umsetzung für eine sehr coole Sache und für sehr innovativ. Mittelfristig werden, meiner Meinung nach, einige interessante Javascript basierende Spielengines das Licht der Onlinewelt erblicken. Wir sehen erleben gerade erst deren Geburtswehen, die erahnen lassen, was in Zukunft möglich wird.

Hier gehts zum Spieleklassiker Larry 1.

Der Däne Jacob Seidelin, dessen Javascript-Spieleumsetungen schon mehrmals Thema auf unserer Seite waren, spendierte seinem Schachspiel vergangene Woche die Steuerung per Maus. Bisher war es nur möglich, die Figuren mittels der Tasten 2,4,6, und 8 im Ziffernblock zu bewegen und mit 5 auszuwählen.

Das komplette Spielfeld ist in 3D gehalten und lässt sich beliebig drehen. Die grafische Darstellung übernimmt das Canvas-Element, wobei jede Figur in ein separates Canvas-Element gezeichnet wird. Somit muss nach jedem Zug nicht das kompette Schachbrett neu gerendert werden und spart somit Rechenzeit.

Da es sich auch hier legdiglich um eine Demonstration und kein vollständiges Spiel handelt, gibt es einige Einschränkungen, die vielleicht später einmal aufgehoben werden:

• untexturierte Grafiken
• kein Computergegner (KI) – man steuert beide Seiten
• keine Spezialzüge
• keine grafische Oberfläche

Da der Internet Explorer von Haus mit Canvas nichts anzufangen weiß und auch die excanvas-Abhilfe keine Unterstützung von mehreren Canvas-Elementen bietet, läuft die Demonstration nur auf den Alternativbrowsern Firefox (2+), Opera (9+) und Webkit / Safari 3.

Hier gehts zum Spiel.

Nachdem vor fast 6 Monaten die Betaversion des Javascript-Frameworks MooTools veröffentlicht wurde, wurde vergangene Woche nun die finale Version zum Download freigegeben.

Zu den Hauptneuerungen zählen:

• eine völlig überarbeitete API
• eine übersichtlichere Dokumentation
• bessere fx-Funktionen, einschließlich neuer generic morph– und tween-Effekte
• echte Hash-Objekte
• Swiff-Objekt zum Einbinden von Flash-Inhalten
• elementgebundene Metadaten-Speicherung

MooTools 1.2 unterstützt alle gängigen Browser (Safari 2+, Internet Explorer 6+, Firefox 2+, Opera 9+) und bietet einen ähnlichen Funktionsumfang wie jQuery.

Wer mehr erfahren möchte, schaue sich die neue Dokumentation und die Demos an.

Nach längere Entwicklungszeit und etlichen Vorabversionen erschien vor wenigen Tagen die nächste Hauptversion 9.5 des Opera-Browsers auf die die Programmierer wohl mit Recht stolz sein können. Die Liste der neuen Features hört sich interessant an und auch die vielen Performance-Verbesserungen versprechen positive Überraschungen.

Mit Opera Link haben die Entwickler nun ein Gegenstück zu Mozillas Weave-Projekt geschaffen. Beide Features ermöglichen es, Lesezeichen, Notizen und einzelne Einstellungen online mittels eines Accounts abzuspeichern und von jedem beliebigen Rechner aus zu nutzen.

Nach dem Eingeben eines Begriffes in die Adresszeile schaut Opera 9.5 nun automatisch in die Liste der besuchten Websites nach diesem Begriff, so dass man leichter zu bereits besuchten Internetseiten findet.

In Bezug auf Webstandards flossen jedoch noch nicht alle Änderungen vergangener Nightly Builds in die Version 9.5 ein, wodurch ein erfolgreiches Bestehen des Acid3-Tests nicht erreicht wird.

Neben zahlreichen Detailverbesserungen in den Bereichen Javascript, CSS und SVG wird ab sofort auch MathML zur Darstellung mathematischer Formeln unterstützt.

Von der Firefox-Erweiterung Firebug abgeschaut, wurde die Möglichkeit von Opera aus Webanwendungen mittels Opera Dragonfly, das sich noch in der Alpha-Phase befindet, zu debuggen.

Heruntergeladen werden kann der Browser im Download-Bereich der Opera-Homepage.

Jacob Seidelin hat sein Canvas-Javascript-Bildbearbeitungstool Pixastic, über das wir bereits Anfang des Monats berichteten, einem kleinen Update unterworfen.

So lieferte Seidelin nun die versprochene Zoom-Funktion nach. Damit wird es nun auch möglich größere Bilder zu bearbeiten, so dass die maximale Dateigröße auf 4 MB und die maximale Auflösung auf 2048×2048 Pixel erhöht wurde. Gezoomt wird – wie üblich – mit dem Mausrad, alternativ auch über die Tasten Z und X.

Der Quelltext der aufgerufenen Aktion (Sättigung, usw) lässt sich nun mittels Klick auf die gewünschte Funktion bei gleichzeitig gedrückter Shift-Taste in einem separaten Dialogfenster anzeigen

Das Laden von Bilder über die URL funktioniert weiterhin auf Grund von Servereinschränkungen nicht. Jedoch ist es nun möglich Bilder von Flickr, Photobucket, Picasa Web und Facebook zu laden.

Nun ist es endlich raus: Die 3. Generation des Firefox startet am 17. Juni. Mozilla setzt dieses Datum gezielt in Szene und ruft zum Download Day 2008 auf. Ziel ist es den Guinness Weltrekord an Downloads einer Datei innerhalb von 24 Stunden zu brechen.

Im Mittelpunkt des Firefox 3 stehen die drastische Geschwindigkeitserhöhung beim Ausführen von Javascript und das effizienter Speichermanagement, wodurch der neue Mozilla-Sprößling nur noch ein Drittel an Arbeitsspeicher im Vergleich zum Vorgänger benötigt. Desweiteren bringt FF3 gesteigerte Sicherheitsfeatures und eine einfachere und intuitivere Bedienung mit sich.

Der finale Firefox 3 wird sich kaum von den beiden zuletzten erschienen Release Candidates (Vorabversionen) unterscheiden.

Mit der vor wenigen Tagen vorgestellten jQuery-Version 1.2.6 steigerte das Entwicklerteam um John Resig die Ausführungsgeschwindigkeit ihrer Javascript-Bibliothek, über die wir bereits vor einem halben Jahr zum ersten Mal berichteten, vor allem im Bereich Event-Handlung enorm. Zudem wurden einige Feature überholt beziehungsweise erweitert.

Akribisch haben die Entwickler ihren bestehenden Code und dessen Verwendung in der Praxis analysiert und nach Schwachstellen und Bremsen gesucht. Anschließend wurden gezielt die Abschnitte beschleunigt und optimiert, die am häufigsten aufgerufen werden. Das Ergebnis kann sich sehen lassen.

Die Performancegewinne sehen im Detail wie folgt aus:

• Event-Handling – 103% schneller (vor allem spürbar bei besonderen Events wie Drag’n’Drop)
• CSS-Selektoren – 13% schneller
• offset()-Methode – 21% schneller
• css()-Methode – 25% schneller

Das bisherige dimensions-Plugin ist in 1.2.6er Version in den jQuery-Kern gewandert. Dadurch stehen standardmäßig einheitliche, browserübergreifende Methoden zur Bestimmung von der Elementposition, der inneren Breite und Höhe sowie der äußeren Breite und Höhe eines Elements zur Verfügung.

Besonders möchte ich noch die Änderung hervorheben, dass die toggle-Funktion es nun erlaubt, zwischen mehr als 2 Funktionsaufrufen beim Klicken durchzuschalten.

Ein Code-Beispiel mit drei nacheinanderfolgenden Aufrufen:

$("div").toggle(function(){
$(this).removeClass("three").addClass("one");
}, function(){
$(this).removeClass("one").addClass("two");
}, function(){
$(this).removeClass("two").addClass("three");
});

jQuery 1.2.6 steht in den gewohnten Varianten unkomprimiert, gepackt und minified zum Download bereit.

Wer kennt sie nicht, die nervigen CSS- und Javascript-Probleme der verschiedenen Versionen von Microsofts Internet Explorer, die einen zur Verzweiflung bringen?

Bisher gab es für Web-Entwickler und -Designer meist nur dem Weg über virtuelle oder zweite Betriebssysteme um das Erscheinungsbild und Scriptverhalten der frisch erstellten Website in den unterschiedlichen IE-Generationen zu testen.

Aber es geht auch einfacher: Inzwischen existieren 2 nützliche Tools, die es ermöglichen mehrere Versionen des Microsoft’schen Browsers gleichzeitig auf einem System zu betreiben.

MultipleIE

Schon eine Art Klassiker ist das seit über 2 Jahre erhältliche, kostenlose Programm MultipleIE der Firma TredoSoft. Multiple IE, das jedoch nicht unter Windows Vista funktioniert, bietet beim Setup die Möglichkeit zwischen den zu installierenden IE-Versionen selber frei zu wählen. Zur Wahl stehen:

• IE3
• IE4.01
• IE5
• IE5.5
• IE6

Bei MIE werden die einzelnen Versionen im Standalone Mode ausgeführt und überschreiben damit keine bestehenden Dateien. Möglich wird dies durch die in Windows 2000 (und Nachfolgern) eingeführte Methode namens DLL redirection, die es ermöglicht mehrere DLL-Dateien mit dem selben Namen nur unterschiedlichen Versionsnummern gleichzeitig auf einem System zu haben, ohne dass es zu Konflikten kommt.

IETester

Noch sehr jung ist hingegen das Tool IETester, das bisher nur als Alpha-Release in der Version 0.2.2 erschienen ist, jedoch bereits jetzt einen positiven Eindruck hinterlässt. Die verschiedenen IE-Versionen werden hierbei in eigenen Tabs geöffnet.

IETester läuft sowohl unter XP als auch Vista, bietet jedoch nur relativ aktuelle IE-Engines ab Version 5.5 an. Im Einzelnen wären dies:

• IE5.5
• IE6
• IE7
• IE8 Beta1

Auf Grund des Alpha-Stadiums funktionieren jedoch etliche Features noch nicht und der interessierte Nutzer muss sich mit Einschränkungen bezüglich der Handhabung und Stabilität zufriedengeben. Dennoch sehe ich sehr viel Potenzial in dem Programm.

Durch ein privates Projekt, in dem es nötig wurde, einige moderne CSS-Selektoren der Art input[type=text] für nicht so fitte Browser wie den Internet Explorer per Javascript nachzubauen, stieß ich auf das seit jeher bestehende Problem der Browsererkennung.

Da die Werte der Useragent-Abfrage von Client zu Client sehr unterschiedlich gehandhabt werden und in den meisten Fällen auch leicht manipuliert werden können, sollte man darauf nicht vertrauen und stattdessen den Weg über die Abfrage nach verfügbaren Methoden gehen.

Ich gehe davon aus, dass nur die wenige Javascript-Programmierer ein detailiertes Wissen über die konkreten Besonderheiten eines jeden Browsers und dessen Versionen besitzten. Ich gehöre auf jeden Fall nicht dazu und suchte deshalb eine Übersicht, nach der ich meine Javascript-seitige Browserweiche aufbauen kann.

Dabei fand ich die sehr umfangreiche und vielseitige Homepage des Diplom-Designers Kristof Lipfert, der in einem gesonderten Bereich speziell auf die unterschiedlich implementierten Javascript-Funktionen der geläufigsten Browser eingeht und diese tabellarisch darstellt.

Wie die Kollegen von InfoWorld.com berichten, sprach der abgetretene Microsoft-Guru Bill Gates anläßlich der derzeit in Orlando (Florida) stattfindenden TechEd Developers Conference unter anderem über die Entwicklung des hauseigenen Browsers Internet Explorer.

So sieht Gates den IE als Aushängeschild Microsofts in Sachen Web-Technologien. Es gesteht jedoch ein, dass Mozillas Firefox dem Internet Explorer schwer zusetzte, aber letztlich dazu beitrug die Entwicklung des MS-Browsers voranzutreiben und das eigene Produkt ingesamt innovativer zu gestalten.

Außerdem kündigt Gates an, dass die zweite Beta des kommenden IE8 noch im August diesen Jahres erscheinen wird. Welche Überraschungen und Features Microsoft in den neuen Sprößling hat einfließen lassen, wurde leider nicht verraten.