Se me ocurre que podrías añadir la información sobre el comportamiento de cada botón o flecha en el propio elemento, como dataset (atributos data-XXX
):
let tiempo = 0;
// Objeto para controlar la posición actual y representarla en pantalla
// como coordenadas
const coords = {
x: 0,
y: 0,
updateView: function() {
document.getElementById('cont1').innerHTML = this.x + ' ' + this.y + ' ' + tiempo;
}
};
let intervalId;
// inicializa el movimiento, usando los parámetros como velocidad
function mover(x, y) {
coords.x += x;
coords.y += y;
coords.updateView();
tiempo++;
}
// termina el movimiento
function parar() {
clearInterval(intervalId);
}
const controls = document.querySelectorAll('.joystick path');
//para cada control
controls.forEach(function(control) {
//leemos sus datos asociados
const x = +control.dataset.x; //equivalente a parseInt
const y = +control.dataset.y;
// al pulsar se inicia el movimiento
control.addEventListener('mousedown', () => {
intervalId = setInterval(function() {
mover(x, y);
}, 100);
});
control.addEventListener('mouseup', () => {
parar();
});
control.addEventListener('mouseout', () => {
parar();
});
control.addEventListener('click', () => {
mover(x, y);
});
});
.joystick {
user-select: none;
}
.joystick path:hover {
fill: red;
}
.joystick path:active {
fill: black;
}
<svg class="joystick" width="30mm" height="30mm" viewBox="0 0 30 30">
<g fill=blue>
<path d="m20 10v-5l-5-5-5 5v5z" data-y="1"y="-1" data-x="0"/>
<path d="m20 20v5l-5 5-5-5v-5z" data-y="-1"y="1" data-x="0"/>
<path d="m10 10h-5l-5 5 5 5h5z" data-y="0" data-x="-1"/>
<path d="m20 10h5l5 5-5 5h-5z" data-y="0" data-x="1"/>
</g>
</svg>
<div id="cont1"></div>