Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Olá Lucas, tudo certo?
Coloca o seu código aqui para tentarmos descobrir pq está dando errado.
É só clicar no botão inserir código e colar ele dentro espaço delimitado.
<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 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);
}
var x = Math.floor(Math.random()*600);
var y = Math.floor(Math.random()*400);
function desenhaAlvo(){
desenhaCirculo(x,y,raio+20,'red');
desenhaCirculo(x,y,raio+10,'white');
desenhaCirculo(x,y,raio,'red');
}
function atualizaTela(){
limpaTela();
desenhaAlvo(x,y);
}
setInterval(atualizaTela,1000);
</script>
Olá Lucas, tudo bem?
Então existe alguns errinhos em seu código:
x e y dentro da função atualizaTela() para a cada 1 segundo estar gerando valores aleatórios.desenhaAlvo() você não declarou os argumentos necessários, ela deveria ser desenhaAlvo(x, y), veja que na função atualizaTela você passa 2 parâmetros ;)Deixe assim seu código:
function atualizaTela(){
limpaTela();
var x = Math.floor(Math.random()*600);
var y = Math.floor(Math.random()*400);
desenhaAlvo(x,y);
}
function desenhaAlvo(x, y){
desenhaCirculo(x,y,raio+20,'red');
desenhaCirculo(x,y,raio+10,'white');
desenhaCirculo(x,y,raio,'red');
}
Agora deve estar funcionando corretamente :)
Abraços e Bons Estudos!
Fala Lucas, beleza?
Você só precisa declarar as variáveis x e y dentro da função desenha alvo, assim apresentará o resultado que você quer.
...
function desenhaAlvo(){
var x = Math.floor(Math.random()*600);
var y = Math.floor(Math.random()*400);
desenhaCirculo(x,y,raio+20,'red');
desenhaCirculo(x,y,raio+10,'white');
desenhaCirculo(x,y,raio,'red');
}
...Como essas variáveis estavam fora das funções chamadas pelo setInterval o valor delas nunca eram alteradas.