slideboom

featured image
linux chrome
linux appimage
windows msix
windows chrome light menu
windows chrome dark

Inspiration

I tried to build a 2d version of the Rubik's Cube. After some research I stumbled across a video by carykh who already built something similar to what I had in mind. link. To make the puzzle even harder I added a bomb that explodes once the player moves it.

What it does

Similar to the provided slide puzzle demo the goal is it to slide the tiles into numerical order. (123...). But instead of a hole where the player can move the tiles, the tiles overflow over the border and appear on the other side. Another difference is, that you can only move an entire row/column. You can also enable a bomb that should not move, otherwise the game is over. The goal is it to complete the puzzle as fast as possible and in the least amount of moves. The game can be controlled via touch inputs or with the keyboard.

How I built it

The game was built using flutter and most of the time a physical android device or a web window. Since the game mechanics are different from the provided example I decided to build the game from scratch using flutter create. The splash screen on the web uses a lottie animation and the animated native splash package. For all other platforms I use the flutter_native_splash package with a static image, since the load times there are much faster. To make the app responsive I used the responsive_framework package to make the breakpoints easier. For state management and storage for the high scores I used the getx framework.

Challenges I ran into

Scramble

At first I just scrambled the tiles randomly, but then some starting positions are unsolvable, so I implemented a scramble that goes only through valid moves.

Timer

For the timer I first used a Timer.periodic which works great, but on a slower device it doesn't represent a real timer and is off by a few seconds. The solution was to use a Ticker which worked perfectly.

Web loading

The first time you open a flutter web app it takes a lot of time to load the app. At first I only had a static image but then it wasn't clear if the app is still loading. So I implemented a lottie animation until the app is fully loaded.