Angular Phaser Game Launcher
Final Grand Circus Frontend Project
infoOverview
Project
For our final Grand Circus bootcamp project, my group of 3 had to build an Angular project that used an API. We made Can't <br> Us with Angular and Phaser, a JavaScript game framework. We wanted to push past what we'd been taught, and we all love video games, so it was a good excuse to make one.
Vision
The first plan was a single game that pulled stats from a database on Heroku to change character stats. We wanted more Angular in it, though. So instead of Angular being a shell around one game, it became a platform for launching games, like Steam or the old flash game sites.
Planning
We held daily scrums when we could and tracked tasks with GitHub's project tools, which kept everyone in touch and clear on priorities. On bigger tasks we pair programmed to catch things one person might miss.
YEAR2020
TEAMGroup of 3
TYPEGrand Circus final project
STACKAngular, TypeScript, Phaser, Express.js, PostgreSQL
codeActions
Code
The main feature is the Phaser game, which we rewrote in TypeScript so it could run inside a single Angular component. We also had to use some kind of API, so we built our own SQL database to store user scores and show them on the High Scores page through an API written in Express.js.
Backend & data flow in Angular
The database lives in PostgreSQL, managed through PgAdmin, with tables for user IDs, scores, emails, and so on. To reach it, we wrote a REST API in Express.js that queries the database and sends the results back through the API's endpoints.
On the frontend, functions in the Angular service call that API, and dependency injection makes them available to components. Components that need the data inject the service and subscribe to it in their component.ts class. The HTML templates then loop through the data with structural directives.
webCode cont.
Frontend
Angular's component structure suited us, since we wanted a modular interface that was easy to navigate. Most of the frontend is split into 5 components connected through the app-routing module. Every page shares the same navbar, which uses router link directives to jump between components.
Colors
#1AF0DC
#FF8F64
#000000
#FFFFFF
Pages
Elements
sports_esportsCode cont.
Phaser game
Getting Phaser into Angular was awkward. We had to refactor the JavaScript into TypeScript, and some Phaser methods, like sizing, conflicted with Angular, so we dropped responsive support.
On the plus side, all the game logic lives in one component .ts file, and the component template works as a window into the game. That made maintenance and testing easy, and it means each game can be its own component.
The art and audio were a lot of fun to add, since Phaser makes importing assets easy. The game is about our time in the bootcamp, so we put in our instructors, modeled the side panel on our online LMS, and made the obstacles the languages we learned. The music was the cherry on top. Can't <br> Us was our favorite part of the whole project.
paletteActions
Phaser game design
flagConclusion
Everything we learned, in one project
A final project is supposed to use everything you learned as a student, and I think this one does. We built our own database, learned a new framework, and made a full game with it.
There's more it could do. A Phaser game drops into the platform as a single component, so it really does work as a launcher. It could host student projects, run educational games for teaching, or stand in for the old flash game sites. That makes it useful beyond a class showcase.