Блог

Я разработал игру, похожую на раздавление конфет, с использованием react и canvas, но она работает не так, как ожидалось, на мобильных устройствах. У меня есть эти слушатели:

 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); }  

и он отлично работает на рабочем столе. Но на мобильных устройствах прослушиватель не запускается сразу после того, как я нажал второй раз. Например, если я хочу поменять местами плитки, я должен нажать на любую плитку и подождать примерно 1 секунду, чтобы щелкнуть другую, чтобы сработала функция подкачки. Если я нажму на вторую плитку сразу после того, как нажму на первую: прослушиватель не будет активирован. И это работает точно так же даже с простой console.log функцией. Если я нажал N раз, я увижу гораздо меньше журналов в консоли.

Вот моя функция управления частотой кадров в секунду:

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

и вот моя функция анимации:

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

Есть ли какой-либо способ улучшить удобство использования на мобильных устройствах? Может ли это как-то быть связано с повторными отправками ограничений fps?

Итак, я обнаружил, что каким-то образом только на устройствах ios DOM и сценарии блокируются после того, как первое прикосновение вызвало прослушиватель. Так что после нескольких часов страданий случайный e.preventDefault() сделал свое дело. Так что просто используйте его в своем слушателе 🙂