The Werewolves Escape

The Werewolves Escape is a classic sliding puzzle game developed using the Flutter toolkit. It has a compelling storyline and impressive animations. But that's not all there is to it. Despite its simple gameplay and exciting story, it is highly challenging and requires more of your brainpower than you think.

How to Play:

Create an account by entering your email and password. Register yourself on the leaderboard to see your ranking among others. Tap and drag to slide the block and make a path for Andrew to escape. Bring Andrew (block) near the helicopter to finish the game.

Note: You can watch the instructional video to learn how to play the puzzle. Moreover, all blocks can slide up, down, right, and left.

Features & Functionalities:

Simple, easy-to-play yet challenging gameplay.
Compatible on all major platforms, i.e.; Progressive Web APP for Macintosh, Windows & Linux Mobile APP for Android, iOS Web APP for all Major Browsers
High-resolution graphics optimized for every device, i.e., Laptop, Desktop, Tablet, and Mobile Phone.
Browseable on Google Chrome, Mozilla Firefox, and Safari.
The basic design combines state-of-art animation and graphics.
Instructional video for clear indication on how to play.
Background music and sound settings for a complete gaming experience.
Online registration for the leaderboard and ranking, among others.
The play as a guest option and offline play are available.
Reset functionality.
Hours of addictive entertainment.
Improve your cognitive abilities, focus, and concentration.

What is the story behind, The Werewolves Escape

Andrew, a geologist, is on a sightseeing trip to the Misty Mountains on a helicopter. He is enjoying the heli ride when all of a sudden, the helicopter malfunctions. The situation gets worse within no time, so Andrew grabs his parachute and jumps out of the Heli at once.

He glides down and lands in the mysterious parts of the Forest, surrounded by werewolves who were enchanted by drinking the water of the sparkly stream. They are so wild and murderous now.

All scared, Andrew runs as hard as possible and hides from the werewolves in a dark cave. The cave has a hidden passage out of the forest, which opens by solving the puzzle.

Here are some steps that we followed during the puzzle formation;

1- Research & Analysis

As we found out about the Flutter Puzzle Hack, we sent the official link of the hackathon to all members of our team so they could thoroughly read the rules and requirements of the project.

2- Team Discussion & Exchange of Views

Going through the requirements of the hackathon, we understood that we needed to develop the most creative yet solvable slide puzzle, which is pretty much challenging compared to creating a simple puzzle. We decided to make a google form and spread it into our team so each member could share their precious ideas and add value to our teamwork. We also arranged small meetings to exchange ideas and opinions about our participation in this contest.

3- Final Idea

We received plenty of diverse ideas from our team in just a few days, which significantly helped us reach the sliding puzzle's final statement. Thus, we created a story, “The Werewolves Escape,” as a base for our sliding puzzle game. It’s crucial to have a background for grabbing the interest of players.

4- Selection and Implementation of Tools, Extensions, and Plugins

After the idea and plot finalization, we moved to our next step: brainstorming on the development side. We decide how to make this app in the best possible way. Our pack of skilled developers utilized their technical insight and experience and decided to use the Flutter tool kit, Firebase, Firestore, and Rive to create a full-on gaming experience. This sliding puzzle was a fun coding project for us. As a team, we experimented and applied eclectic logic, tricks, codes, and animations from various tools and attempted till we reached the end of satisfaction for us.

We used Firebase authentication for the registration process that provides backend services, ready-made UI libraries, and easy-to-use SDKs. It helps authenticate users using unique passwords, phone numbers, prevalent identity providers like Google, Twitter, Facebook, etc.

We utilized Firestore, a NoSQL Database like a real-time database for the leaderboard, but the data storage structure is different. Real-time database stockpiles data in a JSON tree.

Using Rive, we created interactive animations like Andrew, which is the central part of our game. When you play the puzzle, you’ll see the emotions that change as soon as he reaches near the helicopter. It will increase the player’s involvement and interest in the siding puzzle and make it look appealing.

5- Creating Animations

According to the plot, our main character “Andrew” got stuck in a deadly forest surrounded by werewolves, and we had to play the game to escape him. We showed Andrew’s different emotions and physical movements through Rive in this project. His facial expressions were angry, sad, depressed, fearful, and weary, but as soon as he reached the end, the expressions turned into a happy and excited person. With Rive, we also make his hands movement possible.

6- Testing and Debugging

After completing the app, we have to find bugs and errors and then correct them, which is a much tiring process. Quality assurance is essential before delivering the app, so we shared the apk files with all team members to play the game, identify bugs and errors, and run through with the QA department. At one time, our developers got tired as they were stuck at the point where they wanted the block in the game to slide, but it was continuously dragging and moving to some other place, which is a very complicated developing error, but “try try again” is the valuable lesson we have. So, they made multiple attempts and finally had a smooth and error-free game.

7- Contribution to Community & Education:

The flutter community not only allows you to help others solve their problems but help you gain a better understanding of your skills. We will contribute to the community by using our knowledge and learning from this project.

Our app is an open-source code that promotes collaboration and sharing among our community. It is also a giveback to those millions of people who have spent countless hours building stuff to support our progression as a developer.
We believe that continual learning is imperative throughout a developer’s career; thus, we wrote plenty of articles explaining the complex technologies and concepts we used in this sliding puzzle game. Some titles of the articles and educational videos are;

3- Learning from videos is the best way for starters to learn to flutter. Using our experience developing this sliding puzzle, we will also make detailed videos on game logic, implement animations and design, and make it accessible for all platforms and devices. So, chop-chop. The Misty Mountains are waiting for you. It is time to go, install the game, and save the young Andrew from a deadly pack of werewolves by playing The Werewolves Escape, a classic sliding puzzle game.