Who-of-us? — Find else he'll escape 😉
Tags: dohackathon, gamedev, phaserjs, showdev
Published: 2021-01-10 12:10:28

## 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!

![Whoofus](https://dev-to-uploads.s3.amazonaws.com/i/qxozom1pdrihtizixzfr.png)

### Category Submission: **Random Roulette**

### App Link
Whoofus is deployed on both DigitalOcean & Vercel. The game can be played at,
- Whoofus ~ DigitalOcean ➟ [**Play Here**](https://whoofus-qahgs.ondigitalocean.app)
- Whoofus ~ Vercel ➟ [**Play Here**](https://whoof.us)

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

### Screenshots

<br/>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bnyh7hd9ernew2h1nwty.png)
<center>Homepage</center>
<br/>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7gezrelyxuzuv11uzoog.jpg)
<center>The main map</center>
<br/>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/su2vz1if6vq5997amo72.gif)
<center>Game Demo</center>
<br/>

### 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](https://github.com/Neilblaze/Whoofus/commit/0501f2725419d10b556fdaa5638d0b23f01d424d) - 12th Dec'2020

### Permissive License
➤ Whoofus is registered under [Apache License 2.0](https://github.com/Neilblaze/Whoofus/blob/main/LICENSE)


## 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](https://phaser.io)
➤ [Vue.js](https://vuejs.org)
➤ Vanilla Javascript
➤ HTML
➤ [Bootstrap](https://getbootstrap.com)
➤ [Tailwind CSS](https://tailwindcss.com)
➤ [jQuery](https://jquery.com)


#### 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](https://www.digitalocean.com/community/tutorials/how-to-deploy-a-static-website-to-the-cloud-with-digitalocean-app-platform) from DO will get them started!
Also not to mention, the same instance is also being deployed via [Vercel](https://vercel.com) 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](http://phaser.io/docs)
- [Vuejs Docs](http://phaser.io/docs)

### Conclusion
It has been all fun, & I would love to thank my friend [Sandipan](https://sandipan.dev) for helping me, & as always, thank you #DEV #DEVCommunity & DigitalOcean for hosting this hackathon! ❤️