HTML5 Canvas und Websockets als Spieleumgebung

Screen Shot Ich habe mir am Sonntag erst einmal seit langem wieder einen Tag zum rumbasteln mit neuer Technik gegönnt. Ich wollte mir schon immer einmal WebSockets näher anschauen und bin dabei auf die Socket.io JavaScript library gestoßen welche sich ganz wunderbar mit expressJS (web application framework für node) kombinieren lässt. Die Idee war es ein kleines Multiplayer Spiel mit möglichst viel Datenübertragungen zu implementieren. Ein Spieleklassiker wie Asteroids, wie hier verwendet, war da ein gutes Beispiel und einfach in JavaScript zu implementieren, zumal das eigene Spielgeschehen hier nicht im Vordergrund stand. Die Oberfläche und Einzelspieler Implementierung habe ich mit AngularJS und Bootstrap umgesetzt um so schnell wie möglich zu einem Ergebnis zu kommen. Ein Spieler kann seinen Namen ändern, Astroid-like auf der Oberfläche herumfliegen und versuchen gegnerische Schiffe abzuschießen.

Die eigentliche Kommunikation über Websockets und die Verteilung der Daten als Broadcast an alle verfügbaren Clienten ist durch eine Art Pub-Sub in Socket.io wie folgt realisiert:

Das Frontend nutzt ein Angular Modul von Brian Ford „btford.socket-io„. Ich werde noch ein wenig damit herumspielen um einschätzen zu können ob solche live Übertragungen performant genug sind, um ein richtiges Multiplayer Spiel im Browser mit diesem Stack implementieren zu können.

Leider konnte ich wegen fehlenden Ports auf uberspace das Projekt nicht hosten. Ich habe jedoch ein kleines Screenmovie als Beispiel davon gemacht.

Quelltext: github.com/stetro/astroids

Advertisements

Tweetpoller – Cloud9 Projekt

Für das Fach „Netzbasierte Anwendungen“ an der FH-Köln standen wir vor der Aufgabe einen Twitter Feeder in JavaScript zu nutzen. Hierfür habe ich ein eigenes jQuery Plugin „tweetpoller“ geschrieben welches uns diese Arbeit sehr gut abnimmt. Tweetpoller lädt zu beginn einen Bestand der letzten Tweets eines Nutzers und fragt nach einem vorgegebenen Intervall immer wieder die Twitter API an ob neue Tweets des Benutzers online sind. Neue Tweets werden dynamisch in die Liste aller Tweets eingefügt. Das Projekt liegt unter github und kann einfach als jQuery plugin genutzt werden:

$(function(){
$("#twitter-tweets").tweetpoller(
{
"filter_value": "stetro",
"filter_attr": "screen_name",
"time": 20*1000,
"count" : 7,
"read_more_link_text" : "Mehr Tweets ..."
});
});

Der passende HTML Code könnte so aussehen:

<ul id="twitter-tweets">
<li>Tweets werden geladen ...</li>
</ul>

Besonders interessant war die IDE die ich für dieses Projekt das erste mal genutzt habe. Cloud9 ist eine Webbasierte JavaScript IDE die es ermöglicht sehr flexibel im Web auf Quellcodes zuzugreifen und eigens geschriebene Testumgebungen zu nutzen. Außerdem hat Cloud9 eine direkte Anbindung an github. Für öffentliche WebProjekte somit Ideal !

Node Edit – JavaScript Editor

Ein etwas größeres Wochenendprojekt was einen einfachen Editor für Node.js darstellen soll. Denn ich habe mich ein wenig mit Node.js auseinander gesetzt und dachte mir man könnte extra dafür einen sehr schlanken Editor gebrauchen. Auf Node.js bin ich durch den CRE167 Podcast gestoßen.

Also habe ich Eclipse wieder installiert und einen Java basierten Scripteditor programmiert. Für die GUI wurde ausschließlich die swing Umgebung genutzt und ist (nach meinen Tests) auch auf sehr schwachen Rechnern sehr perfomant. Der Editor hat bis jetzt folgende Features:

  • Syntax Highlighting für JavaScript, JSON und XML
  • Automatischer Tabeinzug über beliebige Ebenen
  • Zeilennummerierung und Highlighting
