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) {
    INPUT.innerHTML=x.replace(/\n/g,'<br>')
    F(x)
}

F=(g)=>{
  OUTPUT.innerHTML='...';
  var T=~new Date,
  M=(g,b,d,r=g.slice(0))=>g.every((c,p)=>c!=b?1:(c=g[p+d])!=b&c!='.'?0:r[g[p-d]!=b?r[p]='.':1,p+d]=b)&&r,
  o=~g.search(/\n/),
  h=g.replace(/\d/g,'.'),
  g=[...g.replace(/g/g,'.')],
  k={},t=[],s=[],i=0,j=0
  W=n=>{    
      for(n=10001;--n&&g.some((c,p)=>c!='0'&&h[p]=='g');g=t[i++],s=k[g+''])
        g.map((c,p)=>c=='.'&&
          [-1,1,o,-o].map(
            (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 
          )
        )
      if(n)
      {
        j+=i;
        OUTPUT.innerHTML='T(ms) '+(T-~new Date)+', Checked ' + j +', Len ' + s.length/3 +'<br>'+s
      }
      else 
      {
        j+=i;
        t=t.slice(i) 
        i=0;
        OUTPUT.innerHTML='T(ms) '+(T-~new Date)+', Checked ' + j +', Pending ' + t.length + ', Len ' + s.length/3

        setTimeout(W, 10);
      }
  }
  setTimeout(W, 10);
}