JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  Input:<br />
  <textarea style="width: 130px; height: 200px; resize: none;" id="inputBox">0WWWWWWWWW
1  lll    
2  LLLL   
2  llll   
0         
1  vv  vv 
1  V  V   
1   vv    
0    F    </textarea>

  <br />
  <input type="button" value="Load Input" id="LoadInput" />
  <br />
  <br /> Game:

  <br />
  <table>
    <tr>
      <td>
        <div id="gamediv" style="width: 200px; height: 200px; border: 1px solid gray; overflow-y: auto"></div>
      </td>
      <td>
        <table>
          <tr>
            <td></td>
            <td><input type="button" class="dirbtn" value="Up" id="moveU" /></td>
            <td></td>
          </tr>
          <tr>
            <td><input type="button" class="dirbtn" value="Left" id="moveL" /></td>
            <td><input type="button" class="dirbtn" value="Wait" id="moveW" /></td>
            <td><input type="button" class="dirbtn" value="Right" id="moveR" /></td>
          </tr>
          <tr>
            <td></td>
            <td>
              <input type="button" class="dirbtn" value="Down" id="moveD" /></td>
            <td></td>
          </tr>
        </table>
        <input type="text" id="moves" value="" />
      </td>
    </tr>
  </table>
  <br />
  <input type="button" value="Find optimum" id="solve" />
  <br />
  <br />
  <input type="text" style="width: 400px" value="" id="seq" />
  <br />
  <br />
  <br />
  <br />
  

</body>

CSS

body {
  font-family: "Courier New"
}

.dirbtn {
  width: 60px;
}

td {
  vertical-align: top;
}

JavaScript

var fx, fy;
var grid = null;


function LoadInput() {
  grid = [];
  var input = document.getElementById('inputBox').value;
  var lines = input.split('\n');
  for (var y = 0; y < 9; y++) {
    var line = lines[y];
    var row = {
      speed: parseInt(line[0]),
      direction: 1,
      cells: []
    }
    for (var x = 0; x < 9; x++) {
      var c = line[1 + x];
      if (c == 'v' || c == 'l')
        row.direction = -1;
      if (c == ' ' || c == 'F')
        c = '.';
      row.cells.push(c);
    }
    grid.push(row);
  }
  fx = 4;
  fy = 8;
  document.getElementById('moves').value = '';
  printGrid(grid, fx, fy);
}

function formatGrid(grid, fx, fy) {
  var output = "";
  for (var y = 0; y < 9; y++) {
    var row = grid[y];
    output += row.speed;
    for (var x = 0; x < 9; x++) {

      if (fy == y && fx == x) {
        if (row.cells[x] == 'v' || row.cells[x] == 'V')
          output += '&nbsp;' + '*';
        else
          output += '&nbsp;' + 'F';
      } else
        output += '&nbsp;' + row.cells[x];
    }

    output += "<br>";
  }
  return output;
}

function printGrid(grid, fx, fy) {
  document.getElementById('gamediv').innerHTML = formatGrid(grid, fx, fy);
}

function check(grid, move) {
  if (fy == 0)
    return "win";

  // animate grid
  if (move > 0) {
    for (var y = 0; y < 9; y++) {
      var row = grid[y];
      if (row.speed > 0 && move == 1 || row.speed == 2) {

        if (fy == y && row.cells[fx].toUpperCase() == 'L')
          fx += row.direction;

        if (row.direction == -1) {
          var i, temp = row.cells[0];
          for (i = 0; i < 8; i++)
            row.cells[i] = row.cells[i + 1];
          row.cells[i] = temp;
        } else {
          var i, temp = row.cells[8];
          for (i = 8; i > 0; i--)
            row.cells[i] = row.cells[i - 1];
          row.cells[i] = temp;
        }
      }
    }
  }

  // out of box
  if (fx < 0 || fx > 8 || fy > 8)
    return "die";

  // on vehicle
  var cells = grid[fy].cells;
  if...