Retrocade

Inspiration

We were inspired by blitz-style party games like Jackbox Games and_Bennett Foddy's Speed Chess_. We also love the retro feel of Galaga.

What it does

Up to 8 people can join through a website on their phone and fly virtual ships around, shooting lasers at eachother.

How we built it

The web app is built using Express.js and Vue.js, with graphics rendered by Pixi.js. All backend communication is done using Web Sockets.

Challenges we ran into

Managing up to 8 different controller connections (as well as the connection to the host computer) required a fair bit of programming and problem solving. Additionally, the graphics library was completely new to both members of our team. Managing the state of the game and rendering it into a visually pleasing game required a lot of knowledge of all components of the application. Creating a controller input page was also difficult, since touch gestures on the joystick needed to be interpreted in a mathematically readable format

Accomplishments that we're proud of

We're proud of how far we came during this project. Creating moving sprites which players can control independently was a significant breakthrough, and creating a nice visual display in pixi.js was also difficult. We're especially proud of some of the deceptive bugs we were able to find together. When using Web Sockets, the communication between the frontend and backend of the app is especially opaque, so debugging can be particularly difficult.

What we learned

We learned how to render graphics using Pixi.js, as well as rendering Pixi.js canvases through Vue.js (something which nobody online has done before). Additionally, we learned how to funnel multiple different input pages through the same Web Socket using Express.js

What's next for Retrocade

We'd love to polish the details and host the game publicly online. Additionally, we'll also likely open source publish the reusable Pixi.JS Vue components as an NPM package, so that others can create their own beautifully rendered apps with less boilerplate code. We may add more games at some point too...

Built With

Share this project:

Updates