Flow Free JavaScript clone

I’ve been playing a lot of Flow Free on my phone and tablet. Probably far too much, but I really enjoy it.

The aim of the game is to link each of the dots together with their counterparts via a drawn line, but you also need to ensure the whole box is filled with the lines. This means that on some levels there are multiple solutions, or that the solution you need is not obvious!

I was interested in how easy it would be to re-make the game in web technologies, so I took the opportunity to learn about CSS variables and experimented with very minimal HTML.

The result is available to experiment with on Codepen and the source is also available on github.

3 Replies to “Flow Free JavaScript clone”

  1. Hi Dom,

    Could you please briefly explain how the level coding works (e.g. ‘8’: [‘2b7gfe5g10d1f3b1g2e1c2ca1h3a5h5’] ). Thank you in advance, beste regards, Dirk

    1. Hey Dirk,

      The level strings are parsed by _loadLevel which converts the string to a flat array. Numbers are converted to contiguous 0s and letters are replaced (via parseInt(x, 36) - 9) with numbers. When the level is rendered, the 0s represent a currently empty spot and the numbers are start/end points that correspond to the colours available.

      Thanks for your interest, hope that helps!

      Thanks,

      Dom

  2. Now I see it. I wasn’t looking at the conversion and assumed it was a matrix / chessboard style coding. Thanks a lot for your quick reply. Best regards, Dirk

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.