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
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.
* 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?
* 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.
> 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.
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.
> 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!
it works with mouse or Tab for piece selection. arrows for moves, and backspace for undo
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.
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!
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.
I'll try to come up with something better in the long term
A circle and a triangle, for example.
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.
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!
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).
Apart from that, nice game, well done!