https://jsfiddle.net/L4xd1xct
This is basically nothing else than a static maze, and a "render" function which will show the result.
To solve this kind of issue, we use something which:
Store the start point in a "todo" list
Store the same point in the "visited" list
Pick a point in the todo
If this point is at a distance of 0 of the goal we reached the goal and we return the solution
Check all the 4 cells around this point and add all the empty cell, which we didn't visited yet
Add those in the todo / visited lists
Repeat going back to number 3 as long as there is something to do
The code could be:
https://jsfiddle.net/9udp2rpj
To see how this works and try different optimizations / algorithms you can use that:
https://qiao.github.io/PathFinding.js/visual/
Even if A* could scare you at first, it's actually is a pretty stupid code, it just tries all what's possible and pick the best solution (the one which has less steps). Actually it doesn't try ALL, it stops when it finds a solution and due to the fact we sort all the time the things to do based on the number of step we did, it should find the shorted possible way to go.
What is interesting is that by changing the sorting code with something a bit more complex you could actually change the behavior of the code. Think for example that some steps are slower (by walking in a swap for example) then you could have a "cost" for this step, and then by sorting by smaller cost you will find faster roads even if it requires more steps.
As always I'm here if you need more information