Member 14719507 Ответов: 1

Я не понимаю, почему шары не двигаются в мини-игре, которую я построил


Эй ребята,
Я построил небольшую игру на воздушном шаре , пытаясь изучить основы,
в любом случае, я успешно визуализировал воздушные шары, я могу видеть их обоих на странице, однако функции перемещения не работают, Они должны делать это при загрузке страницы, которую я установил в index.html тело(функция startGame), код выглядит нормально,однако ничего не происходит.
стиль CSS:
body {
    background-color: lightblue;
}
    
.balloon {
    position: absolute;
    width: 170px;
    height: 200px;
    border-radius: 40%;
    bottom: 0;
    transition: 3s;
    background-color: yellow;
    text-align: center;
    font-weight: bold;
}
.balloon1 {
    left: 200px;
    background-color:rgb(3, 61, 23);
}
.balloon2 {
    left: 600px;
    background-color: rgb(182, 24, 50);
}
.fade {
    opacity: 0;
}

Яваскрипт:
var gNextId = 100
var gBaloons = createBalloons()
var gInterval=null

function startGame() {
    renderBaloons();
    gInterval = setInterval(() => {
        moveBalloons();
    }, 500);
}

function renderBaloons() {
    var strHtml = ''
    for (var i = 0; i < gBaloons.length; i++) {
        var balloon = gBaloons[i]
        strHtml += `<div class="balloon balloon${i + 1}"> ${balloon.txt} </div>`
    }
    document.querySelector('.balloon-container').innerHTML = strHtml
}

function moveballoons() {
    var elballoons = document.querySelectorAll('.balloon')
    for (var i = 0; i > gBaloons.length; i++) {
        var balloon = gBaloons[i]
        var elballoon = elballoons[i]
        balloon.bottom += balloon.speed
        elballoon.style.bottom = balloon.bottom + 'px'
    }
    if (balloon.bottom >= 800) clearInterval(gInterval)
}

function createBalloons() {
    var ballons = [
        createBalloon('A'),
        createBalloon('B'),
        createBalloon('C')
    ];
    return ballons
}

function createBalloon(txt) {
    return { id: gNextId++, bottom: 0, speed: 45, txt: txt }
}


Что я уже пробовал:

Я понятия не имею, почему он не двигается, функция довольно прямолинейна, я новичок, так что простите меня, если ответ совершенно очевиден

ZurdoDev

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

phil.o

Это был бы настоящий ответ.

Gerry Schmitz

var elballoons = документ.querySelectorAll('.balloon')

Подтвердите, что вы действительно что-то извлекаете.

1 Ответов

Рейтинг:
2

Richard Deeming

Операторы Javascript должны заканчиваться точкой с запятой. Вы, кажется, пропустили Терминатора почти на каждой линии.

Javascript также чувствителен к регистру. Вы устанавливаете таймер для вызова вызываемой функции moveBalloons, но вы объявляете функцию как moveballoons.

Ваш moveballoons функция имеет if блок, который должен быть внутри for петля.

И условие прекращения внутри for петля ошибочна - у вас есть i > gBaloons.length вместо i < gBaloons.length.

function moveBalloons() {
    var elballoons = document.querySelectorAll('.balloon');
    for (var i = 0; i < gBaloons.length; i++) {
        var balloon = gBaloons[i];
        var elballoon = elballoons[i];
        balloon.bottom += balloon.speed;
        elballoon.style.bottom = balloon.bottom + 'px';
        if (balloon.bottom >= 800) clearInterval(gInterval);
    }
}
Демонстрация[^]