Who-of-us? Find else he'll escape

What I built

Whoofus is a sleuth game based on phaser js, where the crux of the matter is that you need to be at utmost alert to find out the killer!

Immersive yourself as a Detective, & solve the mystery to find out who of us did it!

Category Submission: Random Roulette

App Link

Whoofus is deployed on both DigitalOcean & Vercel. The game can be played at,

• Whoofus ~ DigitalOcean Play Here
• Whoofus ~ Vercel Play Here

Gameplay Demo :- https://youtu.be/x7WqmYT5tLc

Screenshots

Description

As previously mentioned, Whoofus is a single-player TPF (Third person View) sluth game based on phaser js, where the crux of the matter is that you need to be at utmost alert to find out the killer! Immersive yourself as a Detective, & solve the mystery to find out who did it! There are 8 characters roaming about this map, moving about. There are walkways and pathways in which they can meet one another. When they meet, one of them can either kill the other one, or they could just pass by each other. When there is a murder, as a detective, your task is to find out who is the murderer of that specific dead body. And also not to mention, we also added some Easter Eggs inside this game!

Whoofus runs on both on PC & mobile directly on the browser (on Canvas), although it's always recommended to play on PC for much better experience!

Link to Source Code

• Github Repository : https://github.com/Neilblaze/Whoofus
• Initial commit - 12th Dec'2020

Permissive License

Whoofus is registered under Apache License 2.0

Background

It all started with a detective themed hackathon on 12th Dec'20. Personally, I'm a Hackathon freak. I love hackathons because it helps to generate specific ideas in a distinct domain within a small very period of time & as a result, it not only increases the creativity but also enhances the curiosity while tackling corner cases while building the project/product. Unfortunately, we couldn't finish making Whoofus during the hackathon (since my exams were going on then) but now, it's ready to play! :D

How I built it

We used the following tech stacks for building our project,

Phaser Js
Vue.js
Vanilla Javascript
HTML
Bootstrap
Tailwind CSS
jQuery

Challenges we ran into

We weren't that much expert in phaser js. So, we had a lot of issues to set up the map and push those characters into the same. But with the same side, the documentation of phaser is just awesome as it provides lots of materials to get started! The game engine works on Vue.js, which wasn't a piece of cake for all of us since most of us prefer working in React.js. Also, it was a bit difficult for us to collaborate in a virtual setting but we somehow managed to finish the project on time.

What we learned?

A lot of things, both summed up in technical & non-technical sides. For the technical side, we got to learn so much about configuring the game engine which is entirely written on phaser.js. We also gained some UI/UX skills while one of us was busy building the frontend side of the project. Not to mention, Stackoverflow was the gem for us while we're troubleshooting some complicated issues.

Coming to the deployment part, I've been deploying apps to DigitalOcean since Hacktoberfest'19
And I can fairly say, it's very easy to deploy apps over there specifically using DigitalOcean App Platform! For newbies, this guide from DO will get them started!
Also not to mention, the same instance is also being deployed via Vercel as mentioned above.

What's next for Whoofus

We're going to go through many changes & planning to add the following updates to the project in the future,

• Improve the UI of the game.
• Add more characters (Currently 8 characters available)
• Add multiplayer feature (on Socket.io)
• Live Chat support.

Whoofus can be further developed to add more features to make it more attractive & fluidic on every device! This would include some research work which we are planning to undergo soon!

Additional Resources/Info

• Phaser Documentation
• Vuejs Docs

Conclusion

It has been all fun, & I would love to thank my friend Sandipan for helping me, & as always, thank you #DEV #DEVCommunity & DigitalOcean for hosting this hackathon!