IceSicle

homescreen
rules
game screen
game screen 2
windows app [portrait aspect ratio]
windows app [landscape aspect ratio]
android app [landscape aspect ratio]
android app [portrait aspect ratio]
lose screen [mobile web]
win screen
lose screen

Inspiration

Flutter has been really amazing since it was launched, and our team members have built many mobile applications using it, but we rarely made anything web based using it, that too a game. So, this flutterhack hackathon seemed like a perfect opportunity to make something cool and learn more about flutter in depth. That was our inspiration to participate in flutterhack, For the theme of our game, we wanted it to be reimagined and kinda different from what we regularly see. We wanted to make it visually appeasing and with a sense of reality induced in a gamified way. So that is how we came up with this theme and built our game called IceSicle, and made it available for a whole lot of platforms.

What it does

IceSicle is a sliding puzzle game, with 5 blocks in each row and column. A user would be asked to select a level [easy, medium, hard], which they can do using either the arrow and enter keys or mouse/touch and then the game shall start. The blocks are represented as ice cubes floating on ocean, and the initial time of the game is set to late night. All they need to do is fix the puzzle before the ice melts. They can see the remaining time on the side of screen. Users also have 2 special power swaps, that they can use to swap positions of any two blocks across the arrangement. As the time progresses, the moon goes down and sun comes up, thereafter melting the ice blocks, which in turn results in time limit being exhausted. If they complete the puzzle within the time, they'll be declared as the winner and their final score would be calculated based on the time taken to complete it. Otherwise, if a user fail to complete the puzzle within the time frame, the game would be over.

We've tried our best to make it look beautiful and work amazingly. We've added sound effects for option selecting, changing levels and moving puzzle pieces. We've also made bunch of animations on rive and integrated them with our game. The game has 4 animation project files imported from rive and also extensively uses in built flutter native animations to make it look smooth and work nicely.

IceSicle is available in fully functional condition for the following platforms:

Web [completely responsive]
Windows
Android

We're in progress to make it totally complete for the following platforms:

iOS
macOS

How we built it

The whole game is made using flutter. We made the logic of our game through setting a grid of 5x5 = 25 elements which is arranged through an integer list and is returned as a grid of containers with their block number written on them. These containers act as ice blocks that the user essentially moves. When a block is tapped or the key is pressed in its direction, a set of functions are called to set the new arrangement of list, and a sliding animation is implemented at that point to make it appear as if the block move from its place to the empty space. This keeps on happening till the user either wins the game or the time runs up. After that, if they win it, their total game time is calculated as a score and shown to them. Additionally, we wanted to make it appear as if the the night changes to day and eventually it becomes sunny. So, a user would need to complete the puzzle before it melts [theoretically]. To implement this part, we introduced rive animation again which loads up a cute loading bar on the side of our game screen. Moreover, the whole color of our background changes from dark to light gradually to signify the change of time. We've tried to keep it subtle so that its not irritating to the user.

For hosting our web application, we used firebase's hosting services which was really easy to work with, and it is live at this url: https://icesicle-puzzle.web.app/

Challenges we ran into

We ran into a couple of challenges while making the game, some of them include:-

completing the whole game within the time,
making it smooth
using rive animations since it was our first time using it
making it cross platform workable and responsive

Accomplishments that we're proud of

We're very proud of completing IceSicle in time and adding as many things as we could. We also are proud of how we tweaked the original rules and came up with our own rules and logic to give it a different vibe. Also, we were pretty new to a lot of things such as rive, windows development and more, so getting things to work is a real proud moment for real.

What we learned

We learnt a lot about flutter in general and about animations and transitions. We also learnt about the cross platform capabilities of flutter and how easy it can be to create cross platform apps using the same codebase with little to no changes.