Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Sugerencia] Me funciono quitándole el offset

<canvas width="600" height="400"></canvas>

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    pincel.fillStyle = "white";
    pincel.fillRect(0,0,600,400);

    function circunferencia(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);
    }

    var radio = 10;

    function objetivo(x,y) {
        circunferencia(x,y,radio + 20,"red");
        circunferencia(x,y,radio + 10,"white");
        circunferencia(x,y,radio,"red");
    }

    function posicion(maximo) {
        return Math.floor(Math.random()*maximo);
    }

    function actualizarPantalla() {
        limpiar();
        xAleatorio = posicion(600);
        yAleatorio = posicion(400);
        objetivo(xAleatorio,yAleatorio);

    }

    function disparar(evento) {

        var x = evento.pageX;
        var y = evento.pageY;

        if ((x < xAleatorio + radio*3) &&
           (x > xAleatorio - radio*3) &&
           (y < yAleatorio + radio*3) && 
           (y > yAleatorio - radio*3)){
            alert("Buen tiro");
        }

    }

    pantalla.onclick = disparar; 
    setInterval(actualizarPantalla,1000);

</script>

Les dejo mi codigo porque al inicio no me respondia la funcion disparar. Despues de leer varios reviews en el foro que les sucedia lo mismo le quite el var a xAleatorio y yAleatorio pero igual no funcionaba. No me quedo de otra que entrar en el developer Tools de chrome y por alguna extraña razon en la parte de source identificaba que estaba haciendo el click en el mouse pero decia que dentro de la funcion justo en la parte de offset tenia un error. Decidi volver al video y mirar si habia algo mal escrito y nada. Leia los codigos de los compañeros en el foro y todos los codigos parecian iguales. Le pregunte a chatGpt y solo me di el para que sirve el offset. Luego de una hora de intentos decidi quitarle el offsetLeft y Top y ver como reaccionaba y milagrosamente se le fue el error. Creo que este es uno de esos ejemplos de tantos memes que dicen: si funciona no lo toques. jajajaja Me alegro mucho lograrlo aunque las lagunas mentales aun estan ahi.

PD:. dentro de la funcion multiplique el radio*3 porque el radio = 10 y el circulo exterior es radio + 20 asi q por eso lo multiplique y funciona.

Espero que les ayude si tienen el mismo problema. Y lo resolvi leyendo en el developer tools de chrome la parte que dice sources la casilla al lado de console.

Buen dia a todos.

1 respuesta

¡Hola Angel!

Gracias por compartir tu experiencia con el código y por proporcionar el código que estás utilizando.

Es genial que hayas encontrado la solución a tu problema. A veces, el proceso de solución de problemas puede ser agotador, pero siempre es satisfactorio encontrar la solución correcta.

En cuanto a la pregunta que hiciste sobre el offset, es una propiedad que se utiliza para obtener la posición de un elemento en relación con el elemento padre. Es posible que no necesites usarlo en este caso, pero es importante tener en cuenta que puede ser útil en otras situaciones.

También es bueno que hayas explicado por qué multiplicaste el radio por 3 en la función disparar. Esto ayuda a entender mejor el código y cómo funciona.

¡Espero haber ayudado y buenos estudios!