zebresel Logo
zebresel Logo

BLOG.
Aktuelles aus der Welt, frisch auf den Tisch zebreselt.
 
 
06
OKT
2011
snake_4

Hilfe! Hier ist eine Schlange im Browser!

Zebresel Team - 6. Oktober 2011 - 2 Kommentare - Web-Entwicklung

Vor einigen Tagen haben wir ein kleines HTML5 Spiel unter unseren Projekten vorgestellt. Mit diesem dazugehörigen Blogartikel möchte ich euch gerne einen kurzen Einblick in die Entwicklungsphase geben.

Natürlich könnt ihr euer Können in dem Klassiker sofort unter Beweis stellen und versuchen den Highscore zu knacken.

Am Anfang stand die Idee sich genauer über HTML5 einzulesen, um für die Zukunft vorbereitet zu sein. Im Web entstehen immer mehr Anwendungen welche mithilfe von HTML5 Elementen aufgebaut sind. Dazu zählen unter anderem Videoplayer, Musikplayer und auch Spiele.

Am Anfang

Im Internet finden sich viele Tutorials und Artikel zum Thema HTML5. Die meiner Meinung nach beste Webseite zum Thema HTML5 ist die Webseite “HTML5 Rocks”. Auf dieser Webseite finden sich nützliche Links und Artikel rund um das Thema HTML5. Grundsätzlich besteht HTML5 aus drei Komponenten: HTML, Javascript und CSS. Nach einigen kleinen Testseiten welche diese Komponenten verwenden entstand die Idee ein kleines Browser-Game zu entwickeln, welches auf diese Technologien zurückgreift. Genau aus diesem Grund wurde nach weiteren Tutorials zur Entwicklung von Spielen mithilfe von HTML5. Hier eine kleine Linksammlung mit den besten Tutorien:

Das Spiel

Mit dem Wissen aus den Vorlesungen im Studium, dem Interesse an Spielen und den Informationen aus den Webseiten begann die Entwicklung eines kleinen Frameworks für das Spiel. Die Wahl für ein Spiel viel auf den Klassiker “Snake”, welches ich nur zu oft damals auf mein NOKIA gezockt habe.

Nach wenigen Tagen Entwicklungszeit entstand das komplette Spiel mit Highscore. Und jetzt geht’s los:


Link zum Spiel, falls es als iframe Probleme macht.

Den entstandenen Quellcode könnt ihr euch gerne runterladen und genauer betrachten. Bei weiteren Fragen könnt ihr mir gerne eine Mail schreiben oder einen Kommentar hinterlassen. Wenn ihr mich Ärgern wollt dann verdrängt mich vom Highscore. ; )

Suche
Kategorien
Archiv
Sehenswert