@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
            });
        }
    }
  • Вопрос задан
  • 110 просмотров
Пригласить эксперта
Ответы на вопрос 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
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
28 янв. 2021, в 15:21
10000 руб./за проект
28 янв. 2021, в 15:09
1000 руб./в час
28 янв. 2021, в 14:43
2490 руб./за проект