Ola galera,
Segue meu código com algumas marcações visuais e a formação de alvos aleatórios após o alvo central sugerido inicialmente.
<h1>..:: Acerte o Alvo ::..</h1>
<h3>Você consegue acertar o alvo?</h3>
<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;
var tentativas = 0;
console.log(tentativas);
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);
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
}
function montaAlvo() {
alvoX = Math.floor(Math.random() * 550);
alvoY = Math.floor(Math.random() * 350);
desenhaCirculo(alvoX, alvoY, raio + 20, 'red'); // maior círculo
desenhaCirculo(alvoX, alvoY, raio + 10, 'white');
desenhaCirculo(alvoX, alvoY, raio, 'red'); // menor circulo
return alvoX, alvoY;
}
function tiroAlvo(x, y) { // marcação do tiro disparado
desenhaCirculo(x-2, y, 1, 'black');
desenhaCirculo(x+2, y, 1, 'black');
desenhaCirculo(x, y-2, 1, 'black');
desenhaCirculo(x, y+2, 1, 'black');
desenhaCirculo(x, y, 1, 'blue');
}
function dispara(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
tiroAlvo(x, y); //marcação do tiro
tentativas += 1;
console.log('Alvo:: ' + alvoX + ' - ' + alvoY);
console.log('Tiro:: ' + x + ' - ' + y);
console.log(tentativas);
var tolerancia = 10;
// lógica de acerto?
if ( alvoX <= (x + tolerancia) && alvoX >= (x - tolerancia) ) {
if ( alvoY <= (y + tolerancia) && alvoY >= (y - tolerancia) ) {
alert('Legal! Você acertou o alvo em ' + tentativas + ' tentativas...');
limpaTela();
montaAlvo();
tentativas = 0;
}
}
}
// Alvo inicial (central) proposto pela exercício
var alvoX = 300;
var alvoY = 200;
desenhaCirculo(alvoX, alvoY, raio + 20, 'red'); // maior círculo
desenhaCirculo(alvoX, alvoY, raio + 10, 'white');
desenhaCirculo(alvoX, alvoY, raio, 'red'); // menor circulo
tela.onclick = dispara;
</script>