Hola a todos!! Tengo una duda: porque será que la circunferencia se sigue saliendo fuera de la pantalla? a veces...
Hola a todos!! Tengo una duda: porque será que la circunferencia se sigue saliendo fuera de la pantalla? a veces...
Hola Julio, la circunferencia se sale del lienzo porque las coordenadas (X,Y) del centro toman valores por fuera del límite del lienzo que va desde 0 hasta 600 para X y desde 0 hasta 400 para Y. Estos valores se generan por la instrucción Math.floor(Math.random()*maximo)
. Por ejemplo, cuando el programa va a dibujar una circunferencia tomará el centro ( X , Y ) para construirla, si los valores aleatorios del centro son (3 , 5 ) y el radio de la circunferencia exterior es de 30. La circunferencia abarcaría un diámetro desde -27 hasta 33 en X
y desde -25 hasta 35 en Y
. Por tanto, no cabe en el lienzo que esta definido desde 0 hasta 600 en X y 0 hasta 400 en Y. Abajo te dejo el código para restringir los limites de la circunferencia. Un saludo
<canvas width="600" height="400"> </canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgrey";
pincel.fillRect(0,0,600,400);
var radio = 10;
var xAleatorio;
var yAleatorio;
function disenharCircunferencia(x,y,radio, color){
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x,y,radio,0,2*Math.PI);
pincel.fill();
}
function limpiarPantalla(){
pincel.clearRect(0,0,600,400);
}
var x = 0
function disenharObjetivo(x,y){
disenharCircunferencia(x,y,radio + 20,"red");
disenharCircunferencia(x,y,radio + 10,"white");
disenharCircunferencia(x,y,radio,"red");
}
function sortearPosicion(minimo,maximo){
return Math.floor(Math.random()*(maximo-minimo)+minimo);
}
function actualizarPantalla(){
limpiarPantalla();
xAleatorio = sortearPosicion(30,570);
yAleatorio = sortearPosicion(30,370);
disenharObjetivo(xAleatorio,yAleatorio);
x++;
}
setInterval(actualizarPantalla,1000);
function disparar(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if ((x < xAleatorio + radio) &&
(x > xAleatorio - radio) &&
(y < yAleatorio + radio) &&
(y > yAleatorio - radio) ) {
alert("Tiro Certero");
}
}
pantalla.onclick = disparar;
</script>
Hola Luis!!! Me funcionó perfecto tu solución. MUCHAS GRACIAS!!!