Description
Based on the 'Where's Sonic Now' book by Ladybird (UK) and inspired by the Sonic 3 and Sonic & Knuckles games on Sega, Find Sonic Fast is a 'Where's Wally' style game where users go head to head to see who can find Sonic and the team in the fastest time.
Objective
I wanted to experiment with the idea of photo-tagging, where people can tag their friends in a picture by clicking on the image, but I wanted to twist the idea into a game of finding characters inside a busy image.
The timer was something I wanted right from the start too. I knew it would create pressure to finish the game fast and get the player's adrenaline going a little!
Going the extra mile on this project I challenged myself to implement sound effects, music and animations to showcase my creativity across image editing and working with audio.
CSS pixelated image-rendering preserves the expression of the artwork used from the original game to provide a sprinkle of nostalgia.
Tech used
- React
- Express
- PostgreSQL
- Prisma
- Node
- Aseprite
Using React for the front end allowed me to create reusable components such as the Level Select cards and Level Pages. This meant it was super simple to scale up when it came to adding new levels, future-proofing the project in the event I ever wanted to add more levels.
My Node-powered back end made use of the Express-Session npm package as well as JWT's for authentication. This kept the game from being tampered with by storing the player's score inside sessions that require a token to access ( A task I discovered cookies weren't the best for! ).
The leaderboard tracks the fastest times from anonymous players.
Challenges
From the start I knew it was going to be a challenge to handle anonymous users and validate them without a sign-in or sign-up method.
Initially, I'd implemented sessions using the Express-Session npm package which would store the session ID in a cookie sent to the user.
This worked great in a local environment, but when it came to deployment and having my front end and back end hosted on different domains I quickly realised it would be troublesome to implement cross-domain cookies!
Uh oh...
After scratching my head for a few days I went back to the drawing board and refactored the project to authenticate users using json web tokens instead of cookies. I ended up keeping sessions as they had some nice features that allowed me to track the game state, as well as self-pruning to keep the database clear. JWT's worked much nicer cross-domain. In the end I had the best of both worlds!
Being a media-heavy project with lots of images, GIFs and audio I had to keep file sizes to a minimum so the game would work well on a variety of connection speeds. Audio was especially challenging here... Thankfully I used my past experience in music production to compress the mp3 files down as far as possible without sounding noticeably bad.
Let's Keep in Touch
If you're after a developer for your next project, have something you'd like to ask or just want to stay in touch, feel free to reach out.
ruuksine@gmail.com