Retro Rider

Inspiration

I'm a big fan of game development, so making a retro-style game felt like the natural move. Additionally, since this is a hackathon I wanted to step a little out of my comfort zone and try something new, and using facial expressions as input seemed like an interesting challenge.

What it does

In this web game, the player is endlessly attacked by red-faced enemies, and the only way to defeat them is for the player to match their facial expressions. The goal is to survive and get as high a score as possible.

How I built it

I used Next.js to build the app, and I implemented an API called face-api for the facial expression recognition. I also used the Phaser library for the game window and game loop portion of the app.

Challenges I ran into

My other two teammates left after we ran into some trouble with the facial recognition APIs, so I had to tackle making a web game and doing all of the research necessary for it on my own. Additionally, the game development side of things brought a lot of errors that took an equal amount of effort to resolve/work around.

Accomplishments that I'm proud of

Although this game isn't the most technologically advanced and is still a little rough around the edges, I'm still proud that I was able to accomplish all that I did with what little time I had. I'm also proud of stepping out of my comfort zone and using unfamiliar libraries.

What I learned

I haven't used facial recognition software before, and although I have game development experience it's mostly with proper game engines; so this project taught me a lot about using unfamiliar technologies and adapting to problems I've never dealt with before.

What's next for Retro Rider

If I had more time, I would have liked to have implemented some backend functionality so users could upload their high scores like they would on an arcade cabinet. Additionally, there are still some bugs and rough edges that would have required more time to fix than I had, like the level counter being up-to-date.

Built With

• face-api.js
• next.js
• phaser.js
• react
• typescript