Можете объяснить как работает этот цикл?

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;
    grav           = 2;
    gap            = 90;
    pipe           = [];
    pipe[0]        = {
        x: cvs.width,
        y: 0
    }

console.log(pipe.length)

document.addEventListener("keydown", moveUp);

function moveUp() {
    yPos -= 20
}

function draw() {
    ctx.drawImage(bg, 0, 0);
    for(let i = 0; i < pipe.length; i++) {
        ctx.drawImage(pipeUp, pipe[i].x, pipe[i].y);
        ctx.drawImage(pipeBottom, pipe[i].x, pipe[i].y + pipeUp.height + gap)
        pipe[i].x--;
        if(pipe[i].x === 125) {
            pipe.push({
                x: cvs.width,
                y: Math.floor(Math.random() * pipeUp.height) - pipeUp.height
            });
        }
    }
    ctx.drawImage(fg, 0, cvs.height - fg.height);
    ctx.drawImage(bird, xPos, yPos);

    yPos += grav;
    requestAnimationFrame(draw)
}

fg.onload = draw;

Мне 11, учу программирование гдето месяц. Можете пожалуйста обьяснить как работает этот цикл

for(let i = 0; i < pipe.length; i++) {
        ctx.drawImage(pipeUp, pipe[i].x, pipe[i].y);
        ctx.drawImage(pipeBottom, pipe[i].x, pipe[i].y + pipeUp.height + gap)
        pipe[i].x--;
        if(pipe[i].x === 125) {
            pipe.push({
                x: cvs.width,
                y: Math.floor(Math.random() * pipeUp.height) - pipeUp.height
            });
        }
    }

Comments

[Lord_Dantes]

я в шоке...

[Ankhena]

Читайте https://learn.javascript.ru/while-for#tsikl-for и далее.

[Виктор]

так а возраст тут причем?
работу цикла тебе вряд ли кто-то обьяснит, разве что ты сам себе

Answer 1

[xenonhammer]

На каждой итерации, пока i меньше длины pipe.length будет выполняться:
1. функция ctx.drawImage с переданными аргументамиpipeUp, pipe[i].x, pipe[i].y
2. снова эта же функция, с другими аргументами

pipeBottom, pipe[i].x, pipe[i].y + pipeUp.height + gap

3. pipe[i].x-- - происходит декремент, то есть уменьшение pipe[i].x на единицу
4. Идет проверка: равно ли и есть ли совпадение с типом pipe[i].x === 125
Если условие проверки выполнено, то в конец массива pipe добавляется объект с ключем x, котрый равен cvs.width и с ключем y , который равен

Math.floor(Math.random() * pipeUp.height) - pipeUp.height

или

{
    x: cvs.width, 
    y: Math.floor(Math.random() * pipeUp.height) - pipeUp.height
}