hey guys i got a balloon game that speeds up the balloon on when i hover the mouse over one of them, got a few questions: 1.doesn't the speedup function just add to that balloons cell value? it doesn't seem to change the pixels it should go up in any way,just updates the objects speed value
2.this function: onmouseover="speedUp(' + i + ')
when i hover the the object does it get a number associated with that object that was set by the render balloons function like a data attribute? i don't quite get this
here is the code:
'use strict';
var gNextId = 101;
var gBalloons = createBalloons()
var gInterval;
function startGame() {
renderBalloons();
gInterval = setInterval(() => {
moveBalloons();
}, 500);
}
function renderBalloons() {
var strHtml = '';
for (let i = 0; i < gBalloons.length; i++) {
var balloon = gBalloons[i];
strHtml += '<div class="balloon balloon' + (i + 1) +
'" onclick="popBalloon(this)"' +
'" onmouseover="speedUp(' + i + ')">' +
balloon.txt +
'</div>'
}
// console.log('strHTML', strHtml);
document.querySelector('.balloon-container').innerHTML = strHtml;
}
function moveBalloons() {
var elBalloons = document.querySelectorAll('.balloon');
for (let i = 0; i < elBalloons.length; i++) {
var balloon = gBalloons[i];
var elBalloon = elBalloons[i];
balloon.bottom += balloon.speed;
elBalloon.style.bottom = balloon.bottom + 'px';
if (balloon.bottom >= 800) clearInterval(gInterval);
}
}
function popBalloon(elBalloon) {
var popSound = new Audio('sounds/pop.mp3');
popSound.play();
elBalloon.classList.add('fade');
}
function speedUp(idxBalloon) {
console.log('Speeding up: ', gBalloons[idxBalloon])
gBalloons[idxBalloon].speed += 10;
}
function createBalloons() {
var ballons = [
createBalloon('A'),
createBalloon('B'),
createBalloon('C')
];
return ballons
}
function createBalloon(txt) {
return { id: gNextId++, bottom: 0, speed: 45, txt: txt }
}
the html if its needed:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body onload="startGame()">
<div class="balloon-container"></div>
</body>
<script src="./javascript/main.js"></script>
</html>