Я не понимаю, почему шары не двигаются в мини-игре, которую я построил
Эй ребята,
Я построил небольшую игру на воздушном шаре , пытаясь изучить основы,
в любом случае, я успешно визуализировал воздушные шары, я могу видеть их обоих на странице, однако функции перемещения не работают, Они должны делать это при загрузке страницы, которую я установил в 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')
Подтвердите, что вы действительно что-то извлекаете.