Pacman in HTML5 Canvas


pacman.platzh1rsch.ch
pacman.platzh1rsch.ch

Da ich diese Woche frei habe um die kleine Badenfahrt (aka. Badener Stadtfest) in vollen Zügen zu geniessen, habe ich jeden Tag nach dem Aufstehen die Wahl entweder draussen irgendwo zu verschwitzen oder zuhause in der kühlen Wohnung zu bleiben und Dinge zu erledigen welche ich schon lange erledigen wollte und nie Zeit dazu hatte.

Neben Velos reparieren und Filme gucken habe ich doch ab und zu Zeit und Lust, mich ein wenig weiter zu bilden. So bin ich diese Woche dazu gekommen, ein angefangenes HTML5 Canvas Tutorial weiter anzupassen und damit vielleicht den Grundstein für mein erstes kleines Game ganz in HTML5 und Javascript zu legen. Das Resultat seht ihr auf http://pacman.platzh1rsch.ch.



Was ist HTML5 Canvas?

Für alle die nicht wissen was Canvas ist: Canvas ist ein HTML Element welches in HTML5 neu dazugekommen ist. Der Begriff Canvas heisst übersetzt soviel wie Leinwand - wer schon mit Photoshop oder Gimp gearbeitet hat, dem wird der Begriff wohl bekannt vorkommen.
Dieses Element reserviert sich einen bestimmten Bereich der Webseite. Per Javascript können darin beliebige geometrische Formen oder Texte gezeichnet und bewegt werden.

 

Beispiel

Um einfach einen Pacman zu zeichnen reicht dieser Code. Für die Animation sind noch ein paar weitere Funktionen nötig. Bei Interesse könnt Ihr diese ja im Quellcode von meiner Version nachschauen.

Weitere Infos

Die Grundlage meines Pacmans basiert auf der Tutorial Reihe "Exploring HTML5 Canvas" von Devhammer. Ich kann das Tutorial allen wärmstens empfehlen die sich mit HTML5 Canvas auseinandersetzen wollen. Um mich in Javascript weiter einzuarbeiten bin ich (immernoch) an den Tutorials auf www.codeacademy.com dran. Auch diese kann ich nur weiterempfehlen. Zu jedem Theorieblock gibt es gleich eine Übung welche geschafft werden muss um zum nächsten Schritt weiter zu kommen.
Natürlich ist dies erst ein winziger Schritt in Richtung eines vollständigen Pacman Klons, jedoch werde ich sowohl ich Zeit habe immer wieder etwas daran weiterarbeiten.

Für Fragen und Feedback bin ich offen, schreibt doch einfach einen Kommentar. 

Labels: , , , , , ,