Зависания при нажатии на экран
 

Почему то при обработке функции которая отвечает за касания на экране происходят подвисания. У меня есть игра, которая каждый кадр вызывает функцию mobileController, она проверяет если нажатие на экране. Вот код:
/

var button1 = undefined,
  button2 = undefined;

function mobileController() {
  var el = document.getElementsByTagName('body')[0];


  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchmove", handleMove, false);

  function handleStart(evt) {
    var touches = evt.changedTouches;
    if (window.innerWidth / 2 < touches[0].pageX)
      button1 = true;
    button2 = false;
    if (window.innerWidth / 2 > touches[0].pageX) {
      button2 = true;
      button1 = false
    }
  }
  
    function handleEnd(evt) {
      var touches = evt.changedTouches;
      if (window.innerWidth / 2 < touches[0].pageX)
        button1 = false;
      button2 = false;
      if (window.innerWidth / 2 > touches[0].pageX) {
        button2 = false;
        button1 = false
      }
    }

    function handleMove(evt) {
      var touches = evt.changedTouches;
      if (window.innerWidth / 2 < touches[0].pageX)
        button1 = true;
      button2 = false;
      if (window.innerWidth / 2 > touches[0].pageX) {
        button2 = true;
        button1 = false
      }

    }
    
};

button1 и button2 отвечают за передвижение персонажа вправо и влево.Причём в начале игры всё работает нормально, но постепенно начинает падать fps.

Подскажите как можно оптимизировать данный код?

возможно проблема в функции анимации движения, а не в том что вы показали.

Или рони не увидел косяка, или я не прав, однако...
Ваша функция "mobileController" каждый раз, как вы её вызывает вешает на "body" по 3 обработчика.
Если эта функция вызывается 60 раз в секунду, то за эту секунду на body будет висеть уже 60*3=180 обработчиков событий.
Если после секунды ожиданий нажать куда-нибудь на страницу, то будут вызваны по очереди все 60 обработчиков для каждого из прослушиваемых событий.

Да и вместо трех обработчиков можно использовать 1, который также можно "упростить" в 2 раза.

function handler(e) {
    button2 = !(button1 = (window.innerWidth / 2) < e.changedTouches[0].pageX);
}

Nexus прав, слишком часто вызывается обработчик, сейчас попробую что-нибудь сделать

нужно убрать обработчики из функции, но при этом они перестанут работать хммммм....

Так вы 1 раз их повешайте.

Спасибо вам за помощь!
Код теперь выглядит так

var button1, button2;

var el = document.getElementsByTagName('body')[0];

  el.addEventListener("touchstart", handler, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchmove", handler, false);

function handler(e) {
    button2 = !(button1 = (window.innerWidth / 2) < e.changedTouches[0].pageX);
};
function handleEnd(e) {
  var touches = e.changedTouches;
  if (window.innerWidth / 2 < touches[0].pageX)
    button1 = false;
  button2 = false;
  if (window.innerWidth / 2 > touches[0].pageX) {
    button2 = false;
    button1 = false
  }
};

:-?
не нужно никаких body.addEventListener, достаточно
и даже два button лишнее

Retro_1477,
handleEnd зачем условие , если всегда

Рони, мне нужно отслеживать момент когда палец отходит от экрана.
Если я убираю handleEnd то персонаж будет бегать постоянно при касание на левую или правую часть экрана