Como um desafio pessoal, fiz algumas alteações no programa, sendo elas, o alvo pisca em verde quando acertamos no meio, e coloquei um contador de erros e acertos que atualiza a cada clique certo no meio do alvo ou cliques errados fora do alvo. Até aí creio que está tudo bem: Declarei duas variáveis, criei uma função para escrever no canvas, chamei a função toda vez que a tela fosse resetada para atualização dos dados, fiz um contador de erros e acertos e chamei os erros e acertos na função e ao inves do alert eu coloquei para que o alvo piscasse em verde! (só para esclarecero que fiz de diferente rs)
O que eu não consegui foi: queria no setInterval (atualizaTela, 1000) no lugar do 1000 utlizar uma variável "tempo" por exemplo que receberia 1000, e toda vez que acertasse no alvo, no caso seria no mesmo IF que o alvo pisca em verde, o tempo de atualização da tela diminuisse 100milisegundos, até uma taxa de 700 por exemplo e neste caso faria um IF tempo < 700 tempo = 1000 novamente.
Eu fiz um teste e tempo não diminui nem a tela tem sua taxa de atualização mais rapida como eu queria...
var erro = 0;
var acerto = 0;
function desenhaTexto() {
pincel.font = "15px Georgia";
pincel.fillStyle = "black";
pincel.fillText("Acertos: " + acerto, 50, 400);
pincel.fillText("Erros: " + erro, 250, 400)
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
desenhaTexto(); //Tentativa de desenvolver um código mais elaborado.
}
function contadorErro() {
erro++
return erro;
}
function contadorAcerto() {
acerto++;
return acerto;
}
function dispara(evento) {
var x = evento.pageX - tela.offsetTop
var y = evento.pageY - tela.offsetLeft
if ((x > xAleatorio - raio) && (x < xAleatorio + raio) && (y > yAleatorio - raio) && (y < yAleatorio + raio)) {
desenhaAlvo(xAleatorio, yAleatorio, "green")
contadorAcerto();
}
else {
contadorErro();
}