Editing 1608: Hoverboard

Jump to: navigation, search

Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be attributed to your username, along with other benefits.

The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then save the changes below to finish undoing the edit.
Latest revision Your text
Line 3,305: Line 3,305:
 
To display the distance and direction to the closest coin (with inverted colors once you have all the coins):
 
To display the distance and direction to the closest coin (with inverted colors once you have all the coins):
  
<pre>
+
    function distance(x1, y1, x2, y2) {
function distance(x1, y1, x2, y2) {
+
        var dx = x2 - x1;
      var dx = x2 - x1;
+
        var dy = y2 - y1;
      var dy = y2 - y1;
+
        return Math.sqrt(dx * dx + dy * dy);
      return Math.sqrt(dx * dx + dy * dy);
+
    }
  }
+
   
 
+
    function angle(x1, y1, x2, y2) {
  function angle(x1, y1, x2, y2) {
+
        var dx = x2 - x1;
      var dx = x2 - x1;
+
        var dy = y2 - y1;
      var dy = y2 - y1;
+
        return Math.atan2(dy, dx) * 180 / Math.PI;
      return Math.atan2(dy, dx) * 180 / Math.PI;
+
    }
  }
+
   
 
+
    function renderRadar() {
  function renderRadar() {
+
        var mindist = 10000000000;
      var mindist = 10000000000;
+
        var closest = {
      var closest = {
+
            x1:512278.0, y1:-549613.0
          x1:512278.0, y1:-549613.0
+
        };
      };
+
        var linecolor = "blue";
      var linecolor = "blue";
+
        for (var S = 0; S < explorer.objects.length; S++) {
      for (var S = 0; S < explorer.objects.length; S++) {
+
          var I = explorer.objects[S];
          var I = explorer.objects[S];
+
          if (!I.got) {
          if (!I.got) {
+
              var dist = distance(explorer.pos.x, explorer.pos.y, I.x1, I.y1);
              var dist = distance(explorer.pos.x, explorer.pos.y, I.x1, I.y1);
+
              if (dist < mindist) {
              if (dist < mindist) {
+
                  mindist = dist;
                  mindist = dist;
+
                  closest = I;
                  closest = I;
+
              }
              }
 
          }
 
      }
 
      if (mindist == 10000000000) {
 
          mindist = distance(explorer.pos.x, explorer.pos.y, closest.x1, closest.y1);
 
          if (document.getElementById("radar").style.backgroundColor != "blue") {
 
              document.getElementById("radar").style.backgroundColor = "blue";
 
 
           }
 
           }
          linecolor = "deepskyblue";
+
        }
      } else {
+
        if (mindist == 10000000000) {
          if (document.getElementById("radar").style.backgroundColor != "deepskyblue") {
+
            mindist = distance(explorer.pos.x, explorer.pos.y, closest.x1, closest.y1);
              document.getElementById("radar").style.backgroundColor = "deepskyblue";
+
            if (document.getElementById("radar").style.backgroundColor != "blue") {
          }
+
                document.getElementById("radar").style.backgroundColor = "blue";
      }
+
            }
      var ang = angle(explorer.pos.x, explorer.pos.y, closest.x1, closest.y1);
+
            linecolor = "deepskyblue";
      var indicator = "";
+
        } else {
      if (ang > 112.5 || ang < -112.5) {
+
            if (document.getElementById("radar").style.backgroundColor != "deepskyblue") {
          indicator += "left";
+
                document.getElementById("radar").style.backgroundColor = "deepskyblue";
      }
+
            }
      if (ang < 67.5 && ang > -67.5) {
+
        }
          indicator += "right";
+
        var ang = angle(explorer.pos.x, explorer.pos.y, closest.x1, closest.y1);
      }
+
        var indicator = "";
      if (ang > -157.5 && ang < -22.5) {
+
        if (ang > 112.5 || ang < -112.5) {
          indicator += " up";
+
            indicator += "left";
      }
+
        }
      if (ang > 22.5 && ang < 157.5) {
+
        if (ang < 67.5 && ang > -67.5) {
          indicator += " down";
+
            indicator += "right";
      }
+
        }
      document.getElementById("radar").innerHTML = "Distance: " + mindist.toFixed(1).toString() + "<br/>";
+
        if (ang > -157.5 && ang < -22.5) {
      document.getElementById("radar").innerHTML += indicator + " (" + (((ang+270+180)%360+180)%360-180).toFixed(1).toString() + "°)";
+
            indicator += " up";
      document.getElementById("radar").innerHTML += "<div id='circle' style='border: 1px solid black; border-radius: 50px; width: 100px; height: 100px; position:absolute; top:50px; left:25px'/>";
+
        }
      document.getElementById("radar").innerHTML += "<div id='line' style='width: 50px; height: 1px; background-color: " + linecolor + "; position:absolute; top:100px; left:75px; transform:rotate(" + ang + "deg); transform-origin:0% 0%'/>";
+
        if (ang > 22.5 && ang < 157.5) {
  }
+
            indicator += " down";
 
+
        }
  var d = document.createElement("div");
+
        document.getElementById("radar").innerHTML = "Distance: " + mindist.toFixed(1).toString() + "&lt;br/>";
  d.id = "radar";
+
        document.getElementById("radar").innerHTML += indicator + " (" + -ang.toFixed(1).toString() + "°)";
  d.style.position = "fixed";
+
        document.getElementById("radar").innerHTML += "<div id='circle' style='border: 1px solid black; border-radius: 50px; width: 100px; height: 100px; position:absolute; top:50px; left:25px'/>";
  d.style.left = "0px";
+
        document.getElementById("radar").innerHTML += "<div id='line' style='width: 50px; height: 1px; background-color: " + linecolor + "; position:absolute; top:100px; left:75px; transform:rotate(" + ang + "deg); transform-origin:0% 0%'/>";
  d.style.top = "0px";
+
    }
  d.style.width = "150px";
+
   
  d.style.height = "160px";
+
    var d = document.createElement("div");
  d.style.border = "1px solid blue";
+
    d.id = "radar";
  d.style.zIndex = "2";
+
    d.style.position = "fixed";
  d.style.backgroundColor = "deepskyblue";
+
    d.style.left = "0px";
  d.style.color = "#8f8";
+
    d.style.top = "0px";
  document.body.appendChild(d);
+
    d.style.width = "150px";
 
+
    d.style.height = "160px";
  setInterval(renderRadar, 50);
+
    d.style.border = "1px solid blue";
</pre>
+
    d.style.zIndex = "2";
 +
    d.style.backgroundColor = "deepskyblue";
 +
    d.style.color = "#8f8";
 +
    document.body.appendChild(d);
 +
   
 +
    setInterval(renderRadar, 100);
  
 
To see how many coins you've collected:
 
To see how many coins you've collected:

Please note that all contributions to explain xkcd may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see explain xkcd:Copyrights for details). Do not submit copyrighted work without permission!

To protect the wiki against automated edit spam, we kindly ask you to solve the following CAPTCHA:

Cancel | Editing help (opens in new window)