The Witness in Vanilla JS

I love puzzle games.

At some point in the last 6 months i stumbled on a puzzle game on called The Witness. Its not a new game, so this isn’t a review… but what i will say… is that the puzzle mechanics led to some of the most satisfying puzzles i’ve experienced in a game. I became (and remain) a bit (a lot) obsessed with it.

For me, the main hook on these puzzles was that the logic of them grew sufficiently complex that i would sit and feel stumped as to how the game’s code could even validate my input as correct/incorrect, let alone efficiently. Later in the game there is a random generator of these puzzles, which i struggled to wrap my head around the computational complexity of. To some extent my enjoyment of the puzzles themselves became secondary to the (don’t say beauty, don’t say beauty)… BEAUTY of the programming.

I couldn’t just read the code, so it was clearly only beautiful to me because its logic was, like the game, puzzling.

After completing the game, I told myself that the final unofficial puzzle was to truly understand how these puzzles worked, and so, i sat down over a bunch of weekends and coded up the levels/puzzles from The Witness in vanilla JS + HTML Canvas. Feel free to take a look:

https://hallofthemountaink.ing

[Warning: I’ve intentionally not described any part of the game’s puzzle design because it somewhat ruins the fun. I wouldn’t suggest your first experience to be with my limited remake, please play the original game first.]

Even having a finished product to look at and interact with, i did trip over a few hurdles trying to implement some of the puzzle mechanics, and overall it was a pretty great learning experience in multiple areas.

  • Key learnings:
    • Computational Complexity
    • Hamiltonian cycles & self-avoiding walks
    • Packing and tiling of Polyominoes
      • Search algorithms
      • JS and algorithm optimisations, despite the fact i implemented basically none.
      • HTML Canvas

-Daniel

Leave a comment