Dieses Browsergame war das gemeinsame Abschlussprojekt eines Kommilitonen und mir für die Vorlesung "Programmierung und Design von WebApplications mit HTML5, CSS3 und JavaScript" im Wintersemester 2011 / 2012 an der Universität Regensburg.
Während sich mein Partner der Game-Engine widmete, programmierte ich den Leveleditor und befasste mich mit dem Styling. Der Editor lässt sich intuitiv per jQueryUI-Drag&Drop-Steuerung bedienen. Das Level wird auf einem Canvas-Element gezeichnet. Es lässt sich eine von acht verschiedenen Hintergrundgrafiken in das Level einbinden. Die Breite der Spielwelt kann über einen Range-Slider (falls vom Browser unterstützt) eingestellt werden. Man kann außerdem das erstellte Level direkt aus dem Editor heraus spielen, per PHP lokal speichern oder ein schon erstelltes Level von der eigenen Festplatte in den Editor laden. Ferner werden alle Arbeitsschritte gespeichert und können somit in unbegrenzter Anzahl rückgängig gemacht werden. Mit dem Mario5-Editor wurden von uns dann auch fast alle Level des Spiels zusammengebaut.
Da dieser Kurs die Frontend-Entwicklung mit HTML5 und Javascript behandelte, wurde auf eine zusätzliche, aufwendigere serverseitige Programmierung verzichtet. Eine solche Umsetzung kann aber in der weiterentwickelten Version des Mario5-Spiels von meinem Kursleiter Florian Rappl unter http://mario5.florian-rappl.de betrachtet und gespielt werden.
Wer die Standardwelt durchgespielt hat, den erwartet am Ende eine kleine Überraschung.
Dieses Spiel verwendet, wie oben beschrieben, viele der neuesten Web-Technologien (Canvas, HTML5 Audio, Drag&Drop, File API) und ist deshalb leider nur auf HTML5-fähigen Browsern voll funktionsfähig.
Verwendete Webtechnologien in der Übersicht:
- HTML5
- CSS3
- PHP
- AJAX
- jQuery
- jQueryUI
Hier geht es zum Onlinespiel:HTML5 Mario spielen
Auf CodeProject gibt es von Florian dazu noch zwei Artikel: