CANVAS: SHMUP background drawing

Question

bgY += (enemySpeed + heroSpeed)/2; 
ctx.drawImage(bg, bgX, bgY - gameHeight); 
ctx.drawImage(bg, bgX, bgY); 
if(bgY > gameHeight) 
{ 
    bgY = 0; 
} 

Я использую приведенный выше код, чтобы нарисовать фон на моем холсте.

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

В любом случае, теперь главная проблема:

я не уверен, но я думаю, что, когда изображения перемещаются ниже холста, они «на самом деле не удалено .. Разве это не замедлит игру вниз/даст плохую производительность через некоторое время?

Есть ли способ предотвратить это?

Answer 1

Что касается вашего первого вопроса: оператор if должен быть прямо перед звонками до drawImage, но не после. Вы также можете заменить его по модульной операции, которая должна быть сохранена для всех соответствующих случаев.

bgY += (enemySpeed + heroSpeed)/2; 
bgY %= gameHeight; 
ctx.drawImage(bg, bgX, bgY - gameHeight); 
ctx.drawImage(bg, bgX, bgY);