Pero solo puedo concretar los máximos disminuyendo 25 a los dos ejes, pero aunque pienso e intento no encuentro la forma de poder crear mínimos para evitar que se salga por la izquierda y por arriba. Me pueden ayudar a revisar la forma de solucionarlo?
<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);//dibuja rectangulo gris
var radio = 10;//variable del radio inicial, corresponde al circulo más pequeño
var xAleatorio;//estas dos serán para las coordenadas aleatorias
var yAleatorio;
function disenharCircunferencia(x, y, radio, color) {
pincel.fillStyle = color;//propiedad que llama al color traido como parámetro de la función
pincel.beginPath();// Función q sirve para decirle al contexto del canvas que vamos a empezar a dibujar un camino
pincel.arc(x, y, radio, 0, 2 * Math.PI);//método dibujar circulo, xy como centro, radio, ang inicial y ang final rad
pincel.fill();//método que rellena el circulo creado anteriormente con el color de fillstyle
}
function limpiarPantalla() {
pincel.clearRect(0, 0, 600, 400);//método q borra los píxeles de un rectángulo dado, x,y, width, height
}
function disenharObjetivo(x, y) {//los parémetros serán los valores de xy aleatorio de mas abajo
disenharCircunferencia(x, y, radio + 20, "red");//Circunferencia más grande, como si fuera el fondo
disenharCircunferencia(x, y, radio + 10, "white");// circunferencia mediana de la diana
disenharCircunferencia(x, y, radio, "red");//la más pequeña se sobrepone , para denotar la accion del mouse
}
function sortearPosicion(maximo) {//el max esta definido más abajo, recibe ese valor para ejecutarse
return Math.floor(Math.random() * maximo);//floor redondea hacia abajo, llega hasta maximo
}
function actualizarPantalla() {
limpiarPantalla();
xAleatorio = sortearPosicion(570);//envia 570 como max a la funcion en x y guarda el valor aleatorio x
yAleatorio = sortearPosicion(370);//envia 370 como min a la funcion en y y guarda el valor aleatorio y
disenharObjetivo(xAleatorio, yAleatorio);// los valores guardados anteriormente pasan a los parametros de la función
}
setInterval(actualizarPantalla, 1300);//hace q una función se repita con un tiempo de retraso entre cada ejecución mS
function disparar(evento) {
var x = evento.pageX - pantalla.offsetLeft;//Propiedad evento mouse que trar la coordenada horizontal y el offsetLeft quita el marco o margen en izquierda
var y = evento.pageY - pantalla.offsetTop;//Propiedad evento mouse que trar la coordenada vertical y el offsetTop quita el marco o margen de arriba
if ((x < xAleatorio + radio) &&//condición para actuar en cualquier parte del circulo central
(x > xAleatorio - radio) &&//es decir, dentro del perímetro del circulo entonces sera verdadero
(y < yAleatorio + radio) &&
(y > yAleatorio - radio)) {
alert("Tiro Certero");//mensaje en pop-up al acertar en el centro con el clic del mouse
}
}
pantalla.onclick = disparar;//Evento que ejecuta la función disparar cuando se da clic a un elemento
</script>
