slide_puzzle

A remake of the classic sliding puzzle. The goal is to navigate Cao Cao (the biggest piece) to the exit at the bottom, by carefully rearranging other pieces.

Multi-platform

The project is written in Flutter and runs on desktop platforms including Windows, macOS, Linux, as well as mobile platforms including Android and iOS. The game is also available as a web app, which can be accessed from any desktop browsers.

Live Demo

A web version is available here.

Known issue: the web version has some rendering issues when viewed from mobile browsers (for example, Chrome on Android). For best experience, please use a desktop browser, or install the Android/iOS app.

Project Overview

Please watch the project overview video in English and video in Chinese.

At a high level, the app can be divided into 3 parts: the background layer, the game board, and the puzzle pieces. Each puzzle piece also comes with a pair of interlocking attachments and a shadow for some added depth. They are then stacked as different layers, to make sure they always appear in the correct order. The color palette is configured as an InheritedWidget so its values can be modified in one place, and easily accessed elsewhere in the widget tree.

The puzzle pieces are made from AnimatedPositioned. In Flutter, implicit animation widgets like these are super easy to use - just give them a duration and an optional curve, and they’ll automatically animate when their values are changed. For the duration, I first check if the window size is different from before, and if so, I pass in zero. This is to skip the unwanted animation when the app is being resized. And for the curve, I use EaseOut to simulate physical objects being slowed down by friction.

To handle user input, I added GestureDetector. I used the onUpdate event instead of the onEnd event here. This reduces input lag, allowing the game to react before the gesture ends. For the reset button, I also added a MouseRegion widget to make it glow when being hovered.

The step counter is another example of utilizing implicit animations in Flutter. It’s also wrapped in a ValueListenableBuilder, so it can always keep up with the steps. I’ve published this widget as a package on pub and made a video explaining how it was made. If you like this animation, you can import it to your own project.

The game board is mostly a Container. I used a BackdropFilter to blur everything behind it, and a ShaderMask to create a beam effect. Since we want the beam to keep dancing around, it’s easier to use explicit animations with a controller. Also, the exit arrows at the bottom, and the highlighting effect on texts, are all made with Flutter’s explicit animations.

Lastly, I used a CustomPaint for the background. A text-painting version was first implemented but later scrapped because having to layout texts every frame caused some performance issues on the web. The simplified version looks similar but performs much better, even on low-end devices.

My Videos

I've published lots of Chinese video tutorials on Flutter, covering a wide range of topics and popular questions from viewers. Here are a few of them.

Animations

Intro to Animations in Flutter

How to choose the right animations for your needs

Implicit Animations

Explicit Animations

Other types of Animations

Keys

Scrollable

Asynchronous

Layout

Sliver

Flutter Discussions

About

Flutter challenge, more info: https://flutter.dev/events/puzzle-hack

Languages

Language:Dart 50.0%Language:C++ 24.4%Language:CMake 17.8%Language:HTML 4.6%Language:C 1.7%Language:Swift 1.4%Language:Kotlin 0.2%Language:Objective-C 0.0%

leftcoding / slide-puzzle-challenge