RequestAnimationFrame, нужна помощь?

Question

[sashka123456765432]

let cvs            = document.getElementById("canvas");
    ctx            = cvs.getContext("2d");
    /* Изображения */
    bird           = new Image();
    bg             = new Image();
    pipeUp         = new Image();
    pipeBottom     = new Image();
    fg             = new Image();
    bird.src       = "flappy_bird_bird.png";
    bg.src         = "flappy_bird_bg.png";
    pipeUp.src     = "flappy_bird_pipeUp.png";
    pipeBottom.src = "flappy_bird_pipeBottom.png";
    fg.src         = "flappy_bird_fg.png";
    /* Координаты Птицы */
    xPos           = 10;
    yPos           = 150;

document.addEventListener("keydown", moveUp);

function moveUp() {
    yPos -= 20
}

function draw() {
    ctx.drawImage(bg, 0, 0);
    ctx.drawImage(pipeUp, 100, 0);
    ctx.drawImage(pipeBottom, 100, 332);
    ctx.drawImage(fg, 0, cvs.height - 118);
    ctx.drawImage(bird, xPos, yPos);

    yPos += 1;
    requestAnimationFrame(draw)
}

fg.onload = draw;

Почему когда написать requestAnimationFrame работает функция moveUp, а когда убираешь requestAnimationFrame функция престает работать

Comments

[0xD34F]

Спасибо, но нет. Помощь не нужна.

Специально для балбесов вроде вас в правилах присутствует пункт 3.6:

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

Answer 1

[Владимир]

Читайте про event loop, там по хорошему нужно перерисовывать только при наличии изменений или тротлинг ставить про это тоже в книгах, например у Фленегана почитаете. Заодно почитайте про рекурсию и как ее правильно в JS готовит, но без ивент лупа вам это знание ничего не даст