Aufbau von requireJS Modulen
Verfasst von dreiling unter Entwicklung, GameDev, JS / AJAX am 4. Mai 2012
requireJS ist ein “Javascript Modul Loader”. Der Javscript Code wird in Module zerlegt, die nur dann auch geladen werden wenn diese auf einer Seite gebraucht werden. Um das zu erleichten können zwischen den Modulen Abhängikeiten definiert werden.
Das Einbinden auf der Seite ist ein einfaches script-Tag, mit der Besonderheit, dass der Einstiegspunkt mit angegeben wird, also unser Main-Modul.
<script data-main="lib/js/main" src="lib/js/require-jquery.js"></script>
In meinem Beispiel (requireJS mit jQuery) ist jQuery im requireJS Paket mit integriert und kann nun im Main-Script geladen werden:
require(["jquery"], function($) { $("#body").css("backgroundColor", "#ff6eec"); });
Die Module welche “required” werden, finden sich als Parameter in der Funktion des Moduls wieder. Der Name der dabei vergeben wird, ist einem selbst überlassen, für gewohntes arbeiten gebe ich Ihm den Namen “$”. Alles was im Main-Modul geschieht, ist überall verfügbar und wird auf jeder Seite ausgeführt.
Neben normalem Code der als Modul geladen wird, hat es sich in meinem Projekt als sehr praktikabel erwiesen, eine “Klasse” zu schreiben und den Konstruktor zurückzugeben. Mein Grundkonstrukt sieht dabei wie folgt aus:
define(function () { var MyClass= function(args){ this.init(); } MyClass.prototype = { init: function(){ } } return MyClass; } );
Nutzbar wird das Modul dann, durch das Angeben der Abhängikeiten, würde ich also in der main.js auf das Modul zugreifen wollen, sähe das so aus (davon ausgehend, die Datei liegt im gleichen Ordner wie das main.js Script und heißt myclass.js):
require(["jquery", "myclass"], function($, MyClass) { $("#body").css("backgroundColor", "#ff6eec"); var instance = new MyClass(); });
So kann man ein Object als Parameter in den Konstruktor mit übergeben und zusätzlich wird automatisch die init-Methode ausgerufen, die bei mir die logische Initialisierung übernimmt.
Im Kontext der Views des Play! Frameworks brauche ich nun nur noch ein Modul als Script zu laden und es werden automatisch alle Abhängigkeiten nachgeladen.
#{script "start.js" /}
Schaut man dann in den HTML Head, sind alle abhängigen Scripte geladen.
Der Sinn dahinter, ist nicht nur mehr Performance (in requireJS kann man am Ende noch einiges mit dem Optimizer machen) wird der Aufbau der Javascripts viel übersichtlicher und Strukturierter.
Mikroblog Asaph
Verfasst von dreiling unter std::artikel, Tech am 26. April 2012
Eine weitere tolle Idee von Dominic Szablewski (dem Entwickler von ImpactJS) ist sein Mikroblogging-System Asaph
Für mich (tatsächlich ohne Facebook Account) ist das eine super Lösung, Webfundstücke schnell zu speichern, mit der restlichen Welt zu teilen und wiederzufinden.
Die Installation war ganz problemlos und das Bookmarklet macht einfach tierisch Spaß!
Ein neues (Spiele-) Projekt
Verfasst von dreiling unter Entwicklung, GameDev am 24. April 2012
So.
Nachdem mir inzwischen auf Anhieb 5 verschiedene Spiel-Projekte einfallen, die ich voller Enthusiasmus gestartet, aber aus verschiedensten Gründen nie zuende gebracht habe, muss man sich gedanken über das “warum” machen.
Die Gründe dazu sind recht schnell gefunden:
- schlecht bis gar nicht geplant
- neue, interesantere Technologie kennengelernt
- Lust am Projekt verloren
- zuviel vorgenommen für ein Freizeitprojekt
Natürlich hängen die Gründe für ein Abbruch bzw. das nicht-weiterentwickeln der Projekte auch eng zusammen, doch ich habe für mich den letzten Punkt als hauptsächliches Hinderniss identifiziert. Die Projekte waren von Anfang an zuviel für einen Entwickler, der ausschließlich in seiner Freizeit daran arbeitet. Zudem kommt die fehlende Erfahrung was Spieleentwicklung angeht, denn spätestens nach der technischen Realisierung kommt der Content und das Balancing… und grade die Balance ist für kleine Projekte die zu großes vorhaben nicht handlebar. Zumindest nicht für mich als unerfahrener Spieleentwickler.
Nun wird ein einfacheres Browsergame gestartet. Das eigentliche Spielprinzip ist noch geheim und ich denke auch es macht Sinn, ab einem gewissen Zeitpunkt einen eigenen Blog fürs Spiel zu starten, allerdings möchte ich hier im Vorfeld etwas über die Technische realisierung schreiben.
Aufgebaut wird alles auf dem wunderbaren play! – Framework, allerdings in der Version 1.2.4. Version 2 hatte ich bei Release sehr genau getestet, doch da mein Eclipse mit den zur Laufzeit generierten Views absolut nicht zurecht kam (trotz jeglicher verfügbaren Scala Unterstützung) und durchgängig die Hilfe durch Autocomplete flöten ging, habe ich mich für die sehr bewährte Vorgängerversion entschieden.
Zudem kommt noch zum Einsatz
- requireJS mit jQuery und jQueryUI
- für CSS das 960 Grid
Dann bleibt mir nur noch zu hoffen, dass es diesmal zu einem fertigeren Spiel kommt 
“How It Feels To Sell Instagram For A Billion Dollars”
Verfasst von dreiling unter std::artikel, zum schmunzeln am 17. April 2012
Ich plane demnächst eine Umstrukturierung des Blogs, vor allem um evtl wieder etwas regelmäßiger zu schreiben.
Bis dahin gibts nen Gute-Laune-Youtube-Video:
ImpactJS Sale
Verfasst von dreiling unter std::artikel, Tech am 23. Dezember 2011
Ich möchte kurz darauf hinweisen, dass die großartige ImpactJS Gameengine über die Feiertage im Angebot ist, für 49 Dollar (also ~ 3 Euro : link)
Ich arbeite seit einigen Wochen mit der Engine und bin sehr begeistert. Konkurrenzlos für alles was Javascript 2D Spiele angeht.
Ausserdem habe ich ein Multiplayerplugin für die Engine geschrieben (link), wenn ich da noch einige Kinderkrankheiten gefixt hab werd ich dazu aber nen eigenen Beitrag schreiben.
Zweiter Teaser und offene Anmeldung
Verfasst von dreiling unter Entwicklung, JS / AJAX am 16. November 2011
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!
Erster Teaser meines ersten Spiels ohne Namen
Verfasst von dreiling unter Entwicklung, JS / AJAX am 29. Oktober 2011
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!
Erste Gehversuche mit Node
Nachdem ich schon vor längerem mit Websockets experimentiert hatte, diese aber nur in einer Beta von Chrome aktiv geschaltet sind, habe ich mich nun mit NodeJS und Socket.IO beschäftigt.
NodeJS bietet die Möglichkeit Javascript serverseitig zu interpretieren und stellt eine komfortable API bereit um sehr rasch eigene Serversoftware zu schreiben.
Socket.IO ist ein Node Plugin welches sich zur Aufgabe gemacht hat die Echtzeitkommunikation ins Web zu bringen. Dabei werden entweder auf Websockets, Flashplugins oder Javaapplets zurückgegriffen und ist somit auch auf nicht ganz aktuellen Browsern lauffähig.
Als erster Test habe ich ein Codebeispiel etwas umgebaut und es kam eine kleine Seite zustande, auf der man sich mit einem Namen anmeldet und dann per Click eine kleine blaue Box bewegen kann.
Hört sich erstmal nicht nach einer postenswerten Errungenschaft an, surfen aber mehrere Besucher auf der Seite (oder alleine mit mehreren Browsern), erscheint pro Anmeldung eine blaue Box und jeder kann die Boxen und Bewegungen der Anderen in Echtzeit sehen!
Und hier gehts zur Seite!
Auf Wunsch kann ich den Code noch etwas kommentieren und zum Download anbieten, die Beispiele von Node selbst sind aber recht selbsterklärend und auch entsprechend gut kommentiert
Tip:
Da npm (Node Package Manager) unter Windows nicht zur verfügung steht und das Einrichten unter Windows mit allen Plugins bei mir nicht ganz geklappt hat, empfehle ich das Projekt nodejs-win, ein Installer für NodeJS der alle notwendigen Plugins mitbringt, PATH Variable setzt etc…
z0r Randomizer (Greasemonkey Plugin)
Verfasst von dreiling unter Entwicklung, JS / AJAX am 3. Juli 2011
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ß!
blueimp AjaxChat Onlineliste
Verfasst von dreiling unter Entwicklung, JS / AJAX, PHP am 10. Mai 2011
Auf Anregung von Sumale.nin habe ich hier ein Miniscript geschrieben, womit man die aktuell angemeldeten Chatter sehen und per Ajax-Request in ein Div laden kann.
Grundsätzlich wurde das ganze dann doch sehr simpel 
Benötigt wird jQuery und mein kleines Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> <script src="onlineuser.js" type="text/javascript"></script>
Diese beiden Scripte müssen auf jedenfall im entsprechenden HTML Header vorhanden sein.
Vor dem hochladen, kann in der onlineuser.js noch die UpdateRate und die ID des Divs konfiguriert werden. Per default heisst die Div-ID “onlineuser” und wird alle 10 Sekunden aktualisiert:
var targetDiv = "onlineuser"; var updateRate = 10000;
Falls nun das PHP Script nicht auf einer Ebene mit der HTML Datei liegt, muss der Pfad noch entsprechend angepasst werden:
$("#"+targetDiv).load("path/to/onlineuser.php");
In der onlineuser.php muss, wie auch schon beim Adminpanel, die Datenbankverbindung eingertagen werden und optional noch CSS Klassen mitgegeben werden:
$cssClass = "styleMe orNot"; $db = new mysqli( 'localhost', 'db-user-name', 'db-pw', 'db-name' );
Grundsätzlich wars das schon!
Ein ZIP mit den beiden benötigten Dateien und einem Beispiel-HTML findet man hier
Ich hoffe es funktioniert bei allen, im Notfall kann man sich aber gerne hier melden
Letzte Kommentare