Js canvas requestAnimationFrame Баги

Question

Js canvas requestAnimationFrame Баги

Байкер ‮‮‮йиксмайам Гуру (4117), на голосовании 1 год назад

Есть функция которая создает карту, а точнее две, которые меняются. и если вызвать сначала одну, потом вторую, потом первую, то на первой все двигающиеся враги ускоряются. Как я понял, это из-за этого
ground.onload = frame

где фрэйм это отрисовка кадра. Как это исправить?

Answer 1

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

Возможное решение этой проблемы - обернуть логику функции frame в закрытие, чтобы она могла перехватывать собственное состояние и сохранять его даже после перезаписи обработчика события onload. Это можно сделать, определив функцию frame внутри другой функции, которая ее возвращает.

Вот пример того, как можно реализовать это решение:

 function createMap(ground) { 
  let state = {...}; // Initial state for the map 
 
  function frame() { 
    // Render the frame using the state captured by the closure 
    // ... 
 
    // Request the next animation frame 
    requestAnimationFrame(frame); 
  } 
 
  ground.onload = frame; 
} 
 
// Use the createMap function to create two maps 
let ground1 = new Image(); 
createMap(ground1); 
 
let ground2 = new Image(); 
createMap(ground2);

При таком решении каждый вызов createMap создает отдельный экземпляр функции frame со своим собственным состоянием, поэтому состояние одной карты не будет влиять на состояние другой карты.