1
resposta

Gostaria de um detalhamento de função

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'white';
    pincel.fillRect(0, 0, 600, 400);
    var raio = 10

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();

    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }

    function desenhaAlvo(x, y)  {

        desenhaCirculo(x, y, raio + 20, "red");
        desenhaCirculo(x, y, raio + 10, "white");
        desenhaCirculo(x, y, raio, "red");

    }

    function sorteiaPosicao(maximo)  {

        return Math.floor(Math.random() * maximo);

    }

    var xAleatorio = sorteiaPosicao(600);
    var yAleatorio = sorteiaPosicao(400);

    desenhaAlvo(xAleatorio, yAleatorio);


</script>

Tenho uma dúvida referente a função sorteiaPosicao(). Eu entendi o uso do return para retornar o resultado, o Math.floor() pra retornar um número arredondado, o Math.round() para sortear o número mas não entendi o porque ele deve ser multiplicado pelo máximo.

Exemplo: Pensando na função no eixo X em que o número hipotético sorteado seria 25 ... de acordo com a função ficaria 25*600 que o resultado seria 15.000.

Onde meu raciocínio está falhando em entender?

1 resposta

Olá Yago,

Detalhes dos métodos:

Math.random() retorna um número decimal com várias casas decimais entre 0 e 1

Math.floor retorna o número inteiro desprezando as casas decimais exemplo: tanto para 1,1 ou 1,9 irá retornar 1

Pense no Math.random() como gerador de um fator para o número randômico

Como ele gera um decimal entre 0 e 1 ao multiplicar esse resultado por qualquer número você sempre irá obter no mínimo 0 e no máximo o próprio número multiplicador.

Execute o seguinte código que ficará mais claro:

<script>
  var random = Math.random();
  var floor = Math.floor(random * 10);


  alert("random=" + random + " floor=" + floor);
</script>

Imagine que:

Math.random() retornou 0.77777

10 * 0.77777 = 7.7777

Math.floor() removendo as casas decimais o resultado seria 7