Same as my first version, you can earn sticks to unlock the next level and the challenges get harder as you progress. With the newly added Puzzled Maker, you can now create your own matchstick puzzles and generate a shareable link to stump your friends :)
Nice job. I'd seen similar things in the past but I had no idea this was an actual type of puzzle.
Your game has a bug which is relatively common in drag-and-drop games. If the viewport is smaller and I drag a match off-screen by accident, it can get stuck to the edge. Then it can become detached in such a way that makes it impossible to recover the match.
Thanks for trying this out. I'll fix the off-screen issue later.
I created this game because of an old news my wife shared with me, it was about The New York Times bought the Wordle game. I was then surprised that such a simple, old-style game caught the attention of a big company. I said "I'd rather play a matchstick puzzle", and it was that moment that inspired me to create a free online version with all the puzzles procedurally generated by my own hand-made solver (I like the sound of this :D). Personally, I like moving one and only one matchstick to solve a puzzle rather than 2 or 3 sticks, also I don't like those tricky solutions like negative number, rotation trick and etc. although they could be a very creative solution and let you think outside the box sometimes, IMO, it is just not elegant and sometime distracting to encourage people to think in a systematic way.
You made me chuckle a bit with the whole “hand-made solver” thing with discrete puzzles like this, since 99% of the time to create a new puzzle, you just start with a solved problem (arithmetic equality) and introduce a sequence of random valid moves to put it in a unsolved state.
I remember one of my freshman computer science assignments was to make a Rubik’s Cube game. That was when a lot of undergrads were first introduced to the idea of using a stack and then "unwinding" it to simultaneously build the problem + solution.
yeah, the solver behind Mathstick is pretty much like what you described: building the problem + solution simultaneously, besides you also need to collect the multiple solutions for the same question and information for further classifying the difficulty of a puzzle.
Just like "hand-made" pizza used as a response to the rise of frozen, factory-produced pizza and to establish authenticity against fast-food chains. Maybe "hand-made" will be used to emphasize a app/software is made by human rather than being vibecoded or completely AI generated in the future. Also, if you use the Puzzle Maker to create your own puzzle, it becomes a "hand-made" puzzle :)
Highly recommend y'all try playing with the Puzzle Maker first! It’s a great way to get a feel for the shape of numbers and the different moves you can make.
I personally found this 'learn-by-doing' approach really helps me understand the patterns before I tackle the harder levels.
nice game! may i know what amount of js/css knowledge should i possess to be able to write sth like this? Eloquent JavaScript + any generic CSS book enough? thanks for making my evening.
thank you and glad you love it, those books are more than enough.
As for the css part, I would suggest you start by building the layout for the desktop first. Once the desktop version looks good, use media queries to adjust the design for mobile and tablet sizes.
As for js and html part, think in Components: Instead of one giant file, break your code into "modules" or "components". In my matchstick game, I built the "Puzzle Display" as a standalone component. This allowed me to reuse the exact same code for the main game, the puzzle creator, and the shareable play pages.
For specific effects or tricky logic, Google and LLMs (like ChatGPT) are great resources. Avoid "copy-pasting" code you don't understand. Always try to deconstruct how a solution works before adding it to your project. Use these tools as teachers, not just shortcuts.
Most importantly, enjoy what you are doing. Let me know if you need more info, I'm more than happy to help. Good luck to your coding journey.
Thanks, I used to do something like that when I made a tabletop like card maker using three.js + angular 8, but it has been a long time ago, I need to catch up with the details how to implement it with angular v21 since it is almost a completely new framework compared to the old versions
Mathstick 2 is now ready!
Same as my first version, you can earn sticks to unlock the next level and the challenges get harder as you progress. With the newly added Puzzled Maker, you can now create your own matchstick puzzles and generate a shareable link to stump your friends :)
For example, check out this custom challenge I just created: https://mathstick.github.io/play?q=ktoylsjcnmylbetuinmylielj...
Feel free to share your puzzles below and feedback is welcome.
The answer to all of these should be moving a stick over the equality sign to change it to an inequality sign.
This is too tricky to be allowed. Let's play a fair game :D
Nice job. I'd seen similar things in the past but I had no idea this was an actual type of puzzle.
Your game has a bug which is relatively common in drag-and-drop games. If the viewport is smaller and I drag a match off-screen by accident, it can get stuck to the edge. Then it can become detached in such a way that makes it impossible to recover the match.
https://en.wikipedia.org/wiki/Matchstick_puzzle
Thanks for trying this out. I'll fix the off-screen issue later.
I created this game because of an old news my wife shared with me, it was about The New York Times bought the Wordle game. I was then surprised that such a simple, old-style game caught the attention of a big company. I said "I'd rather play a matchstick puzzle", and it was that moment that inspired me to create a free online version with all the puzzles procedurally generated by my own hand-made solver (I like the sound of this :D). Personally, I like moving one and only one matchstick to solve a puzzle rather than 2 or 3 sticks, also I don't like those tricky solutions like negative number, rotation trick and etc. although they could be a very creative solution and let you think outside the box sometimes, IMO, it is just not elegant and sometime distracting to encourage people to think in a systematic way.
You made me chuckle a bit with the whole “hand-made solver” thing with discrete puzzles like this, since 99% of the time to create a new puzzle, you just start with a solved problem (arithmetic equality) and introduce a sequence of random valid moves to put it in a unsolved state.
I remember one of my freshman computer science assignments was to make a Rubik’s Cube game. That was when a lot of undergrads were first introduced to the idea of using a stack and then "unwinding" it to simultaneously build the problem + solution.
yeah, the solver behind Mathstick is pretty much like what you described: building the problem + solution simultaneously, besides you also need to collect the multiple solutions for the same question and information for further classifying the difficulty of a puzzle.
Just like "hand-made" pizza used as a response to the rise of frozen, factory-produced pizza and to establish authenticity against fast-food chains. Maybe "hand-made" will be used to emphasize a app/software is made by human rather than being vibecoded or completely AI generated in the future. Also, if you use the Puzzle Maker to create your own puzzle, it becomes a "hand-made" puzzle :)
I think I broke it a little, playing around with INT64_MAX - https://mathstick.github.io/play?q=hrojihaacciabcmtskiistbij...
Edit: mostly directed at OP, the puzzle maker claimed something like 12 identical solutions for the same puzzle
Yeah, you did! It's integer overflow, good catch!
Nice! What did you build this with?
Also, submit it to https://hnarcade.com :)
js+css, angular only for fancy pop menu and dropdown list, no angular material though, as as to keep it simple and lightweight.
sure, will have a look. thanks!
Highly recommend y'all try playing with the Puzzle Maker first! It’s a great way to get a feel for the shape of numbers and the different moves you can make.
I personally found this 'learn-by-doing' approach really helps me understand the patterns before I tackle the harder levels.
nice game! may i know what amount of js/css knowledge should i possess to be able to write sth like this? Eloquent JavaScript + any generic CSS book enough? thanks for making my evening.
thank you and glad you love it, those books are more than enough.
As for the css part, I would suggest you start by building the layout for the desktop first. Once the desktop version looks good, use media queries to adjust the design for mobile and tablet sizes.
As for js and html part, think in Components: Instead of one giant file, break your code into "modules" or "components". In my matchstick game, I built the "Puzzle Display" as a standalone component. This allowed me to reuse the exact same code for the main game, the puzzle creator, and the shareable play pages.
For specific effects or tricky logic, Google and LLMs (like ChatGPT) are great resources. Avoid "copy-pasting" code you don't understand. Always try to deconstruct how a solution works before adding it to your project. Use these tools as teachers, not just shortcuts.
Most importantly, enjoy what you are doing. Let me know if you need more info, I'm more than happy to help. Good luck to your coding journey.
I appreciate the good faith effort here to learn (and advise on) programming skills! It’s rare nowadays.
Exactly. We only find real fulfillment when we work on what we’re passionate about. We need to value the process more than the outcome.
Nice one. I spent about 15 minutes playing, thank you.
Glad you enjoy it!
This is very addictive! Love it.
I thought this game might be too tough. You're actually the first one besides my wife who's told me it is addictive.
Thank you! Glad you find it addictive, enjoy the game :)
Would you be willing to add a manifest so this can be "installed" as an app on Android?
sure i'll consider converting it to PWA if people prefer playing the main game than creating and sharing puzzles with the Puzzle Maker.
I think you can just pretend to be a PWA, no need for code changes.
You may need an unused service worker, or not, I don't remember.
This just means your site looks like an Android app (but still needs net, etc).
Thanks, I used to do something like that when I made a tabletop like card maker using three.js + angular 8, but it has been a long time ago, I need to catch up with the details how to implement it with angular v21 since it is almost a completely new framework compared to the old versions
Typo: invetory
good eye~ thanks
may I know which page it is?