move constant speed to target

by andersand

HTML

<canvas id="canvas" width="400" height="400" style="background:#000;"></canvas>
<div>
  <label>dist: </label><label id="dist"></label><br/>
  <label>x: </label><label id="x"></label><label> y: </label><label id="y"></label><br/>
  <label>tx: </label><label id="tx"></label><label> ty: </label><label id="ty"></label><br/>
</div>

CSS

body {
  background-color: #242623;
  margin: 0;
  padding: 0;
}
canvas {
  background-color: #333;
  cursor: crosshair;
}
div {
  position: absolute;
  top: 0; left: 0;
  color: #fff;
}

JavaScript

window.addEventListener('mouseup', function(e) {
  targetX = e.pageX;
  targetY = e.pageY;
});

var ctx = document.getElementById("canvas").getContext("2d"),
  x = 300,
  y = 0,
  targetX = Math.random() * 300,
  targetY = Math.random() * 300,
  velX = 0,
  velY = 0,
  thrust = 7;

draw();


function draw() {
  var tx = targetX - x,
    ty = targetY - y,
    dist = Math.sqrt(tx * tx + ty * ty),
    rad = Math.atan2(ty, tx),
    angle = rad / Math.PI * 180;


  velX = (tx / dist) * thrust;
  velY = (ty / dist) * thrust;

  if (dist > thrust) {
    x += velX;
    y += velY;
  }
  
  showInfo(x, y, targetX, targetY, dist)

  ctx.fillStyle = "#fff";
  ctx.clearRect(0, 0, 400, 400);
  ctx.beginPath();
  ctx.rect(x, y, 10, 10);
  ctx.closePath();
  ctx.fill();

  ctx.fillStyle = "#ff0";
  ctx.beginPath();
  ctx.rect(targetX, targetY, 10, 10);
  ctx.closePath();
  ctx.fill();

  setTimeout(function() {
    draw()
  }, 30);
}

function showInfo(x, y, tx, ty, dist) {
	document.querySelector("#x").innerHTML = x >> 100 /100
	document.querySelector("#y").innerHTML = y  >> 100 /100
	document.querySelector("#tx").innerHTML = tx  >> 100 /100
	document.querySelector("#ty").innerHTML = ty  >> 100 /100
  document.querySelector("#dist").innerHTML = dist  >> 100 /100
}