Weitere angedachte Features:
  • SFTP Remote editierbare Dateien
  • SSH Konsolenzugriff
XML Screenshot

HTML 5 Canvas – Moorhuhn 2.0

Habe mich auf Grund von Abneigung zu Flash mal ein wenig mit dem Canvas Tag in HTML 5 auseinander gesetzt. Dabei ist ein kleines Moorhuhn ähnliches Spiel bei heraus gekommen welches durch die HTML 5 Technologie sich sogar auf iPhone, iPad und allen anderen Mobilen Endgeräten mit passendem Browser spielen lässt. Soweit der Webspace noch steht kann das Spiel unter folgender Adresse gespielt werden. Natürlich ist dort auch der Quelltext hinterlegt und man kann schauen wie simpel man alle möglichen Animationen und Interaktionen mit dieser Technik realisieren kann.

http://www.stetro-blog.de/blog/HTML5Canvas/

jQSlide – jQuery Slider

So endlich die Prüfungen und Ergebnisse meiner Ausbildung hinter mir. Also kann ich mich wieder um meinen Blog kümmern und nochmal etwas mit jQuery bauen. Habe auf viele Homepages dieses Bild, dass durch klicks nach rechts oder links wechselt gesehen und wollte das auch mal selbst basteln. Schnell hab ich gesehen, dass das mit jQuery gar nicht mal so schwer ist. Die Codierung habe ich mit gedit schnell machen können. Habe mich ein wenig mehr mit dem Design der Slidergrafik auseinander gesetzt, die ein durchlaufen über x-repeat ermöglichen sollte. Dabei kahm dann folgendes heraus:

Hiernach habe ich noch schnell die Richtungsfeile erstellt, die  sich jeder frei kopieren kann :

Das Resultat war danach folgendes:

Bei Interesse zeige ich auch gerne noch den Sourcecode, den ich noch ein wenig mit CSS3 aufgebessert habe.

CSS3 InfoBox mit jQuery oder CSS

Heute wollte ich mich kurz damit auseinander setzten, wie man eine InfoBox für Begriffe in einem Text programmiert. Dazu soll unter dem Begriff ein kleines Fenster, entweder mit jQuery oder durch eine einfache CSS verkettung angezeigt werden. Außerdem wollte ich wieder ein wenig CSS3 Effekte für die InfoBox einsetzten. Kommen wir zuerst zu der Gestaltung mit CSS:

/*Der zu erklärende Begriff*/

.info{

color:#444;
background-color:#DDD;
position: relative;
}

/*Die InfoBox*/

.infotext{
font-size:0.75em;
padding:5px;width:200px;display:none;
position:absolute;top:25px;left:0px;
background-color:#000;color:#FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 0px 7px #000;
-webkit-box-shadow: 0px 0px 7px #000;
box-shadow: 0px 0px 7px #000 ;
border:1pt solid #666;
}
Und so sieht der HTML Code dazu aus:
Dies ist ein
<span class=“info“>Flie&szlig;text
<span class=“infotext“>Beschreibung des Wortes</span>
</span>
. Weiter im Text…

CSS Lösung

Für eine einfache CSS Lösung muss die :hover Eigenschaft verwendet werden:

.info:hover .infotext{display:inline;}

jQuery Lösung

Hier wird das hover() Event genutzt und die Box wird mit show() animiert geöffnet. Hier nun der Code:

<script type=“text/javascript“ src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js“></script&gt;
<script type=“text/javascript“ language=“javascript“ charset=“utf-8″>
// <![CDATA[
$(document).ready(function(){
$(’span.info‘).hover(function(){
$(this).find(’span.infotext‘).show(„fast“);
},function(){
$(this).find(’span.infotext‘).hide(„fast“);
});
});
// ]]>
</script>

Hier nun das Ergebis: