Wie vor kurzem erwähnt, arbeite ich in meiner Freizeit an einem kleinen Spiel in Form eines Greasemonkey Plugins, in dem man sich über die Webseiten bewegt, Geld sammelt und tolle Sachen bauen kann.
Alle die mit dem kleinen Greasemonkey Plugin surfen, sehen sämtliche “Gebäude” der anderen Spieler und so wird das Web doch etwas lebendiger

Der zweite Teaser ist inzwischen mit Ton!

Bisher gibts folgende Features:
- ein “ich war hier” Schild auf dem einfach nur der Name steht
- die Mine, läuft jemand drüber verliert man 10% des Geldes an den Minenleger
- der Teleporter, bekommt beim Bauen eine URL. läuft man rein, wird man auf die entsprechende Seite “gebeamt”
- die Kanone, braucht man um hier und da auch wieder was weg zu schießen.

Aktuell baue ich an einer Möglichkeit, Webseiten zu erobern die dann Steuern kosten (und evtl. etwas zu verfremden), bis das entsprechende Gebäude wieder zerstört ist.

Auch die Webseite zum Spiel braucht noch ein kleines bisschen Pflege. Optionale Emailangabe für Passwortreset und ein paar Statistiken sollen hier als nächstes folgen.

Da ich mich noch nicht zu einem Namen entscheiden konnte, gibts auch noch keine eigene Domain, aber hier kann man sich registrieren und spielen:

http://www.drailing.net/webgame/

Über Feedback, Anregungen, Bugs etc. freue ich mich natürlich!

An den letzten Blogposts kann man erkennen, dass ich mich immer mehr mit den Möglichkeiten von Javascript und Greasemonkey beschäftigt habe. Daraus ist nun ein kleines Spiel entstanden und zu dem Spiel ein kleiner Teaser:

Der aktuelle Stand ist folgender:
Man bewegt sich (mit den Pfeiltasten) über Webseiten und findet zufällig verteilte Geldsäcke. Mit diesem Geld kann man nun verschiedenste Sachen bauen. Neben “ich war hier”-Schildern und Minen gibt es Teleporter, denen beim Erstellen eine URL hinterlegt wird. Läuft man nun durch einen Teleporter wird man auf die nächste Seite “gebeamt”.

Läuft jemand über eine Mine, werden 10% des Geldes an den Minenleger übertragen.

Natürlich sieht man auch die Gebäude die von anderen Spielern gebaut wurden und kann auch deren Teleporter benutzen. In ersten Tests konnte ich viele lustige Webseiten besuchen indem ich mich nur von Teleporter zu Teleporter bewegte. Sehr cool!

PS: über Namensvorschläge und Feedback freue ich mich natürlich!

Vor einiger Zeit hatte ich angefangen mich mit Greasemonkey zu beschäftigen, da ich die Idee, Websites Clientseitig seinen eigenen Bedürfnissen anzupassen sehr interessant finde.

Seit der Version 0.8.0 unterstützt Greasemonkey nun ein @require Attribut, welches erlaubt externe Bibliotheken wie jQuery einzubinden und zu benutzen. Das ist toll!

Und als erstes, unverzichtbares Plugin gibts hier den z0r Randomizer, welcher auf der zugehörigen Internetseite alle 10 Sekunden den Random-Button drückt. Wunderbar auf jeder Party oder einfach als Bildschirmschoner, einfach ein MUSS! (im Grunde ist z0r nur eine Ansammlung doch sehr unnötiger aber lustiger Flash Videos, wie z.B. das)

Das Script gibts hier:
click

Und wer Greasemonkey noch nicht installiert hat, wird hier fündig:
click

Zur Installation, ganz einfach den Link zum Script bei aktiviertem Greasemonkey anklicken.

Falls man nun ein Video doch tatsächlich länger als 10 Sekunden sehen möchte, ist im z0r Menü ein zusätzlicher Eintrag dazugekommen, über welchen man jederzeit den Timer an/ausschalten kann.

Viel Spaß!

Da habe ich endlich mal wieder was gebaut, über was es sich auch lohnt zu schreiben: eine Twitterwall.

Auch wenn ich selber kein aktiver Twitternutzer bin, musste ich mir die API aus verschiedenen Gründen etwas genauer anschauen. Am Ende fiel eine komplett Javascript basierte Twitterwall raus

Bei Click auf den Titel (beim Start “japan”) wird das minimalistische Menü eingeblendet, über das auch nach Hashtags oder User gefiltert werden kann. Abgeschickt bzw. geschlossen, wird das Menü über Enter.

Eine Live-Demo gibts hier: getwitter

Und wer sich den Code genauer anschauen möchte, oder auch den eigenen Bedürfnissen anpassen will, kann sich hier gerne den Code downloaden: download

Nachdem ich mich die letzte Woche mit jQuery etwas beschäftigt habe, möchte ich hier einmal kurz die aufgetretenen Probleme und die damit verbundenen Lösungen festhalten:

Parallele Abläufe
Da es in Javascript und somit auch in jQuery keine Threads gibt und eine endlose while Schleife keine Parallelität bietet (und ausserdem den Browser abstürzen lässt) muss ein anderes Konstrukt herhalten. Die Lösung hier lautet Rekursion (schön erklärt von Markus Kühle auf Javathreads).

setTimeout mit Parametern
Auf anhieb findet man für die Rekursion viele Beispiele mit der setTimeout Methode, leider aber immer ohne Parameterübergabe (in meinem Beispiel der CountUp):

setTimeout("countUp()", 1000);

Sobald nun countUp() mit einem Parameter übergeben werden soll, funktioniert dieser Aufruf nicht mehr. Die Lösung war, den ersten Parameter der setTimeout Methode durch eine Funktion zu ersetzen:

setTimeout(function(){
	countUp(date);
}, 1000);

Countup und die Zeit
Ich hatte eigentlich erwartet dass mich Google mit kleinen Codeschnipseln überhäuft wenn es um einen Simplen Countup für Zeit geht. Gefunden habe ich ein paar wenige, die aber so unschön anzuschauen waren, dass ich mir kurzerhand was kleines Simples selbst zusammengeschrieben habe:

//Parameter inzwischen global um einfach und dynamisch zur Laufzeit zu ändern
var year, month, day;
 
function countUp(){
        //month-1 da die Monate von 0-11 codiert sind
	var startDate = new Date(year, month-1, day, 0, 0, 0);
	var currentDate = new Date();
 
	var diff = new Date(currentDate.getTime() - startDate.getTime());
 
	//(diff.getYear()-70) da der Zeitliche Nullpunkt bei 1970 liegt, und wir nur die Anzahl der Jahre benötigen
	var diffString = "Years " + (diff.getYear()-70) + " Months " + diff.getMonth() + " Days " + diff.getDate() + 
		" Hours " + diff.getHours() + " Minutes " + diff.getMinutes() + " Seconds " + diff.getSeconds();
 
        //String schreiben
	$('#countUpDiv').html(diffString);
 
        //rekursiver Aufruf
	setTimeout(function(){
		countUp();
	}, 1000);
}

noch ein Tip zum Schluss
Um die komplette jQuery Doku auch offline (solls ja ab und zu geben…) nutzen zu können, gibts diese auch als PDF oder sogar als Windows Help File zum Download.
Link