Show HN: Checkerboard Programming – write code to match checkerboard patterns(checkerboardprogramming.com)
checkerboardprogramming.com
Show HN: Checkerboard Programming – write code to match checkerboard patterns
https://www.checkerboardprogramming.com/
20 comments
Hey, thanks a lot! And neat workaround :)
Really fun idea and a great implementation. I have been trying to come up with programming puzzles for my own project https://www.dev-esc.com - an escape room for devs
My own “Show HN” is at https://news.ycombinator.com/item?id=28579191
andersource would you be willing to consider letting me incorporate something like a checkerboard puzzle?
Have you any metrics on average completion times etc? Striking the right balance between fun vs difficult has proved tricky for me.
My own “Show HN” is at https://news.ycombinator.com/item?id=28579191
andersource would you be willing to consider letting me incorporate something like a checkerboard puzzle?
Have you any metrics on average completion times etc? Striking the right balance between fun vs difficult has proved tricky for me.
Hey, thanks!
That looks really cool, of course you can incorporate a puzzle!
I don't have data on solution times, but I think it's very different for an individually-solved series of similar puzzles and a group escape room-style puzzle. My recommendation would be to prefer a puzzle that requires an "Aha!" moment and from there is relatively quick, rather than a more meticulous one that requires tweaking parameters and messing around a lot.
That looks really cool, of course you can incorporate a puzzle!
I don't have data on solution times, but I think it's very different for an individually-solved series of similar puzzles and a group escape room-style puzzle. My recommendation would be to prefer a puzzle that requires an "Aha!" moment and from there is relatively quick, rather than a more meticulous one that requires tweaking parameters and messing around a lot.
Thank you. That’s an interesting thought about “aha” moments versus meticulousness. I’ve tended to offer “slow burn” puzzles, although I think there’s one exception in the escape room at present.
Love it!
It reminds a bit on this mehanical programming game https://www.turingtumble.com/
where you have to reconstruct a marble pattern with logical gates controlling how the marbles flow.
Will try this with my daughter next time.
where you have to reconstruct a marble pattern with logical gates controlling how the marbles flow.
Will try this with my daughter next time.
Thanks! Turing Tumble looks awesome
I just finished solving the puzzles. Overall I really enjoyed the game.
The only thing I did not like was that for certain puzzles, such as the Ying-Yang one, coming up with an idea that will solve the puzzle is quite straight forward, but figuring out the parameters you used for some of the curves can take a long time.
The Ying-Yang problem has no hints and I had to use two different sine waves for the upper half and the bottom half of the screen, just because I couldn't guess which one you used. I also tried solving the "spiraling into control" one without looking at the hints, and was unable to.
The only thing I did not like was that for certain puzzles, such as the Ying-Yang one, coming up with an idea that will solve the puzzle is quite straight forward, but figuring out the parameters you used for some of the curves can take a long time.
The Ying-Yang problem has no hints and I had to use two different sine waves for the upper half and the bottom half of the screen, just because I couldn't guess which one you used. I also tried solving the "spiraling into control" one without looking at the hints, and was unable to.
Thanks, and really happy you enjoyed it!
> The only thing I did not like was that for certain puzzles, such as the Ying-Yang one, coming up with an idea that will solve the puzzle is quite straight forward, but figuring out the parameters you used for some of the curves can take a long time.
Yeah, I know that's an annoying issue. I've been trying to think how to implement a good fuzzy judge, but so far everything I have will either forgive mistakes in small but important components or require a major restructuring of the game. Would be happy to hear if you have suggestions for that :)
> The only thing I did not like was that for certain puzzles, such as the Ying-Yang one, coming up with an idea that will solve the puzzle is quite straight forward, but figuring out the parameters you used for some of the curves can take a long time.
Yeah, I know that's an annoying issue. I've been trying to think how to implement a good fuzzy judge, but so far everything I have will either forgive mistakes in small but important components or require a major restructuring of the game. Would be happy to hear if you have suggestions for that :)
> Would be happy to hear if you have suggestions for that :)
I would just make sure everything uses simple parameters. The "Making Waves" puzzle is easy to figure out by trial and error, because the values to guess are simple.
One thing that is particularly hard to guess is the "Spiraling into control" puzzle, because the parameters you have to guess are tied to the value of the time increment for drawing the curves. The parametric equation to that curve is currently :
x(t) = 8 + t * cos(A * 2 * PI * t)
y(t) = 8 + t * sin(A * 2 * PI * t)
where A is the ratio between the `t` increment (0.4) and the angle increment (PI/36) (or is it the other way around?). That ratio is just too hard too guess. I would just rewrite the solution to make the constant A easy to guess, so that people writing code with different increments and just playing around with the constant can eventually figure it out.
The Ying-Yang one is harder to simplify, because the result will not look as good. Maybe add an hint?
I would just make sure everything uses simple parameters. The "Making Waves" puzzle is easy to figure out by trial and error, because the values to guess are simple.
One thing that is particularly hard to guess is the "Spiraling into control" puzzle, because the parameters you have to guess are tied to the value of the time increment for drawing the curves. The parametric equation to that curve is currently :
x(t) = 8 + t * cos(A * 2 * PI * t)
y(t) = 8 + t * sin(A * 2 * PI * t)
where A is the ratio between the `t` increment (0.4) and the angle increment (PI/36) (or is it the other way around?). That ratio is just too hard too guess. I would just rewrite the solution to make the constant A easy to guess, so that people writing code with different increments and just playing around with the constant can eventually figure it out.
The Ying-Yang one is harder to simplify, because the result will not look as good. Maybe add an hint?
Thanks a lot for the suggestions!
I added hints to the Yin-Yang one. Regarding the spiral, I get what you say, but I've found that more convenient parameters yield spirals that I like much less. I broke down the hints so that it's less spoiler-y, hope this makes for a better experience.
I added hints to the Yin-Yang one. Regarding the spiral, I get what you say, but I've found that more convenient parameters yield spirals that I like much less. I broke down the hints so that it's less spoiler-y, hope this makes for a better experience.
Indeed, when attempting to use the initial nested loop as much as possible, its body essentially becomes a pixel shader.
I was reminded of one of my earliest side projects, a Mandelbrot set renderer; amusing that the last exercise is exactly that.
I was reminded of one of my earliest side projects, a Mandelbrot set renderer; amusing that the last exercise is exactly that.
Nice, this looks like a good way to practice basic looping and operators. Has anyone just hard-coded the target board and copied the values instead of calculating?
On a side note, I'm curious how the sandbox was implemented. For security issues, how does one make sure that the sandbox is not just a javascript eval?
Hey! There isn't a sandbox, this is indeed just a javascript eval. It's essentially the same as running code on the devtools console, except with an editor UI and wrapped in way that saves the hassle of messing with the DOM.
The source code is all right there in play.js
This is a solution to every puzzle:
This is a solution to every puzzle:
eval(goal_program);
draw_checkerboard = draw_checkerboard_goal;Cool idea. Was having issues with phone
Thanks! Yeah it's problematic on mobile, I think writing code on mobile will be cumbersome anyway
I'd love to see some solutions so I can learn how you're intended to solve these.
That's a great idea, I might compile a list of solutions. In the meantime if you're really curious, the solution is available client-side (the whole site is static) in the "goal_program" variable, so you can run it through a js unminifier and look at a working solution, albeit undocumented and with meaningless variable names.
Ended up with a quick solution to all problems so I can go back to work. Please forgive me
function draw_checkerboard(board) { var res = document.querySelectorAll('#goal-checkers-group rect'); var len = Math.sqrt(res.length); for (var row = 0; row < len; row++) { for (var col = 0; col < len; col++) { board[row][col] = res[col + row * len].className.baseVal; } } }
Edit: forgot that col/row size wasn't fixed
Edit 2: > Well, that's the end of this small journey.
Not that small of a journey actually, quite a lot of interesting puzzles. Good job!