Hola!! Quise experimentar modificando la velocidad del blanco a medida que el usuario va acertando. Tuve dos ideas inicialmente:
Opción 1: Modificar la velocidad mediante una variable:
<canvas width="600" height="400"></canvas>
<script>
var lienzo = document.querySelector("canvas");
var pincel = lienzo.getContext("2d");
var rX = Math.round((Math.random()*500)+40);
var rY = Math.round((Math.random()*300)+40);
var radio = 10;
var velocidad = 1000;
pincel.fillStyle = "Black";
pincel.fillRect(0,0,600,400);
function dibujarCirculo(x,y,radio,color)
{
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x,y,radio,0,2*Math.PI);
pincel.fill();
}
function limpiar()
{
pincel.clearRect(0,0,600,400);
pincel.fillStyle = "black";
pincel.fillRect(0,0,600,400);
rX = Math.round((Math.random()*500)+50);
rY = Math.round((Math.random()*300)+50);
}
function avanzar()
{
limpiar();
dibujarCirculo(rX,rY,radio + 20,"red");
dibujarCirculo(rX,rY,radio + 10,"white");
dibujarCirculo(rX,rY,radio,"red");
}
function disparar(medidas)
{
var x = medidas.pageX - lienzo.offsetLeft;
var y = medidas.pageY - lienzo.offsetTop;
if((x > rX - radio)&&( x < rX + radio)&&(y < rY + radio)&&(y > rY - radio))
{
alert("Excelente, ahora intentalo con más velocidad");
velocidad -= 50;
}
}
setInterval(avanzar,velocidad);
lienzo.onclick = disparar;
</script>
Pero veo que no funciona ya que set Interval está ejecutando la acción primero que disparar, entonces no se puede modificar de esta manera.
Opcion 2: Detener el setInterval e inicializarlo con otra velocidad.
Esta opción puede ser más viable pero no sé si exista algun comando o método para detener esta función.
Alguien me podría indicar qué paso puedo desarrollar? Muchas gracias