JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="G0()">Ex0</button>
<button onclick="G1()">Ex1</button>
<button onclick="G2()">Ex2</button>
<button onclick="G3()">Ex3</button>
<button onclick="G4()">Ex4</button>
    <pre id='INPUT'></pre>
    <div id='OUTPUT'></div>

CSS

div,pre { 
    font-family: "Courier";
    font-size: 16px;
}

JavaScript

G4=function(){
    Go('.####.\n##00##\n#.00g#\n#.0.1#\n#..g2#\n######')
}
G3=function(){
    Go('.####.\n##1g##\n#22g3#\n#4255#\n#4.56#\n#.006#\n#7008#\n######')
}
G2=function(){
    Go('######\n#1002#\n#1002#\n#3445#\n#3675#\n#8gg9#\n######')
}
G1=function(){
   Go('..####..\n..#00#..\n###00###\n#......#\n#.1122.#\n##3124##\n.#3344#.\n.##55##.\n..#gg#..\n..####..')
}
G0=function(){
   Go('#######\n#001gg#\n##.222#\n.######')
}

Go=function(x) {
    OUTPUT.innerHTML='...'
    INPUT.innerHTML=x.replace(/\n/g,'<br>')
    setTimeout(function(){
      var T=~new Date
      var v=F(x)
      T-=~new Date
      OUTPUT.innerHTML='T(ms) '+T+',Len' + v.length/3 +'<br>'+v
    },100)
}

F=function(g)
{
  var M=function(g,b,d)
  {
      var r=g.slice(0)
      return g.every(function(c,p){
          return c!=b?1:(c=g[p+d])!=b&c!='.'?0:r[g[p-d]!=b?r[p]='.':1,p+d]=b
      })&&r
  }

  var o = ~g.search(/\n/),h = g.replace(/\d/g,'.')
  g = g.replace(/g/g,'.').split('')
  for(k={},t=[],s=[],i=0;g.some(function(c,p){return c!='0'&&h[p]=='g'});
      g=t[i++], s=k[''+g])
      g.map(function(c,p) {
          c=='.'&&
          [-1,1,o,-o].map(function(d,i)
          { 
              (-(b=g[p-d])||b=='0')
              &&(m=M(g,b,d))
              &&!k[q=''+m]
              ?k[t.push(m),q]=s+' '+b+'LRUD'[i]:0 
          })
     })

  return s
}