How to use a function parameter, on a function inside this function

Question

I know is hard to understand but, here's the code

function aleatorizar() {
    const random = Math.random() * canvas.width;
    return random;
}

function desenharbombas(x) {
    ctx.beginPath();
    ctx.arc(x, posição, 50, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fillStyle = "#000000";
    ctx.fill();

    function escrever() {
        ctx.font = "17px Arial Black";
        ctx.fillStyle = "#ffffff";
        ctx.fillText("texto", x, posição);
    }
    escrever()
}

function animar() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    desenharbombas()
    requestAnimationFrame(animar);
    //como passar parametro da função animar para o parametro da função desenhar bombas

}
animar()

So, as you can see, in the "desenharbombas" function, i need the parameter to determine where my "bombs" will be located in the x axis, and that number is randomized by the "aleatorizar" function, so i need a solution where i can put a parameter on the function "animar", (which would be the randomized number function), and pass it to the "desenhar bombas function". representing it, it would be something like this (this doesn't work btw)

function desenharbombas(x) {
    //x parameter defines the x axis of the bombs, and i need this number to be randomized
    ctx.beginPath();
    ctx.arc(x, posição, 50, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fillStyle = "#000000";
    ctx.fill();

    function escrever() {
        ctx.font = "17px Arial Black";
        ctx.fillStyle = "#ffffff";
        ctx.fillText("texto", x, posição);
    }
    escrever()
}

function animar(y) {
    //that's where the problems at, this solution doesn't work, i need to use a parameter to 
    another parameter in the "desenharbombas"
    function
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    desenharbombas(x = y)
    requestAnimationFrame(animar);
    //como passar parametro da função animar para o parametro da função desenhar bombas

}
animar(y = aleatorizar())
//this is the parameter i need to recieve to use in the "desenharbombas" function

For the love of god, i've been stuck on this for hours, please be my savior

score 0 · Answer 1 · answered May 03 '22 at 19:51

I believe something like this would work:

function aleatorizar() {
    const random = Math.random() * canvas.width;
    return random;
}

function desenharbombas(x) {
    ctx.beginPath();
    ctx.arc(x, posição, 50, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fillStyle = "#000000";
    ctx.fill();

    function escrever() {
        ctx.font = "17px Arial Black";
        ctx.fillStyle = "#ffffff";
        ctx.fillText("texto", x, posição);
    }
    escrever()
}

function animar(randomNumber) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    desenharbombas(randomNumber)
    requestAnimationFrame(animar);
    //como passar parametro da função animar para o parametro da função desenhar bombas

}

const randomNumber = aleatorizar();
animar(randomNumber)

It doesn't... For some reason, it just makes the "bomb" spawn at 0 and goes infinitely to the right... example https://www.youtube.com/watch?v=51GQdpfnPQo — Caue Zanat, May 03 '22 at 19:57

score 0 · Answer 2 · answered May 03 '22 at 20:02

function aleatorizar() {
    const random = Math.random() * canvas.width;
    return random;
}

function desenharbombas(aleatorizar) {
    //call the function using function_name() and then assign it to a variable
    x = aleatorizar()
    ctx.beginPath();
    ctx.arc(x, posição, 50, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fillStyle = "#000000";
    ctx.fill();

    function escrever() {
        ctx.font = "17px Arial Black";
        ctx.fillStyle = "#ffffff";
        ctx.fillText("texto", x, posição);
    }
    escrever()
}

function animar() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    //pass the function as a parameter
    desenharbombas(aleatorizar)
    requestAnimationFrame(animar);

}
animar()

Let me know if this is what you were trying to do

No https://youtu.be/x6i8yqxD4G8... i think this happens because the "desenharbombas" function, is activated a bunch of times in the "animar" (animate) function, and every time it's called, the random number changes. I need a solution where i can use the "aleatorizar" function once, and recieve that data in the "x" parameter in the desenhar bomba function... — Caue Zanat, May 03 '22 at 20:15

How to use a function parameter, on a function inside this function

2 Answers2