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
- express.js
- pixi.js
- vue.js
- websockets
Log in or sign up for Devpost to join the conversation.