El código de esta página no funciona porque no consigo llamar a los botones desde Javascript e identificar que acción está haciendo cada uno de ellos.
Los botones los llamo desde un `addEventListener` para obtener su estado, pero a la hora de iniciar el `setInterval` para cada botón la variable `i` siempre es `8`, por tanto no puedo saber que botón es el que he pulsado.


**quiero que haga lo mismo que el código de abajo pero llamando las funciones desde Javascript y simplificándolo al máximo.**

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    let posImg = 0;
    let posImg2 = 0;
    let tiempo = 0;
    let intervalId;

    function mover(boton) {
      intervalId = setInterval(function() {
        mientrasPresione(boton);
      }, 100);
    }

    function parar() {
      clearInterval(intervalId);
    }


    function mientrasPresione(boton) {
      switch (boton) {
        case 1:
          posImg++;
          break;
        case 2:
          posImg--;
          break;
        case 3:
          posImg2++;
          break;
        case 4:
          posImg2--;
          break;
        default:
          document.getElementById('cont1').innerHTML = "no funciona";
          break;
      }
      tiempo++;
      document.getElementById('cont1').innerHTML = posImg2 + " " + posImg + " " + tiempo;

    }

<!-- language: lang-css -->

    .joystick path:hover {
      fill: red;
    }

    .joystick path:active {
      fill: black;
    }

<!-- language: lang-html -->

    <div id="cont1"></div>
    <svg class="joystick" width="30mm" height="30mm" viewBox="0 0 30 30">
      <g fill=blue>
        <path d="m20 10v-5l-5-5-5 5v5z" onmousedown="mover(3)" onmouseup="parar()" onmouseout="parar()"/>
        <path d="m20 20v5l-5 5-5-5v-5z" onmousedown="mover(4)" onmouseup="parar()" onmouseout="parar()"/>
        <path d="m10 10h-5l-5 5 5 5h5z" onmousedown="mover(2)" onmouseup="parar()" onmouseout="parar()"/>
        <path d="m20 10h5l5 5-5 5h-5z" onmousedown="mover(1)" onmouseup="parar()" onmouseout="parar()"/>
      </g>
    </svg>

<!-- end snippet -->