Quando inicie a primeira aula da última etapa acreditei que estava pronto pra criar o programa. E com pouco de trabalho e bastantes erros consegui. Segue o código. Agora vou assistir as aulas e ver como o professor ver para analisar as diferenças.
<!DOCTYPE html>
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var tt=Math.round(Math.random()*1000)
var raio = 10;
var x=300;
var y=200;
/* Esse bloco cria o primeiro circulo no centro*/
/* Também serve pra criar as var x e y que serão atualizadas depois*/
desenhaCirculo(x,y, raio + 20, 'red');
desenhaCirculo(x,y, raio + 10, 'white');
desenhaCirculo(x,y, raio, 'red');
function limpaTela(){
pincel.clearRect(0,0,600,400);
}
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function dispara(evento) {
var a = evento.pageX - tela.offsetLeft;
var b = evento.pageY - tela.offsetTop;
var distancia=((x-a)*(x-a))+((y-b)*(y-b)); /*Equação reduzida de circunferência */
if (distancia<=(raio*raio)){
alert('Acertou Miseravi!');
/* Foi usado a equação reduzida da circuferẽncia para aumentar a precisão,
No programa original do acerte o alvo se vc clica fora do centro há regiões
que consideram como acerto. Usei essa equação pra corrigir isso*/
}
}
function desenhaAlvo(){
limpaTela();
x=numeroAleatorio(30,570);
y=numeroAleatorio(30,370);
/*as coordenadas dos numeros aletórios estão definidas
de tal modo que o centro fique a distancia de pelo menos
um raio das bordas*/
desenhaCirculo(x,y, raio + 20, 'red');
desenhaCirculo(x,y, raio + 10, 'white');
desenhaCirculo(x,y, raio, 'red');
/* importante observar que x e y não tem "var" na frente
pois objetivo é que essas coordenadas tenham efeito global
por isso importante ter definido x e y no começo. Dessa
forma agora x e y são atualizados tanto dentro quanto fora da função*/
}
function numeroAleatorio(i,f){
/* cria uma coordenada aleatória dentro dos limites do canvas */
var k=0;
while (k==0){
var num=Math.round(Math.random()*1000);
if (num>=i && num<=f){
k=1;
}
}
return num;
}
setInterval(desenhaAlvo,2000);
tela.onclick = dispara;
</script>
