El código de esta página no funciona porque no consigo llamar a los botones desde javascript e indentificar 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 boton es el que he pulsado.
quiero que haga lo mismo que el código de abajo pero llamando las funciones desde javascript y simplificandolo al maximo.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>prueba</title>
<style type="text/css">
.joystick path:hover {fill:red;}
.joystick path:active {fill:black;}
</style>
<script>
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;
}
</script>
</head>
<body>
<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>
</body>
</html>