Ajaxschmiede.de

Bewegte Bilder, sprich Animationen, sind seit jeher ein Hingucker auf jeder Homepage. In der Vergangenheit griffen Webentwickler bei einfachen Animationen auf bewegte GIF-Dateien zurück, die Einzelbilder beinhalten und zeitversetzt wiedergeben. Für aufwendigere Szenen musste auf das Adobes (ehemals Macromedia) Flash-Format auswischen werden.

Flash bietet sehr vielseitige Möglichkeiten und gilt seit jeher de facto als Standard für Webanimationen. Die Wiedergabe geschieht über den kostenfreien Flash-Player, der mittels Plugin in den Browser eingebunden wird. Jedoch handelt es sich bei Flash um eine proprietäre Software. Sie muss also durch teure Lizenzgebühren erworben werden um eigene Anwendungen in Flash zu erstellen.

Genau hier fehlte es bisher an geeigneten Alternativen.

Bereits vor über einem Jahr veröffentlichte Ilmari Heikkinen – wohl weitestgehend unbemerkt – seine Javascript-Bibliothek CakeJS (Canvas Animation Kit Experiment). CakeJS orientiert sich im Groben am „großen Bruder“ Flash.

Auf der Demo-Seite des Projekts finden sich zahlreiche kleine Beispielanimationen, die einen Vorgeschmack darauf geben, was mit CakeJS möglich ist. Das Highlight sind die beiden mit CakeJS erstellten Spiele Missle Fleet und Web Mega Pong. Beide Spiele lassen sich leicht per Tastatur steuern und machen ziemlich Spaß.

In der umfangreichen Dokumentation findet man eine gute Übersicht aller zur Verfügung stehenden Funktionen und Methoden samt Erklärungen.

CakeJS ist für Browser entwickelt wurden, die von Haus aus Canvas unterstützen und funktioniert mit Firefox (2+), Safari (3+) und Opera (9.6+). Grundsätzlich sollte es zwar möglich sein, dass CakeJS auch in Microsofts Internet Explorer mittels ExplorerCanvas läuft, jedoch scheint die Ausführungsgeschwindigkeit zu langsam und der Resourcenverbrauch zu hoch zu sein um die Animationen ordentlich darstellen zu können.

Vorgenommen hatte sich Heikkinen viel: Physikengine, Kollisionsabfrage und das Senken der CPU-Last, doch seit mehreren Monaten steht die Entwicklung still. Vielleicht kommt demnächst ja doch noch eine neuere Version…

Findige Internetnutzer haben ein neues Javascript-Spiel des jQuery-Gurus John Resig namens DeepLeap entdeckt.

Ziel des Spiels ist es, aus den zur Verfügung stehenden Buchstaben (englische) Wörter zu bilden, für die Punkte gibt. Manche Buchstaben bringen mehr, andere weniger Punkte. Bei längeren Wörter (mehr als 3 Buchstaben) kommen noch verschiedene Multiplikatoren hinzu, die zu einem gehörigen Punktezuwachs sorgen.

Das noch unfertige Spiel ist im Groben ein Mix aus Tetris und Scrabble. So fern man dem Englischen mächtig ist, macht das Spiel auch richtig Spaß. Achtung: Suchtgefahr!

Jacob Seidelin präsentierte mit DOMTRIS vor kurzem einen weiteren Spieleklassiker, den er in mit HTML, Javascript und Canvas als Browsergame umgesetzt hat.

DOMTRIS ist – wie der Name bereits suggestiert – ein Tetris-Klone und orientiert sich an der ersten, schnörkelfreien Tetris-Version. Extras sucht man vergebens.

Das Auslöschen einer Reihe bringt im ersten Level 30 Punkte ein. Mit höherer Levelzahl steigt auch zu erhaltende Punkteanzahl aber auch die Geschwindigkeit der herabfallenden Objekte nimmt zu.

Das gleichzeitige Auslöschen mehrerer Reihen bringt um einiges mehr Punkte. Neue Level beginnen ab 500, 1000, 2000, 5000, 10000, 25000 Punkten und so weiter.

