Solution 1 :

Each balloon has an object associated with it:

{ id: gNextId++, bottom: 0, speed: 45, txt: txt }

and stored in ballons array (aliased to gBalloons in top-level scope).

When the game starts, every 500ms each balloon is moved by the number of pixels defined in its speed property (performed by moveBalloons() function).

When you hover over a particular balloon, its speed increases by 10.

onmouseover handler knows which balloon speed to increase because it gets its position (index i) in gBalloons array: speedUp(' + i + ') upon creation of html.

Problem :

hey guys i got a balloon game that speeds up the balloon 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>

Comments

Comment posted by marzelin

@AntiMatter They are independent but both have access to a common structure that is a balloon object.