Readit News logoReadit News
Posted by u/kuboble 3 years ago
Show HN: Kuboble.com – Minimalistic sliding pieces puzzle gamekuboble.com...
Hi,

I wanted to share a simple game I wrote.

It's a sliding pieces puzzle like many others. I have focused a lot on making the experience smooth and minimalistic and the levels being challenging in a way a sudoku or chess puzzles could be.

I had no prior knowledge of game development and while it feels like someone competent could build this game in a week I spent over two years and hundreds of hours to bring this game to life.

My journey went through:

    - thinking it will be a PC game
    - being overwhelmed by the amount of different game frameworks
    - hiring an indie dev to bootstrap the game in Unity for me
    - realize the small levels are actually cool and it might fit on a phone
    - generating levels and playing through thousands of them myself to curate a smaller list
    - realizing the Unity wasn't a good choice
    - rewriting the game in html + js drawing on canvas + React
    - hiring a bunch of fiverr artists and testers to polish it up
I think I am finally satisfied with the result enough to be willing to share it with the world.

If you're a fan of minimalist sliding pieces puzzles I'd be happy if you give it a try!

the game has: - no ads - no tracking of any kind - fully offline after first load

huhtenberg · 3 years ago
Nice. Sokoban nostalgia says Hi :)

Some nits and comments if I may.

* Don't count moving stones as an actual move until the stone is released. I am on a PC and if I click-and-hold a stone and then move it back and forth, each move is counted even though I haven't released the mouse button yet. This is somewhat counter-intuitive and unexpected.

* Put the light source at the top. You have it at the bottom and this results in a drop shadow above the stones, which looks more like an unintended blur or ghosting. Also shadows/highlights are a bit inconsistent - base tiles imply that the light source is at the bottom-bottom-left, but the stones are shaded as if it's at the bottom-right.

* Perhaps reduce the size of stones a bit to add some breathing space around them when idle and when moving.

* Add a keyboard nav? There are two stones, so something as literal as awsd for one and arrows for another would work. Or just the arrows with a 'space' to toggle the focus.

* Starring criteria is unclear. Got one level with "optimal" rating, yet it gave 3 stars. This was the one where I had to undo several moves because I was mindlessly moving the stone back and forth without releasing it.

kuboble · 3 years ago
Thanks a lot! I haven't expected more than few people seeing it. I'm absolutely excited that people like it and give great feedback.

* the move is applied automatically the moment the done does stone_width/2 in a free direction. It would be tough to implement what you suggest. Also I did implement move counter the way you recommend - that if you make a move that cancels previous move it reduces the count but the testers were unanimously confused by it so I reverted it.

* there is no light source. It's few simple 2d images.

* I actually like how tight the stones are - like in a goban

* keyboard is on my todo if pepole intend to play on a pc

* starring is 5 for optimal score and 1 less for each extra move. Are you sure you have observed that anomaly?

huhtenberg · 3 years ago
* Then, once move is applied disallow moving the stone again without re-engaging it a new tap/click-hold? Or undo the last move silently if the following move is the reverse of the preceding one?

* I meant "implied" light source. My point was that visually it's somewhat messy due to shadows being on top.

Re: the starring thing - I can't reproduce, but 100% saw it. Was on the level 3.

julianwachholz · 3 years ago
The light source parent meant is rendered into your 2d sprites. The colored stones for example have a shine in the bottom right.
Bedon292 · 3 years ago
I am not really a frontend person, but I don't think it should be too bad to implement a move counter that doesn't happen until you release the stone. Something like an onmouseup / touchend event.
pmontra · 3 years ago
Nice game.

> the move is applied automatically the moment the done does stone_width/2 in a free direction

Shouldn't a move be complete when the stone bumps into a wall and stops moving? I guess you already have the code to detect that event. You can hook the move counter there.

Keyboard navigation is definitely due on a computer. Select a stone with mouse and move with arrows or awsd. We can play two handed. It's much better on a phone now because we can throw stones to walls with a finger.

sugarkjube · 3 years ago
> * there is no light source. It's few simple 2d images.

suggestion: if you turn the images upside down (or turn 180 degrees), the light will come from top.

it's a fun game, thanks for sharing !

[EDIT] one minor remark, there seems to be a small graphical glitch: eg. on level one, the 3 squares on the right side (not the top and bottom one) appear to have wrong perspective.

japanman425 · 3 years ago
Biggest tip of all is don’t be demoralised by snarky remarks such as this

> Sokoban nostalgia says Hi :)

HN is full of people who have seen it been there done it and like to point it out in the pass agg format such as that.

One of the most difficult barriers to starting a “cool” project for me is the “but X already exists” even worse when someone points it out to me in a snide manner.

Absolutely love your game. Reminds me of the primitive yet challenging games you would find on random floppy disks at a jumble sale. Thank you for making it!

kuboble · 3 years ago
Keyboard control with optional highlight of a current piece is available at https://kuboble.com/beta/

it works with mouse or Tab for piece selection. arrows for moves, and backspace for undo

