robert filatow logo

Flashcard-Card-Game

Zusammenfassung

Im Vorfeld meiner Thesis habe ich mit dem JavaScript-Framework Vue.js ein Serious Game entwickelt, das vollständig im Browser läuft. Nach Abschluss der Entwicklung habe ich im Rahmen meiner Thesis eine Studie mit Experiment zur Untersuchung der Akzeptanz von Serious Games durchgeführt. Für das State-Management kam der Pinia Store zum Einsatz, während ich das UI-Design in Figma vorbereitet habe. Die Kartendesigns habe ich mit Stable Diffusion und Photoshop umgesetzt sowie teilweise Assets für die Kartenframes verwendet. Die Animationen habe ich anschließend manuell mit CSS und JavaScript programmiert und das Game State Management über globale Stores gelöst. Die Kommunikation zwischen einzelnen Elementen (Karten, Stapel, Monster und Spieler) im Spiel läuft über Vue Props sowie Stores.

Tech: Vue.js, Pinia Store, Figma, Photoshop, Javascript, CSS, HTML

Kategorie: Serious Game, App, Ui-Design, Single Page Application (SPA)

Für: Bachelor Thesis

Herausforderungen: Fließende Animationen umsetzen, Performance Optimierung (Single Thread), Event Loop, Sprite Animationen mit Javascript, Game Loop, State Management

0:00 / 0:00
Karteikarten Kartenspiel umgesetzt in Vue.js, Javascript
Ablauf des freischalten der Karteikarten durch Beantworten der Fragen
Spielcharakter kann sprechen
© 2023. All rights reserved. Website made by Robert Filatow