Мигание картинки на canvas

349
09 мая 2017, 05:59

Добрый день, в процессе написании игры столкнулся с такой проблемой.

Я использую следующую модель игрового цикла:

let last = performance.now(),
    step = 1 / 60,
    dt = 0,
    now;
let frame = () => {
  now = performance.now();
  dt = dt + Math.min(1, (now - last) / 1000); // исправление проблемы неактивных вкладок
  while(dt > step) {
    dt = dt - step;
  }
  last = now;
  render(dt);
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

Отрисовка карты:

render          : function () {
                      if (stage.canMapLoad) {
                        for (var y=0; y<this.tiles.length; y++)
                          for (var x=0; x<this.tiles [y].split ("").length; x++) {
                            var _this = Number (this.tiles [y].split ("") [x]);
                            var image = new Image ();
                            switch (_this) {
                              case 1:
                                image.src ="assets/tile_ground#left.png";
                                  break;
                            };
                            context.drawImage (image, x*30, y*30, 30, 30);
                          };
                      };
                    }

Сама карта представляет собой массив формата

[
   "     0     ",
   "    1 11 1 ",
   ...
];

Функция render.

function render () {
  if (!preloader) {
    stage.canMapLoad = true;
    if (Number (game.tutorial)) {
      stage.name = "main";
    } else {
      stage.name = "tutorial_level";
        map.tiles!==tutorial_level?map.tiles = tutorial_level:undefined;
    };
  };
  context.clearRect (0, 0, canvas.width, canvas.height); // main event
      map.render ();
  if (preloader && stage.name == undefined) { // on loader screen
    var preload = new Image ();
      preload.src = "assets/loader.png";
        context.drawImage (preload, 0, 0, canvas.width, canvas.height);
  };
}

Однако, при рендере карты происходит не нормальная отрисовка тайлов, а их постоянное мигание. Раньше при использовании такой же модели и такого же цикла все работало. Что я делаю не так?

Вот ссылка на само приложение, посмотрите если не поняли в чем суть проблемы: https://vk.com/app5868818 [не реклама].

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

READ ALSO
Сумма одного значения в объекте jquery

Сумма одного значения в объекте jquery

Как мне посчитать всю сумму значения value? А то есть сложить данные value из всех 3 объектов

334
Как корректно построить алгоритм?

Как корректно построить алгоритм?

Хочу сделать "крестики-нолики" по сети (+socketio)

284