1
resposta

[Dúvida] Após a posição da bola passar de um determinado x ou y quero que ela seja criada aleatoriamente em outra posição.

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    var andaBolax= posicaoAleatoriaBola(600);
    var andaBolay= posicaoAleatoriaBola(400);

    var andaEixox= 10;
    var andaEixoy= 10;


     function alteraPosicaodoxey(){

        andaBolax= posicaoAleatoriaBola(600);
        andaBolay= posicaoAleatoriaBola(400);  
        }

     function posicaoAleatoriaBola(maximo){

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

     function limpaTela(){
          pincel.clearRect(0, 0, 600, 400);
               }

     function atualizaTela(){

        limpaTela();
        desenhaCirculo(andaBolax, andaBolay, 10);
     }

     function desenhaCirculo(x, y, raio) {

                /*A ideia e criar 10 asteroides/bolas por nível. No total serão 10 níveis*/

                if(x<600) {

                    pincel.fillStyle = 'purple';
                    pincel.beginPath()
                    //console.log(x);
                    pincel.arc(x +andaEixox, y + andaEixoy , raio, 0, 2 * 3.14);
                    pincel.fill();

                    if (x>300) {
                        andaEixox --;
                    }if (x<300) {
                        andaEixox ++;;
                    }if (y>200) {
                        andaEixoy --;
                    }if (y<200) {
                        andaEixoy++;
                    }

                   /*A ideia e fazer como no jogo asteroide esse if servem para que as bolas se movam na direção central da tela, mas no final elas irao em direção a nave. Se conhecerem alguma maneira mais resumida de fazer isso me digam*/
                }
                if (x+andaEixox >620 || y >420) {

                    /*Este if serve para apagar o asteroide/bolinha quando suas coordenas foram maiores que a do canva, contudo ele so funciona por 3 vezes apos isso a bolinha não é mais criada*/

                    //limpaTela();
                   //alteraPosicaodoxey();
                    desenhaCirculo(andaBolax, andaBolay, 10);
                    //console.log("limpou");
                }

     } 
     setInterval(atualizaTela, 20); 
     desenhaCirculo(andaBolax, andaBolay, 10);

</script>
1 resposta

Olá, Júlio! Tudo bom?

Você pode aplicar o método Math.random() do JavaScript, pois ele gera um número pseudoaleatório. Vou deixar o link para a documentação : MDN Math.random

Fico à disposição em caso de dúvidas.

Bons estudos e um feliz Natal!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software