Boa tarde pessoal, estou enviando minha solução do joguinho acrescentei um bônus(número de tentativas) e número de tempo, espero possam curtir.
<h1>Disparando contra o alvo</h1>
<h2 class="textoIntento">Bônus: <span>5 </span></h2>
<h2 class="time">Tempo: <span>60 </span></h2>
<canvas width="600" height="400"></canvas>
<script>
let tela = document.querySelector('canvas');
let pincel = tela.getContext('2d');
let textoIntento = document.querySelector('.textoIntento span');
let seg = document.querySelector('.time span')
let raio = 10;
let xA, yA;
let segNum = 60;
let INTERVALO;
pincel.fillStyle = 'lightgray';
pincel.fillRect(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 limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
function desenhaAlvo(x, y) {
desenhaCirculo(x, y, raio + 20, 'red');
desenhaCirculo(x, y, raio + 10, 'white');
desenhaCirculo(x, y, raio, 'red');
}
function atualizaTela() {
limpaTela();
xA1 = Math.round(Math.random() * 540 + 30);
yA1 = Math.round(Math.random() * 340 + 30);
desenhaAlvo(xA1, yA1);
}
function segundos() {
segNum--;
seg.innerHTML = `${segNum}`;
if (segNum === -1) {
alert('Tempo acabou!!');
clearInterval(INTERVALO);
segNum = 60;
seg.innerHTML = `${segNum}`;
iniciar();
}
}
function iniciar() {
clearInterval(INTERVALO);
INTERVALO = setInterval(segundos, 1000);
}
iniciar();
setInterval(atualizaTela, 1000);
let cont = 1;
let bonus = 5;
function dispara(e) {
let xM = e.pageX - tela.offsetLeft;
let yM = e.pageY - tela.offsetTop;
if (xM <= xA1 + raio && xM >= xA1 - raio) {
if (yM <= yA1 + raio && yM >= yA1 - raio) {
alert(`PARABÉNS!!! Você acertou!!! com ${cont} tentativa(s).`);
cont = 1;
bonus = 5;
clearInterval(INTERVALO);
segNum = 60;
seg.innerHTML = `${segNum}`;
iniciar();
}
} else {
cont++;
bonus--;
}
textoIntento.innerHTML = `${bonus}`;
if (bonus === -1) {
alert('Você perdeu!!!!!!!!!!!!!! ficou sem bônus.');
cont = 1;
textoIntento.innerHTML = `5`;
bonus = 5;
clearInterval(INTERVALO);
segNum = 60;
seg.innerHTML = `${segNum}`;
iniciar();
}
}
tela.addEventListener('click', dispara);
</script>