Skip to main content
Vi que al hacer click sencillo la mejor manera de que aumente el contador es redireccionar directamente a la function mientrasPresione
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

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>

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" data-x="0"/>
    <path d="m20 20v5l-5 5-5-5v-5z" data-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>

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" data-x="0"/>
    <path d="m20 20v5l-5 5-5-5v-5z" data-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>

Vi que al hacer click sencillo la mejor manera de que aumente el contador es redireccionar directamente a la function mientrasPresione
Origen Enlace
let tiempo = 0;
// Objeto para controlar la posición actual y representarla en pantalla
// como coordenadas
const coords = {
  x: 0,
  y: 10,
  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) {
  intervalId = setInterval(function(y) {
    coords.x += x;
    coords.y += y;
    coords.updateView();
    tiempo++;
  }, 100);
}

// 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>
let tiempo = 0;
// Objeto para controlar la posición actual y representarla en pantalla
// como coordenadas
const coords ={
  x: 0,
  y: 1,
  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) {
  intervalId = setInterval(function() {
    coords.x += x;
    coords.y += y;
    coords.updateView();
    tiempo++;
  }, 100);
}

// 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', () => {
    mover(x,y);
  });
  control.addEventListener('mouseup', () => {
    parar();
  });
  control.addEventListener('mouseout', () => {
    parar();
  });
});
 .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" data-x="0"/>
    <path d="m20 20v5l-5 5-5-5v-5z" data-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>
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" data-x="0"/>
    <path d="m20 20v5l-5 5-5-5v-5z" data-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>
para que no se seleccione el texto del <div> he dado al joystick la propiedad de no seleccionable.
Origen Enlace

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: 1,
  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) {
  intervalId = setInterval(function() {
    coords.x += x;
    coords.y += y;
    coords.updateView();
    tiempo++;
  }, 100);
}

// 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', () => {
    mover(x,y);
  });
  control.addEventListener('mouseup', () => {
    parar();
  });
  control.addEventListener('mouseout', () => {
    parar();
  });
});
 .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" data-x="0"/>
    <path d="m20 20v5l-5 5-5-5v-5z" data-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>

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: 1,
  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) {
  intervalId = setInterval(function() {
    coords.x += x;
    coords.y += y;
    coords.updateView();
    tiempo++;
  }, 100);
}

// 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', () => {
    mover(x,y);
  });
  control.addEventListener('mouseup', () => {
    parar();
  });
  control.addEventListener('mouseout', () => {
    parar();
  });
});
.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" data-x="0"/>
    <path d="m20 20v5l-5 5-5-5v-5z" data-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>

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: 1,
  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) {
  intervalId = setInterval(function() {
    coords.x += x;
    coords.y += y;
    coords.updateView();
    tiempo++;
  }, 100);
}

// 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', () => {
    mover(x,y);
  });
  control.addEventListener('mouseup', () => {
    parar();
  });
  control.addEventListener('mouseout', () => {
    parar();
  });
});
 .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" data-x="0"/>
    <path d="m20 20v5l-5 5-5-5v-5z" data-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>

Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92
Loading