Tiles

Home Screen
puzzle with image tiles (desktop app)
new high score (best time)
playing with images tiles
home screen
tiles created with CustomPainter
Running in a web browser
playing image tiles 4x4 (native app)
on an iPhone 13 (mobile)
homescreen on mobile
standard tiles on desktop
Showing help screen with keyboard instructions
home screen with gradient tiles

Inspiration

The puzzle hack submission has two goals: be an enjoyable and playable game; and to be a good showcase for Flutter's animation, flexibility and performance. It uses flutter's animation foundational classes extensively and allows playing the game with a variety of tilesets on mobile, desktop and browser, at any size.

A secondary goal was to showcase Flutter's flexibility by allowing the game to be played completely with a Keyboard. It will also be playable by touch and mouse. In that vein, it will also allow the game to work on any size screen, from a small phone to a huge television while still looking attractive and resizing fluidly while maintaining animation and graphics performance.

Setting up keyboard interactivity used a lot of boilerplate and encouraged me to open source the solution as a KeyMap widget (https://pub.dev/packages/keymap)

i also used the line icons package https://pub.dev/packages/line_icons and the provider package for state management.

What it does

The Game lets the user play sliding tiles at the sizes of 3x3, 4x4 and 5x5 (if they have the patience). It animates all moves and interactions.

How we built it

It was built using Flutter with a plugin we wrote an open-sourced, line icons and provider.

Challenges we ran into

The biggest challenge was in the game logic. It is possible to create unsolvable puzzles using random tile shuffling. As a result I had to build a complete game model, complete with legal moves and a game logic engine that could shuffle tiles in a way that conformed to the physical game.

Accomplishments that we're proud of

the game is completely playable with keyboard, touch or mouse and works on every device
the performance, especially with complex custom painting and transforms
support for different display sizes and input types
the extensive use of animation
the custom built widgets (including decorative tiles built using custom paint only)
the flexible layout (using LayoutBuilder, MediaQueryData and Platform from dart:io)