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