user3939382 · 3 years ago
+1 for the keyboard. That would make it more addicting and immediately what I wanted.
soperj · 3 years ago
If you play more you'll realize there are levels with more than 2 stones.
Waterluvian · 3 years ago
I enjoyed this so much that I began sharing the link with friends. Well done.

Your journey is my journey, many times. I've tried so many different game engines and such. What I've learned that works for me and scratches my creator itch perfectly is:

- Make small games. And I mean SMALL. Like what you've done

- Write them for the web to trivialize sharing them with the world

- Use very basic HTML + JS/TS and maybe add React if you've got a lot of UI. And Canvas is great.

- Look into Pixi.js as an abstraction on the canvas API that gives you a ton of great features and huge performance for free (free WebGL if supported). I love Pixi because it just tries to be a renderer. It isn't a game loop or sounds or IO or physics.

- Explore the game you're developing, but don't succumb to scope creep. Know when to decide "that's a really cool idea, maybe I'll save it for my next game." I have too many games that are large in scope but totally incomplete.

- Never be deterred by "this is already been done" or "nobody will want to play this." The journey is the point. Sharing it with us is just a bonus.

ptrwis · 3 years ago
Even without Canvas HTML with SVG is great - you have lots of easy to add effects and built-in IO events. There is now a Web Animations API which is also easy and pleasant to use.
GordonS · 3 years ago
I tried level 1, moved the two stones onto the squares... and nothing happened?

Eventually I realised that the stones need to be placed on different coloured squares - I'm colour blind (red/green), and can't tell any difference at all between the stones. For the squares, I can tell one is a bit darker than the other. You might want to consider using more contrast, or a more colour-blind friendly colour palette.

Reminds me of Sokoban, which I first played more than 30 years ago!

kuboble · 3 years ago
I'm sorry. I will add a color-blind friendly palette.
pmontra · 3 years ago
Or two different shapes, because there are too many different color blindnesses. Board games started marking counters many years ago. Sometimes their colors are so similar even for non color blind people. I couldn't get a black from dark blue counter two nights ago, the light at the table was not great. And yellow looked a pale gray.

Examples for the game: the red stone could have a empty circle mark on the top it, the green one could have a circle with a dot inside. The destination squares would be marked with the empty circle and the dotted circle.

kuboble · 3 years ago
I have made a very quick-fix for colorblindness at https://kuboble.com/beta/

I'll try to come up with something better in the long term

darkvertex · 3 years ago
Yea, even better: distinct iconography.

A circle and a triangle, for example.

snny · 3 years ago
I had the same experience with Level 1, except I'm not colorblind but I was using a grayscale filter on my phone for other reasons. Thank you for calling this out!
matsemann · 3 years ago
I really like these kind of puzzle games. It's always so satisfying building up a kind of "intuition" on how to solve them, learn the patterns etc.

Well done on "finishing" it. Your story is a typical one, myself being guilty of it: Going too grand in the beginning, and never getting anything viable out. Focusing on the core gameplay, even if "only js+canvas" with no fancy 3d graphics etc is the right start.

agentwiggles · 3 years ago
Played the first 6 or 7 levels. I enjoyed this a lot, and I'm not usually much for puzzle games.

One thing I like is that you let the user undo as many moves as they want, and also that I can retry a puzzle without any kind of feeling that I've failed somehow. I've noticed in a lot of these online puzzle type games like Wordle and its various clones/cousins that the player is often punished somehow for experimenting with the puzzle. This strikes a good balance, where I can fiddle around with the puzzle to my heart's content but still feel satisfied when I get one in the target number of moves.

Nice work!

kuboble · 3 years ago
Thank you.

My idea is that the challenge here is not the time nor getting the puzzle right at first attempt, but as in math problems it's to find the best answer at all eventually.

And if I can't solve some level I can come back to it later (hence the filters for partially completed levels).

hxhxhrra · 3 years ago
Maybe consider a different color palette. I have a red/green color blindness (like ~8% of the male population), and I can only barely differentiate the colors.
kuboble · 3 years ago
That's a good point I haven't thought about. It's obvious mistake on my part. I will make the colors configurable perhaps. Interesting that none of the reviewers raised this point.
MrDrDr · 3 years ago
This is very good - got me spending more time playing than I intended to and I will definitely share - well done. Maybe consider the wordle - one game a day/ share your score with your friends on social media approach - so your users stay hungry and don't waste too much time playing it!
rajansaini · 3 years ago
Seconded! If you make it easy/fun to share I (personally) would totally do so :)
Ntrails · 3 years ago
I shared it by copy pasting a link to my friends. It really doesn't need to be any easier.
chienandalou · 3 years ago
FYI: while the game is running one core of my 5600X is always at 80% load (current Firefox on Fedora Linux), although nothing's really happening. It looks as if there's a busy loop in the background burning CPU cycles.

Apart from that, nice game, well done!

cookie_monsta · 3 years ago
Oh, yeah - I think it sucks my battery charge too, that would make sense