HN Explorer

Show HN: Block Sort, a mobile/PWA puzzle game without ads (matthijsgroen.github.io)

20 points by thaisi ↗ HN
I like small puzzle games to play on my mobile, (because you can put them away easily as well). But I got really annoyed that a lot of them force feed you advertisements.

To counter this I made my own puzzle game, as a progressive web app. This means you can install it on your mobile or desktop as an application, and play offline.

After the game is offline ready, no requests should be outgoing except checking for updates of the game. So there is no tracking/reporting going on. This also means I rely on old fashion email to get feedback!

The game is build in React + Typescript + Vite, and is open-source at: https://github.com/matthijsgroen/block-sort

Challenges:

- I wanted to make the game using open web standards such as HTML + CSS. The game actually features one image, the rest is done in pure CSS (the cubes, buffers and placement stacks);

- All animation is done through CSS animations;

- All levels are randomly generated, and then proven playable by a solver before a player gets the level on screen. To remove loading times for the high difficulty levels, a process was made to generate these levels offline, and the game only contains the random seeds to reproduce them (and then they are still solved by the game first before offering)

- The entire game is statically hosted, so there is no backend involved. This proved challenging for data transfer capabilities. The game now generates a QR Code image containing all encrypted/compressed game data, that can be loaded into another instance of the game.

13 comments

[ 3.4 ms ] story [ 28.5 ms ] thread
atmanactive
Great!

I really enjoyed this.

Working flawlessly in Berry Browser on Android. Animation is great, music is pleasant.

My only nitpick would be that the button to start the level is labeled as level number, so it is not entirely clear is it a button or is it an indicator. Just adding a word "START" as a second row would solve that.

Thanks.

husarcik
Awesome game! Simple feedback, your button icons are off center. At least for Firefox mobile.
thaisi
Yes I use all default fonts and emoji's. For the font symbols as button symbols I think I need to use something like font-awesome, I'll add it to the todo list!
prismatix
This works really smoothly on Android. Nice job on the technical aspects!

One suggestion I have is to make the game more challenging by having a target number of moves the player should stay under and award points based on that.

kevincox
Could easily be a 1-3 star score per puzzle. Then players can race through with any star count and go back to get the optimal solutions.
thaisi
For now the level number you get to is sort of your score, There are a lot of levels, and some players are already around level 400 :-) (no analytics, just from my social circle) being able to scroll back to get a level from 2 to 3 stars does not seem like a good effort somehow. But I will think if there is some way to measure differences in play, if that is really interesting to know.
noman-land
This is super fun but I don't know why!
kevincox
On minor feedback is the the transitions between levels feels slow. I am just waiting for the game which isn't fun.

- There is a slow victory animation.

- I need to click.

- There is a scrolling on the level screen. (Skipable but it isn't obvious and you need to click a moving button to do so).

- Click start.

The level entry is at least quite fast.

Maybe it would be good to have a "next puzzle" button at the end of the level. And speeding up the victory animation or making the "next" button appear quickly while the animation is still playing would really help to move from level to level smoothly.

thaisi
I think for the first levels that is true, but levels around 300+ will take quite some time, and then the time between play and the transitions is minimal. But good feedback, I will see it such a thing could be possible. It would help in the early levels.
jmpavlec
Very nice, very smooth experience on Android. The animations were well done.

One bit of feedback, you could have a next level button rather than returning to the main screen.

One the first level, it would be nice to point to the tutorial overlay you have on your main page or perhaps create a demonstration animation. It was easy enough to figure out but might be nice to route new users there. I only saw it after completing 10 levels. Your could also add a small explanation when new mechanics are introduced in the level itself.

Overall, great work!

cloudking
Very well done! Maybe add a bonus multiplier for lower completion time