Wonder Puzzle

Inspiration

I love to travel and miss it so much in this pandemic period. It is my goal to visit the world wonders. Although this won't happen anytime soon, I can build a game for showing world wonders. Players can see the amazing world wonders and also learn some history behind them. The game is great for anyone who is interested in the wonders of the world.

What it does

In the game, players will face challenges of puzzles. Each puzzle is themed with a world wonder. Once a puzzle is resolved, history behind that is revealed. Puzzles are designed like a jigsaw. Unlike normal jigsaws, players cannot place pieces anywhere they wish, instead players need to reorganise the pieces by moving them to an adjacent empty space. There is no time limit and players can try as many times as they wish. Relax and enjoy what the world wonders offer.

How we built it

The game is built in Flutter following material design. It supports web and mobile platforms. The game is split into four screens: onboarding screen, map screen, game screen, and history screen. The data flow between screens is managed by Provider package. Animation in onboarding screen is created in Adobe After Effects with Lottie plugin. The logic of puzzle is based on the reference project with some modification. The code uses less stateful widgets as most of them are stateless widgets. Given the rapid deployment and easy-to-use debugging tool Flutter offers, I tested the game quite frequently along with development.

The game website is hosted in Firebase with CI/CD setup in Github Action.

Challenges we ran into

I hadn't learned any Flutter prior to this project. I started to learn both Dart and Flutter during development of the project. It wasn't particularly difficult to learn them as the guide and documents help a lot. However, without proper knowledge of how to structure the code base and what design patterns I may follow, the code base got a bit messy and untidy. In addition, I was under the impression that it is easy to animate things in Flutter. Yet it is more suitable to use Lottie when it comes to complex animation.