0

Estoy haciendo un sencillo juego, y es simplemente coger la posición del toque del usuario y saber si ha tocado el objeto o no lo ha tocado, pero resulta que si pulso repetidamente en la pantalla el objeto empieza a hacer pausas muy rápidas, es como si el intervalo que hace que se mueva el objeto se pausara justo cunado toco la pantalla, pero es una pausa muy corta como he dicho antes:

//En este evento recojo la posición del toque
document.body.addEventListener('touchstart', function(event){
    var yFinger = event.touches[0].clientY; localStorage.yFinger = yFinger;
    var xFinger = event.touches[0].clientX; localStorage.xFinger = xFinger;
}, false);

Pues bien, parece ser que al ejecutarse este evento pausa durante unas milésimas de segundo el intervalo que tengo en otra función que se encarga de mover el objeto, aquí os dejo el intervalo que me muevo el objeto (obviamente simplificado y reducido):

//Un sencillo ejemplo de un intervalo moviendo el objeto del top (está en una función diferente)
    var yPos = 0;

    setInterval(function() { 
        yPos = yPos + 10;   
        document.getElementsByClassName("object")[0].style.top = yPos;
    }, 25);

Gracias por cualquier ayuda, creo que el problema está en el evento en el que recojo la posición del toque, pero no se como podría corregirlo.

Nota: en el <head> de la página tengo introducido lo siguiente para eliminar los 300ms de retardo del navegador en móviles: (Se que no se elimina en todos los navegadores solo con eso, pero por ahora me vale con que funcione en Chrome)

<meta name="viewport" content="user-scalable=no">

Lo extraño de todo es que este problema en Safari no mo ocurre.

2 respuestas 2

0

setInterval, al igual que setTimeout, no te garantiza que se ejecutará en el intervalo indicado, sino que se ejecuta cuando sea posible transcurrido al menos el tiempo indicado. Pueden ser 25ms, 50 o 200. Es posible entonces que el procesar el evento esté demorando la ejecución del resto del script.

Podría sugerirte algunas cosas:

Usar animaciones CSS (transform), de esta forma se activa la aceleración de hardware, si está disponible.

Si solo estás moviendo un objeto, usa un ID y getElementById, en lugar de getElementsByClassName.

Usar otro evento. Si lo que querés es saber si tocó el objeto, ¿por qué no escuchar el click o touchstart del objeto?

0
0

Usando la función window.requestAnimationFrame se soluciona todo, de este modo no se fuerza la cantidad de imágenes por segundo, y el navegador puede optimizarlo de modo que las animaciones serán mucho más suaves.

Guía para saber sus usos: CSS Tricks

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.