Desarrollé un juego tipo Candy Crush usando React y Canvas, pero no funciona como se esperaba en los dispositivos móviles. Tengo estos oyentes:

 if (isMobile) { canvas.addEventListener('touchstart', onMouseDown); canvas.addEventListener('touchend', onMouseUp); } else { canvas.addEventListener('mousemove', onMouseMove); canvas.addEventListener('mousedown', onMouseDown); canvas.addEventListener('mouseup', onMouseUp); canvas.addEventListener('mouseout', onMouseOut); }

y funciona perfectamente en el escritorio. Pero en los dispositivos móviles, el oyente no se activa de inmediato después de hacer clic por segunda vez. Por ejemplo, si quiero intercambiar mosaicos, tengo que hacer clic en cualquier mosaico y esperar 1 segundo para hacer clic en otro, de modo que se active la función de intercambio. Si hago clic en el segundo mosaico inmediatamente después de haber hecho clic en el primero: el oyente no se activará. Y funciona de la misma manera incluso con la función simple console.log . Si he hecho clic N veces, veré muchos menos registros en la consola.

Aquí está mi función de control de FPS:

 const updateFps = (dt) => { if (fpstime > 10) { fps = Math.round(framecount / fpstime); fpstime = 0; framecount = 0; } fpstime += dt; framecount += 1; };

y aquí está mi función de animación:

 const main = (tframe) => { requestAnimationFrame(main); update(tframe); render(); };

¿Hay alguna forma de mejorar la usabilidad en dispositivos móviles? ¿Se puede conectar de alguna manera con renderizaciones de limitaciones de fps?