tracking_bullet.html

<html>
<head>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="https://rawgithub.com/maxkueng/victor/master/build/victor.js"></script>
  <script>
  var context;
  var pos;
  var vec;
  var targetPos;

  function onInitialize() {
    var canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    clearCanvas();

    pos = new Victor(15, 15);
    vec = new Victor(1, 1);
    targetPos = new Victor(785, 285);
    targetVec = new Victor(0, -1);

    var frameRate = 1000/30;
    setTimeout(function updateFrame() {
      onUpdate();
      onDraw();
      setTimeout(updateFrame, frameRate);
    }, frameRate);
  }

  function getCenterX() { return canvas.getBoundingClientRect().width / 2; }
  function getCenterY() { return canvas.getBoundingClientRect().height / 2; }
  function getCircleRadius() { return 100; }

  function drawCircle(x, y, radius, color) {
    context.beginPath();
    var startAngle = 0;
    var endAngle = 2 * Math.PI;
    context.arc(x, y, radius, startAngle, endAngle, false);
    context.fillStyle = color;
    context.fill();
  }

  function clearCanvas() {
    context.fillStyle="rgb(255,255,255)";
    context.fillRect(0, 0, canvas.getBoundingClientRect().width, canvas.getBoundingClientRect().height);
  }

  function onUpdate() {
    vec = new Victor(targetPos.x, targetPos.y).subtract(pos).normalize();
    pos = pos.add(vec);

    var speed = 3;
    targetPos = targetPos.add(new Victor(targetVec.x, targetVec.y).multiply(new Victor(speed, speed)));
    if (targetVec.y < 0) {
        if (targetPos.y <= 15) {
            targetVec.y = 1;
        }
    }
    else if (targetVec.y > 0) {
        if (targetPos.y >= 285) {
            targetVec.y = -1;
        }
    }
  }

  function onDraw() {
    clearCanvas();
    drawCircle(pos.x, pos.y, 10, "rgb(0,0,0)");
    drawCircle(targetPos.x, targetPos.y, 10, "rgb(200,0,0)");
  }
  </script>
</head>
<body onload="onInitialize();">
  <div style="border:solid 1px #000000;width:800px;" id="candiv">
    <canvas id="canvas" width="800px" height="300px"></canvas>
  </div>
</body>
</html>

https://htmlpreview.github.io/?https://gist.githubusercontent.com/faithandbrave/9efdf1db1db950d46555e0120d81a398/raw/8241e52436e172bd04d74afa2d506ef0a4709b85/tracking_bullet.html