Die Tetris-Steine sind nur farbige div-Elemente, deren Rahmen mit CSS formatiert worden. Bis auf den Internet Explorer, der mit dem Rahmentyp „outlet“ Probleme hat, sieht das Ergebnis in allen Browsern sehr gelungen aus.

Ein besonderes Feature bietet DOMTRIS dennoch: Der Spielstand kann durch Drücken der S-Taste gesichert werden. Anschließend erhält man eine URL, die beim Aufruf den Spielstand wiederherstellt.

Beim Drücken der Speichertaste erzeugt das Spiel aus dem aktuellen Zustand einen ziemlichen langen querystring (URL-Anhängsel), welcher via json-tinyurl extrem verkürzt wird.

Steuerung:

• Stein bewegen: Pfeiltasten links / rechts
• Stein drehen: Pfeiltaste oben / Leertaste
• Stein fallen lassen: Enter
• Spiel pausieren: P
• Spiel speichern: S
• Spiel starten: Leertaste

Wer mag kann nun loslegen und DOMTRIS spielen.

Kürzlich bin ich auf der bereits bekannten Seite nihilogic auf ein weiteres interessantes JS-Game namens Digg Attack gestoßen, das der Jacob Seidelin programmiert hat.

Die Idee zu diesem coolen Spiel hatte Seidelin bereits vor langer Zeit, doch erst kürzlich gelang es ihm, diese Idee eine benutzbar Anwendung umzusetzen.

Die Zielsetzung bestand darin ein kleines Game zu entwickeln, das von einer externen Datenquelle beeinflusst wird. Dabei stieß er auf die Digg-API, die zum einen unterschiedliche Daten und zum anderen einen beständigen Datenfluß von Daten bereitstellt.

Desweiteren sollte die sich die Anwendung „flüssig“ anfühlen und dem Vergleich mit ähnlichen Flash-Games standhalten können, selbst im fortgeschrittenden Spielverlauf, wenn eine Vielzahl beweglicher Objekte über die Spielfläche toben.

Bis auf den Vortex Sprite (Wurmloch-Effekt) und den vorgerenderten Text, werden alle Grafiken zur Laufzeit mittels Canvas erzeugt.

Mit Ausnahme der Hintergrundmusik, wurde für Digg Attack nur Canvas und reguläres DHTML verwendet. Zusätzliche Soundeffekte wurden auf Grund etlichen Schwierigkeiten deaktiviert.

Der Benutzer steuert in dem Spiel eine Schar von Helden – dargestellt durch Blöcke – durch den virtuellen, begrenzten 2D-Raum. Dabei erscheinen verschiedene, in Größe und Geschwindigkeit variable Gegnertypen, die es auf des Spielers Figuren abgesehen haben.

Ingesamt existieren derzeit 12 Level, die es zu überstehen geht – was bei einer unendlichen Anzahl von Leben kein Problem sein sollte. Wenn man eine bestimmte Zeit in einem Level überlebt hat, erreicht man den nächsten.

Zudem gibt etliche Boni-Gegenstände.

Ich wünsche allen viel Spaß beim Probieren!

Kris, Betreiber des Blogs digitalinsane.com, stellte vor kurzem eine Yahoo! User Interface-Umsetzung des Spieleklassikers Pacman vor.

Wie Kris selbst eingesteht, ist das Spiel nicht perfekt, der Code noch optimierbar und enthält noch etliche Fehler. Dafür läuft das Game jedoch auf allen modernen Browsern und kommt dabei ohne Flash aus.

Die künstliche Intelligenz der vier Geister, die den Spieler erwischen wollen, ist ebenso noch nicht ausgereift. So kann es vorkommen, dass sie „davonlaufen“ sobald sie Pacman gefunden haben.

Gestartet wird das Spiel mit Drücken der Enter-Taste. Mittels Pfeilstasten bewegt man die Spielfigur von Level zu Level durch die Spielwelt.

Alle Freunde von Nostalgiespiele werden ihre Freude daran haben. Viel Spaß beim Spielen.

Matt Hackett hatte sich vor einer Woche an die Arbeit gemacht, mit „Spacius! A Space Adventure“ einen weiteren Klassiker der Spielegeschichte im „Javascript-Reich“ auferstehen zu lassen.

