Olá, Matheus.
É possível sim, talvez seja um pouco de gambiarra, mas você poderia criar uma função com um setTimeout() e dentro dele chamar a própria função. No valor do setTimeout
você poderia criar uma variável e usar algumas funções da biblioteca Math
pra gerar um número aleatório. Um código pra colocar tempos aleatórios entre 500 e 3000 milisegundos seria
var menor_valor = 500
var maior_valor = 3000
var rand = Math.round(Math.random() * (maior_valor - menor_valor)) + menor_valor;
A função Math.random()
cria um número aleatório entre 0 e 1. A função Math.round()
arredonda um valor que contenha casas decimais. Para adicionar essas modificações ao seu código, basta inserir
A função que chama ela mesma poderia ser:
(function loop() {
var menor_valor = 500
var maior_valor = 3000
var rand = Math.round(Math.random() * (maior_valor - menor_valor)) + menor_valor;
setTimeout(function() {
# coloque a função que deseja aqui.
loop();
}, rand);
}());
Para funcionar no seu código, basta você remover a linha que tem setInterval(atualizaTela, 1000);
, inserir a função descrita anteriormente e colocar a função atualizaTela();
no lugar de # coloque a função que deseja aqui.
.
Fiz as modificações e seu código seria:
<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);
function desenhaCirculo(x, y, raio, cor) {
pincel.beginPath();
pincel.fillStyle = cor;
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 desenhaAlvo(x, y) {
desenhaCirculo(x, y, 30, "red");
desenhaCirculo(x, y, 20, "white");
desenhaCirculo(x, y, 10, "red");
}
function sorteiaPosicao(maximo) {
return Math.floor(Math.random() * maximo);
}
function atualizaTela() {
limpaTela();
xAleatorio = sorteiaPosicao(600);
yAleatorio = sorteiaPosicao(400);
desenhaAlvo(xAleatorio, yAleatorio);
}
function dispara(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if(x > xAleatorio - 10 && x < xAleatorio + 10 &&
y > yAleatorio - 10 && y < yAleatorio + 10) {
alert("Acertou!!!");
}
}
var xAleatorio;
var yAleatorio;
tela.onclick = dispara;
(function loop() {
var menor_valor = 500
var maior_valor = 3000
var rand = Math.round(Math.random() * (maior_valor - menor_valor)) + menor_valor;
setTimeout(function() {
atualizaTela();
loop();
}, rand);
}());
</script>
Espero ter ajudado.