<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>