Предотвратите медленное срабатывание прикосновения, когда событие остается неподвижным

Изменить

Я по существу пытаюсь создать скачок стиля Марио, так как вы касаетесь /mousedown на теле, у меня есть объект, который начинает двигаться вверх, но когда вы отпускаете это ускорение, останавливается. Это означает, что я не могу использовать FastClick, поскольку я ищу события touchstart, touchend, а не одно событие click.

~

Я пытаюсь ответить на событие touchstart на мобильном устройстве в браузере. На данный момент я использую этих двух слушателей:

document.body.addEventListener('touchstart', function(e) {
  e.preventDefault();
  space_on();
  return false;
}, false);

document.body.addEventListener('touchend', function(e) {
  e.preventDefault();
  space_off();
  return false;
}, false);

Я по сути пытаюсь подражать чему-то, что у меня работало очень хорошо, где я использую события keydown и keyup, чтобы сделать прыжок и падение коробки соответственно.

Проблема, с которой я сталкиваюсь, заключается в том, что прикосновение, если вы не промахнетесь, на самом деле задерживается на короткое время. Либо это, либо расчет заставляет меня потерять частоту кадров.

Я уже использую fastclick, и это не влияет на это (возможно, потому, что он никогда не должен был запускать прослушиватели touchstart). Вы можете видеть, что я имею в виду здесь:

https://www.youtube.com/watch?v=8GgjSFgtmFk

Я прокручиваю 3 раза, и ящик прыгает сразу, а затем я нажимаю 3 раза, и вы можете видеть (особенно на втором), он немного теряет частоту кадров или задерживается. Вот еще один, возможно, более ясный пример: https://www.youtube.com/watch?v=BAPw1M2Yfig

Здесь есть демо:

http://codepen.io/EightArmsHQ/live/7d851f0e1d3a274b57221dac9aebc16a/

Просто имейте в виду, что вам нужно либо находиться на телефоне или сенсорном устройстве, либо эмулировать штрихи в хроме.

Может ли кто-нибудь помочь мне потерять падение частоты кадров или задержку, которая испытывается на сенсорном объекте, который не превращается в салфетки?

Ответ 1

Вы не должны писать цикл анимации, используя setInterval.

Попробуйте заменить его requestAnimationFrame, например:

  function render() {
    ctx.fillStyle = 'rgba(255,255,255,0.8)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    draw_rects();
    move();
    fall();
    move_scenery();
    move_jumper();
    jumper.y += jumper.vy;
    requestAnimationFrame(render);
  }

  $(window).load(function() {
    requestAnimationFrame(render);
  });

Как я сделал в это перо.

Теперь ваша функция рендеринга вызывается, как только браузер готов отобразить новый фрейм. Обратите внимание, что эта реализация не использует вашу переменную fps, поэтому ваша частота кадров теперь зависит от скорости браузера/устройства. Я протестировал ручку, которую я редактировал на своем телефоне, и теперь анимация более плавная, но пейзаж движется слишком быстро (по крайней мере для меня).

Если вам нужна постоянная частота кадров, вы можете дросселировать ее, как описано, например, здесь.

Обратите внимание, что вам действительно не нужен Fastclick, потому что вы не привязываете какое-либо событие click в своем коде.