Im Gegensatz zu anderen Spieleumsetzungen, über die wir bereits berichteten, verwendete Hackett kein Canvas sondern einfach nur div-Elemente, wodurch es nicht nur in Firefox, Opera und Safari sondern auch in Microsofts Internet Explorer (6/7) einwandfrei läuft.

Die musikalische Untermalung geschieht mittels des SoundManagers 2, einem Script, das auf Adobe Flash-Basis die fehlende Audioschnittstelle für Javascript versucht nachzuliefern.

Mit der Leertaste wird sowohl das Spiel gestartet als auch im Game selber geschossen. Die Pfeiltasten dienen zum Bewegen des Gleiters im virtuellen Weltraum.

Wer nun Lust hat in die unendlichen Weiten einzutauchen, kann dies in der normalen oder doppelt so großen 800×600-Pixel-Variante tun.

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.

Um seine Fähigkeit im Umgang mit MooTools zu verbessern, begann Markus Inger an einer BeJeweled-Umsetzung basierend auf dieser Javascript-Bibliothek zu schreiben.

Ziel des Spiels, das er BeSlimed getauft hat, ist es, wie im Original, durch Vertauschen benachbarter Blöcke in einer vorgegeben Zeit möglichst viele Punkte zu erzielen.

Um Punkte zu bekommen, müssen sich mindestens 3 Blöcke mit gleichem Motiv in einer Reihe (horizontal oder vertikal) befinden.Vertauscht werden darf sowohl von oben nach unten und links nach rechts (natürlich auch umgekehrt).

Mit steigender Levelzahl nimmt die Zahl der verschiedenen „Monster“ zu, wodurch auch der Schwierigkeitsgrad nach oben geht.

Inger will nach der Fertigstellung des Spiels an einer Variante mit größeren Motiven arbeiten. Vorher müssen jedoch noch einige Fehler im Skript behoben werden. Wer möchte kann sich gern an der Weiterentwicklung von BeSlimed beteiligen.

Und nun: Ab zum Spiel und viel Spaß.

Jacob Seidelin kann einfach nicht genug von Mario bekommen. Nachdem er bereits ein Klempner-Abenteuer in Javascript mit Hilfe von Canvas umgesetzt hat, machte er sich nun daran, das bekannte Rennspiel Super Mario Kart zu übertragen.

Wie bereits in seinen vorherigen Spiele-Implementierungen benutzte Seidelin auch dieses Mal zur visuellen Darstellung vorrangig das Canvas-Element, das von Firefox (2 und 3), Opera (9.27), Safari (3.1.1) und den nightly builds des WebKit-Browsers, jedoch nicht von Microsofts Internet Explorer, unterstützt wird.

Da es sich abermals um eine Demo handelt, die nur andeutet, was möglich ist, muss man sich mit einigen Einschränkungen zufrieden geben. So gibt es keines der witzigen Items, keinen Rundenzähler, keine Zeitangabe und auch kein Ziel. Man kann also ewig seine Runden drehen.

Die Kollisionsabfrage ist sehr einfach gehalten. Als Hindernis gelten nur die Map-Grenzen und die farbigen Blöcken in der Karte. Gegnerische Karts sind „Luft“ – man kann durch sie hindurchfahren. Wasser und Sand stellen eben so wenig ein Problem für den Spieler dar.

Vorerst können nur drei verschiedene Fahrer (Mario, Luigi und Prinzessin Peach) und zwei unterschiedliche Strecken (Mario Circuit 1 und Donut Plains 1) ausgewählt werden.

Die Künstliche Intelligenz der anderen Fahrer wurde auch nur grundlegend integriert. Dennoch arbeitet sie zufriedenstellend.

Vor dem Spielstart kann man einige Einstellungen anpassen. So lässt sich die Bildgröße, die Bildqualität und der Render-Modus wählen. Wobei ich nur den standardmäßigen „Single Canvas“-Modus empfehlen kann, da die beim „Per-line Canvas“-Modus in jeweils einzelne Canvas-Elemente aufgesplitteten horizontalen Linien sehr viel Rechenleistung beanspruchen, wodurch das Spiel bei mir nicht mehr flüssig lief.

Die Steuerung des Karts erfolgt über die Pfeiltasten.

Genug der Worte, und nun: freie Fahrt mit Mario Kart.