Как я могу позволить объекту двигаться или где находится ошибка? - PullRequest
Новая
       7

Как я могу позволить объекту двигаться или где находится ошибка?

0 голосов
/ 24 сентября 2018

Я пытаюсь заставить объект автоматически двигаться на экране. html 

<body>
<h1>Hallo</h1>
<div id='bird'></div>
</body>

main.js 

let elemBird = document.getElementById('movingBird');
let birdSpeed = 2;
let birdisAlive = true;
let pos = {
    x: -150,
    y: Math.floor(Math.random() * window.innerHeight),
    endX: window.innerWidth,
    endY: window.innerHeight,
};

в нижней части я создаю Div-контейнер с идентификатором и изображениемТег, по которому я ... 

function createBird() {
    const bird = document.createElement('div');
    bird.className = 'animation';
    bird.id = 'movingBird';
    const birdImg = document.createElement('img');
    birdImg.src = './assets/Koli.jpeg';
    birdImg.className = 'bird-style';
    bird.appendChild(birdImg);
    document.getElementById('bird').appendChild(bird);
}


function movingDown() {
    pos.x += birdSpeed + (Math.random() * 5);
    pos.y += birdSpeed + (Math.random() * 15);
}

... который должен затем перемещаться с помощью функции moveBird () 

function moveBird() {
    let id;
    if (pos.x <= pos.endX) {
        if (birdisAlive) {
            pos.x += birdSpeed;
        } else if (pos.y <= pos.endY) {
            movingDown();
        }
        elemBird.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
        id = requestAnimationFrame(moveBird);
    } else {
        cancelAnimationFrame(id);
    }
}

createBird();
moveBird();

Почему я получаю ошибку?Uncaught TypeError: Невозможно прочитать свойство 'style' из null

(у меня такая же настройка без pos-объекта, и это работает. Но я пытаюсь позволить нескольким объектам двигаться одновременно.)

...