Caro Augusto, vamos com calma. Dê uma olhada no meu exercício e, assim que você tiver entendido os conceitos, a gente avança para o lance dos scores, OK?
<meta charset = "UTF-8"/>
<h2>Tente acertar a bolinha vermelha do centro do alvo!</h2>
<canvas id = "tela1" width = "500" height = "500" style = "border: 1px solid black"></canvas>
<script>
var tela1 = document.getElementById("tela1");
var pincel = tela1.getContext("2d");
var coordenadaX;
var coordenadaY;
var raio;
var limpaTela = function(){
pincel.clearRect(0, 0, tela1.width, tela1.height);
}
var pegarLapis = function(cor){
pincel.beginPath();
pincel.fillStyle = cor;
}
var desenhaCirculo = function(coordenadaX, coordenadaY, raio){
var anguloInicial = 0;
var anguloFinal = (2 * Math.PI);
pincel.arc(coordenadaX, coordenadaY, raio, anguloInicial, anguloFinal);
pincel.fill();
}
var sorteiaCoordenada = function(limite){
var coordenadaSorteada = (Math.round(Math.random() * limite));
return coordenadaSorteada;
}
var desenhaAlvo = function(){
var coordenadaXAlvo = sorteiaCoordenada(500);
var coordenadaYAlvo = sorteiaCoordenada(500);
coordenadaX = coordenadaXAlvo;
coordenadaY = coordenadaYAlvo;
var raioAlvo = 50;
console.log("Coordenada X do ALVO: " + coordenadaXAlvo + " Coordenada Y do ALVO: " + coordenadaYAlvo);
pegarLapis("red");
desenhaCirculo(coordenadaXAlvo, coordenadaYAlvo, raioAlvo);
raioAlvo = raioAlvo - 10;
pegarLapis("white");
desenhaCirculo(coordenadaXAlvo, coordenadaYAlvo, raioAlvo);
raioAlvo = raioAlvo - 10;
pegarLapis("red");
desenhaCirculo(coordenadaXAlvo, coordenadaYAlvo, raioAlvo);
raioAlvo = raioAlvo - 10;
pegarLapis("white");
desenhaCirculo(coordenadaXAlvo, coordenadaYAlvo, raioAlvo);
raioAlvo = raioAlvo - 10;
pegarLapis("red");
desenhaCirculo(coordenadaXAlvo, coordenadaYAlvo, raioAlvo);
raio = raioAlvo;
console.log("Raio menor: " + raio);
}
var atirar = function(evento){
coordenadaXTiro = (evento.pageX - tela1.offsetLeft);
coordenadaYTiro = (evento.pageY - tela1.offsetTop);
console.log("Coordenada X do TIRO: " + coordenadaXTiro + " Coordenada Y do TIRO: " + coordenadaYTiro);
if((coordenadaXTiro >= (coordenadaX - raio) && coordenadaXTiro <= (coordenadaX + raio)) &&
coordenadaYTiro >= (coordenadaY - raio) && coordenadaYTiro <= (coordenadaY + raio)){
alert("Parabéns. Você acertou o centro do alvo!");
}
else{
console.log("Errou!");
}
}
setInterval(limpaTela, 1000);
setInterval(desenhaAlvo, 1000);
tela1.onclick = atirar;
</script>