miti.sh/html/images/tanks.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="-200 -150 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle, rect {
      /* fill-opacity: 0.9; */
    }

    p {
      border: 1px solid black;
      box-size: border-box;
    }

    /* div { */
    /*   background-color: maroon; */
    /* } */

    rect#bg {
      fill: gray;
    }

    /* .rotate { */
    /*   transform: rotate(90deg); */
    /*   animation-duration: 1s; */
    /*   animation-name: rotate; */
    /* } */

    .tank rect {
      fill: green;
      transform: translate(-7.5px, -5px);
    }

    .tank circle {
      fill: white;
    }

    #crosshair {
      opacity: 0.5;
    }

    /* @keyframes rotate { */
    /*   from { */
    /*     transform: rotate(0); */
    /*   } */
    /*   to { */
    /*     transform: rotate(90deg); */
    /*   } */
    /* } */
  </style>

  <g>
    <!-- <circle id="pointer" cx="0" cy="0" r="5" fill="red" stroke="maroon"/> -->
    <rect id="bg" x="-200" y="-150" width="400" height="300"/>
    <g class="hitbox">
      <g class="tank">
        <!-- <rect width="15" height="10"/> -->
        <circle cx="0" cy="0" r="5"/>
        <line x1="0" y1="0" x2="0" y2="8" stroke="black"/>
      </g>
    </g>
    <!-- <g id="crosshair"> -->
    <!--   <line x1="-2" y1="0" x2="2" y2="0" stroke="red"/> -->
    <!--   <line x1="0" y1="-2" x2="0" y2="2" stroke="red"/> -->
    <!-- </g> -->
  </g>

  <foreignObject x="-200" y="-150" width="100%" height="100%">
    <div id="frames" style="position: absolute; right: 0px;" xmlns="http://www.w3.org/1999/xhtml">
      <span id="fps" xmlns="http://www.w3.org/1999/xhtml">0</span> fps
    </div>

    <button id="turn-left" xmlns="http://www.w3.org/1999/xhtml">Left</button>
    <button id="move-backward" xmlns="http://www.w3.org/1999/xhtml">Up</button>
    <button id="move-forward" xmlns="http://www.w3.org/1999/xhtml">Down</button>
    <button id="turn-right" xmlns="http://www.w3.org/1999/xhtml">Right</button>
    <button id="rotate-ccw" xmlns="http://www.w3.org/1999/xhtml">Rotate CCW</button>
    <button id="rotate-cw" xmlns="http://www.w3.org/1999/xhtml">Rotate CW</button>
  </foreignObject>

  <script type="text/javascript">//<![CDATA[
    const rules = document.styleSheets[0].cssRules;
    const tank = document.querySelector(".tank");
    const gun = tank.querySelector('line');
    const hitbox = document.querySelector(".hitbox");
    const leftTurnButton = document.querySelector("#turn-left");
    const rightTurnButton = document.querySelector("#turn-right");
    const reverseMoveButton = document.querySelector("#move-backward");
    const forwardMoveButton = document.querySelector("#move-forward");

    const rotateCWButton = document.querySelector("#rotate-cw");
    const rotateCCWButton = document.querySelector("#rotate-ccw");

    const fps = document.querySelector("#fps");
    let velocity = [0, 0]; // meters per second
    let acceleration = [0, 0]; // meters per second per second
    let previous, zero, frameCount = 0;
    let friction = 7.5;
    let rotate = 0;
    let rotationSpeed = 0.25;
    gun.style.transform = "rotate(0deg)";

    requestAnimationFrame(firstFrame);

    function firstFrame(timestamp) {
      zero = timestamp;
      previous = timestamp;
      animate(timestamp);
    }

    function animate(timestamp) {
      const delta = timestamp - zero;
      const elapsed = timestamp - previous;
      previous = timestamp;

      if (delta >= 1000) {
        fps.innerText = frameCount;
        zero = timestamp;
        frameCount = 0;
      } else {
        frameCount++;
      }

      const degsRegex = /(-?\d*\.{0,1}\d+)deg/g;

      let [[, degrees]] = [...gun.style.transform.matchAll(degsRegex)];

      if (rotate > 0) gun.style.transform = `rotate(${(+degrees + rotationSpeed * elapsed) % 360}deg)`;
      else if (rotate < 0) gun.style.transform = `rotate(${(+degrees - rotationSpeed * elapsed) % 360}deg)`;

      let [velocityX, velocityY] = velocity;
      let [accelerationX, accelerationY] = acceleration;

      if (velocityX > 0) accelerationX += -friction;
      else if (velocityX < 0) accelerationX += friction;

      if (velocityY > 0) accelerationY += -friction;
      else if (velocityY < 0) accelerationY += friction;

      velocityX = velocityX > 0 && velocityX + accelerationX < 0 ? 0 : velocityX + accelerationX;
      velocityY = velocityY > 0 && velocityY + accelerationY < 0 ? 0 : velocityY + accelerationY;
      velocity = [velocityX, velocityY];

      const changeX = 0.001 * elapsed * velocityX;
      const changeY = 0.001 * elapsed * velocityY;

      const regex = /(-?\d*\.{0,1}\d+)px/g;
      const def = ["0px", "0"];

      let x, y;
      if (hitbox.style.transform.length === 0) {
        x = 0;
        y = 0;
      } else {
        [[, x], [, y] = def] = [...hitbox.style.transform.matchAll(regex)];
      }

      let positionX = changeX + +x;
      let positionY = changeY + +y;

      if (positionY > 150) positionY += -300;
      else if (positionY < -150) positionY += 300;

      if (positionX > 200) positionX += -400;
      else if (positionX < -200) positionX += 400;

      hitbox.style.transform = `translate(${positionX}px, ${positionY}px)`;
      // console.log(hitbox.style.transform);
      // hitbox.style.transform = `translate(0px, ${position}px)`;
      // if (+y < 200)
      // if (timestamp < 10000)
      requestAnimationFrame(t => animate(t));

      // if (velocity[1] < 0)
    }

    let force = 10;

    leftTurnButton.addEventListener("mousedown", function (e) {
      acceleration[0] = -force;
    });

    leftTurnButton.addEventListener("mouseup", function (e) {
      acceleration[0] = 0;
    });

    rightTurnButton.addEventListener("mousedown", function (e) {
      acceleration[0] = force;
    });

    rightTurnButton.addEventListener("mouseup", function (e) {
      acceleration[0] = 0;
    });

    reverseMoveButton.addEventListener("mousedown", function (e) {
      acceleration[1] = -force;
    });

    reverseMoveButton.addEventListener("mouseup", function (e) {
      acceleration[1] = 0;
    });

    forwardMoveButton.addEventListener("mousedown", function (e) {
      acceleration[1] = force;
    });

    forwardMoveButton.addEventListener("mouseup", function (e) {
      acceleration[1] = 0;
    });

    rotateCWButton.addEventListener("mousedown", function (e) {
      rotate = 1;
    });

    rotateCWButton.addEventListener("mouseup", function (e) {
      rotate = 0;
    });

    rotateCCWButton.addEventListener("mousedown", function (e) {
      rotate = -1;
    });

    rotateCCWButton.addEventListener("mouseup", function (e) {
      rotate = 0;
    });



    // tankTurn.addEventListener("finish", function (e) {
    //   const duration = tankTurn.effect.getComputedTiming().activeDuration;
    //   tankTurn.currentTime = tankTurn.currentTime > 0 ? 0 : duration;
    // });
  //]]></script>
</svg>