GitHub-Repository ansehen
Live-Vorschau ansehen

Das ist das Abschlussprojekt des Online-Informatikkurses HarvardX CS50, Harvards Einführung in die geistigen Grundlagen der Informatik und die Kunst des Programmierens. Unterrichtet von David J. Malan, bringt CS50x den Studierenden bei, algorithmisch zu denken und Probleme effizient zu lösen.

Die erste Version habe ich mit LÖVE versucht, einem Game-Engine-Framework in Lua, das in den CS50-Projektvorschlägen empfohlen wird.

Das Coden mit einer Game Engine hat mir Spaß gemacht: Mit dem Frame-Refresh zeichnen und neu zeichnen, je nach Updates. Ich kam so weit, ein Sprite zu erstellen; geht es in ein Gebäude, wird der Bildschirm je nach Ort neu gezeichnet. In der Polizeistation ist der erste Schritt, die Tatortberichte durchzusehen. Dafür habe ich Eingaben gebaut, mit denen man Tag, Monat, Jahr und Ort eingeben kann, und diese Filter auf die SQL-Abfrage angewendet. Ich habe die SQLite-Datenbank angebunden, aus den Eingabewerten eine Query gebaut und die Ausgabe in der Konsole ausgeben können.

Am Ende wollte ich aber HTML-Elemente. Die Inputs von Grund auf zu bauen war schon schwer, und dann noch zu entscheiden, wie die Ausgabe in einer scrollbar Tabelle erscheinen soll, war überfordernd - ich weiß ja, wie leicht sich das im Browser mit HTML darstellen lässt. Also habe ich umgedacht und Flask genommen. Die Navigation auf der Karte musste neu gedacht werden: Klicken statt Sprite.

Statt bei SQLite zu bleiben, habe ich alles in eine PostgreSQL-Datenbank auf Supabase verschoben. Weil das eine einmalige Aktion war, habe ich die Migration in einem Jupyter Notebook laufen lassen. Dabei habe ich auch Daten umformatiert (vor allem Daten), damit die Queries einfacher werden. Ein unerwartetes Hindernis war ’ statt ' in Daten, die das CS50-Team in die Datenbank geschrieben hatte; das hat Teile meines Codes kaputt gemacht. Im neuen Supabase-Bestand habe ich alle Apostrophe vereinheitlicht.

Auf Authentifizierung habe ich verzichtet und speichere den Spielfortschritt im Local Storage des Browsers. Das Design ist stilistisch sehr schlicht: Schrift und einfaches CSS für einen etwas oldschooligen 8-Bit-Look.

Beim Besuch der Startseite gibt es einen Hinweis, den man über den Button "clues" unten jederzeit wieder im Modal sehen kann. Beim Erkunden der Karte und bei Queries über die Formulare kann man nützliche Hinweise in diesem Menü speichern. Wer glaubt, die Details der Tat zu kennen, darf raten!