1
resposta

Fiz a correção da área do alvo com Pitágoras e acrescentei uma verificação para que o alvo nunca fique parcialmente fora da tela... o que vocês acharam? :)

<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>

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

var raio = 10;
var xAleatorio;
var yAleatorio

function desenhaBolinha(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){
    desenhaBolinha(x, y, raio*3, 'red');
    desenhaBolinha(x, y, raio*2, 'white');
    desenhaBolinha(x, y, raio, 'red');
}
function alvoAleatorio(limite){
    return Math.floor(Math.random()*limite);
}

function verificaAcerto(evento){
    var x = evento.pageX - tela.offsetTop;
    var y = evento.pageY - tela.offsetLeft;

    if(Math.sqrt((xAleatorio - x)*(xAleatorio - x) + (yAleatorio - y)*(yAleatorio - y)) <= raio){
        alert("Parabens você acertou!");
    }
}

function atualizaTela(){
    limpaTela();
    xAleatorio = alvoAleatorio(600);
    yAleatorio = alvoAleatorio(400);

    if(xAleatorio <= (raio*3)){
        xAleatorio = raio*3;
    } else if(xAleatorio >= 600 - (raio*3)){
        xAleatorio = 600 - (raio*3);
    } else if(yAleatorio <= (raio*3)){
        yAleatorio = raio*3;
    } else if(yAleatorio >= 400 - (raio*3)){
        yAleatorio = 400 - (raio*3);
    }

    desenhaAlvo(xAleatorio, yAleatorio);


}



setInterval(atualizaTela, 1000);
tela.onclick = verificaAcerto;



</script>
1 resposta

Fala, Rafael! Tudo bem contigo?

Seu código não veio!

Poste novamente para poder vermos

Ficamos no aguardo!