Solucionado (ver solución)
Solucionado
(ver solución)
3
respuestas

Curiosidad

Buenas tardes, me agarró curiosidad por saber, es posible hacer que el círculo no sobrepase el límite de la pantalla de 600 * 400? Como se puede hacer?

<!DOCTYPE html>
<meta charset="UTF-8">

<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); 

    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 xAleatorio = sortearPosicion(600);
    var yAleatorio = sortearPosicion(400);
    var radio = 10;

    function disenharObjetivo(x, y) {
        limpiarPantalla();
        disenharCircunferencia(x,y,radio + 20,"red");
        disenharCircunferencia(x,y,radio + 10,"white");
        disenharCircunferencia(x,y,radio,"red");
    }
    function sortearPosicion(maximo) {
        return Math.floor(Math.random()*maximo);
    }
    function actualizarPantalla() {
        limpiarPantalla();
        xAleatorio = sortearPosicion(600);
        yAleatorio = sortearPosicion(400);
        disenharObjetivo(xAleatorio, yAleatorio);        
    }
    setInterval(actualizarPantalla, 1000);
    function tiroAlBlanco(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("Nice Shot");
        }
    }
    pantalla.onclick = tiroAlBlanco;
</script> 
3 respuestas

Hola Agustin.

Si, es posible.

Pensá que relación hay entre el centro de la diana y el radio del circulo exterior.

En base a esa relación: Cuales serian las coordenadas menores y mayores donde podría generarse un centro? Donde controlarias que no se sobrepase ese limite?.

Espero que esta explicación te oriente para hallar la solución.

Saludos

solución!

Agustín Eduardo Brambilla tal como Fernando Gonzalo Cabrera señala a la hora de sortear la posición en al valor que representa el máximo debes restar el radio mayor (radio + 20)

  • xAleatorio = sortearPosicion(600 - (radio + 20)); ////esto para que no sobrepase el borde inferior
  • yAleatorio = sortearPosicion(400-(radio + 20)); //esto para que no sobrepase el borde derecho

Para que no logre sobrepasar el superior y el derecho hay diferentes alternativas por ejemplo: puedes asignar el valor del radio mayor cuando los valores sean inferiores a este usando una sentencia if

Yo tambien tenía esa duda, muchas gracias Guillermo.