Spaceship Puzzle

by Ryan Allison

HTML

<html>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/Fj2hTS5Kjyw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <div>
  1. The alien space station is 23 parsecs away.<br>  
  2. A unit of fuel takes you 1 parsec.<br>
  3. Your ship can hold 15 units of fuel.<br>
  4. You can stop anywhere and drop off fuel, which you can pick up later. No fuel is lost in this process.<br>
  5. There are 45 units of fuel in your current location.
  </div>
  <table id="tblTrack"></table>
  <span>Current Fuel Level:</span> <span id="spnFuel">0</span>
  <br>
  <span id="spnAlertText"></span>
  <table id="tblButtons">
    <tr>
      <td></td>
      <td class="tdBtn" id="btnPickUp">Pick Up</td>
      <td></td>
    </tr>
    <tr>
      <td class="tdBtn" id="btnLeft">Move Left</td>
      <td><a id="btnReset"><u>Retry?</u></a></td>
      <td class="tdBtn" id="btnRight">Move Right</td>
    </tr>
    <tr>
      <td></td>
      <td class="tdBtn" id="btnDrop">Drop Fuel</td>
      <td></td>
    </tr>
  </table>
  <div id="divLog"></div>
</html>

CSS

table { text-align:center}
#tblTrack {border-collapse:collapse;}
#tblTrack td {border-width:1px;border-style:solid;min-height:20px;min-width:20px}
#tr1,#tr3 {background-color:Gray;}

#tblButtons {margin:20px 0 0 180px}
#tblButtons td {width:80px;height:30px;display:inline-block}
.tdBtn {background-color:gray;cursor:pointer}

#spnAlertText {color:red;font-weight:bold;display:block}

#btnReset {display:none; color:red; cursor:pointer}

JavaScript

var curStop;
var curFuel;
var stopFuel;
$(document).ready(function() {
  resetPuzzle();
});

function resetPuzzle() {
  var table = $("#tblTrack");
  var sb = "";
  for (var x = 1; x <= 3; x++) {
    var trid = "tr" + x;
    sb += "<tr id='" + trid + "'>";
    for (var y = 0; y <= 23; y++) {
      var tdid = "td" + x + "-" + y;
      if (y == 0 || y == 23) {
        sb += "<td style='width:35px;' id='" + tdid + "'>";
      } else {
        sb += "<td id='" + tdid + "'>";
      }
      if (x == 1 && y == 0) {
        sb += "Base";
      } else if (x == 1 && y == 23) {
        sb += "Goal";
      } else if (x == 3 && y == 0) {
        sb += "45";
      } else if (x == 2 && y == 0) {
        sb += "*";
      } else if (x == 1) {
        sb += y;
      }
      sb += "</td>";
    }
    sb += "</tr>";
  }
  table.html(sb);
  curStop = 0;
  curFuel = 0;
  stopFuel = [45, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
  $("#spnAlertText").html("&nbsp;");
  $("#btnReset").hide();
  $("#divLog").html("");
}

$("#btnLeft").click(function() {
  if (checkStatus()) {
    if (curStop == 0) {
      setText("You cannot move any farther left.");
    } else if (curFuel == 0) {
      setText("You are out of fuel.");
    } else {
			curStop--;
      $("[id^=td2]").text("");
      $("#td2-" + curStop).text("*");
      curFuel--;
      $("#spnFuel").text(curFuel);
      $("#divLog").html($("#divLog").html() + "Left<br>");
    }
  }
});

$("#btnRight").click(function() {
  if (checkStatus()) {
    if (curFuel == 0) {
      setText("You are out of fuel.");
    } else {
      curStop++;
      $("[id^=td2]").text("");
      $("#td2-" + curStop).text("*");
      curFuel--;
      $("#spnFuel").text(curFuel);
      $("#divLog").html($("#divLog").html() + "Right<br>");
      if (curStop == 23) {
      	setText("You made it!");
        $("#btnReset").show();
      }
    }
  }
});

$("#btnPickUp").click(function() {
  if (stopFuel[curStop] > 0) {
    if (curFuel < 15) {
  ...