Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
5
respuestas

programa 5 duda

hola compañeros y facilitadores, necesito de su ayuda. Llevo horas buscando el error en mi código y no puedo encontrar el error, ya que no me sale el mensaje de usted acertó, consulté en ventana de desarrollador y tampoco fue útil, ya que no me dice dónde esta mi error.

<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; // implementamos la variable radio para homogenizar los tamaños de los circulos
    var xAleatorio; // para ocupar if se necesita crear las variables xAleatorio y yAleatorio
    var yAleatorio;

    function disenharCircunferencia(x,y,radio,color){ // incrementamos un nuevo parametro que es 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 


    // vamos a crear una nueva funcion que nos ayude a que el objetivo sea aleatorio por lo cual, le damos como parametro el x,y

    function disenharObjetivo(x,y) {

        disenharCircunferencia(x,y,radio +20, "red")
        disenharCircunferencia(x,y,radio +10,"white")
        disenharCircunferencia(x,y,radio,"red")


    }

    // ya que tenemos las coordenadas aqui abajo se genera nuestro valor aleatorio, por lo cual generamos funcion de sortear posicion con ayuda funcion de java con un valor maximo que es de nuestro canva

    function sortearPosicion (maximo){

        // va a retornar al valor al numero entero menor por ejemplo 27.83 seria 27

        return Math.floor(Math.random()*maximo);
    }

    function actualizarPantalla(){
        limpiarPantalla();// se pone la funcion en 1a posicion por que si no al final la pantalla quedará en blanco
        xAleatorio = sortearPosicion(600);
        yAleatorio = sortearPosicion(400);
        disenharObjetivo(xAleatorio,yAleatorio); // aqui mi funcion diseñar objetivo va tener los parametros anteriormente establecidos
        x++;

    }

/*
    // tambien generamos las coordenadas; tuvimos que subir las coordenadas a la funcion actualizarPantalla
    xAleatorio = sortearPosicion(400);
    yAleatorio = sortearPosicion(600);
    */ 

        setInterval(actualizarPantalla,2000);

        // por ultimo generamos nuestra funcion disparar por lo cual le damos como parametro el evento en donde se va a seleccionar el blanco y le decimos que solo considere dentro del area de todo el circulo rojo

        function disparar (evento){

            var x = evento.PageX - pantalla.offsetLeft; // para que el tiro sea más certero quitamos los marcos del canva
            var y = evento.PageY - pantalla.offsetTop; // para que el tiro sea más certero quitamos los marcos del canva

            if((x < xAleatorio + radio)&& // solo es cierto si se le da click unicamento en la parte derecha del radio
               (x > xAleatorio - radio)&& // solo es cierto si se le da click unicamento en la parte izquierda del radio
               (y < yAleatorio + radio)&& // solo es cierto si se le da click unicamento en la parte arriba del radio
               (y > yAleatorio - radio) ){ 

                 alert("tiro certero");

               }     
        }

        pantalla.onclick = disparar;


    </script>

será que pusé muchas anotaciones en mi código?

5 respuestas

Comenta la Function y deja solo xAleatorio, yAleatorio, despues de es pon un DesingObjetive(xAleatorio,yAleatorio) Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

A mi me paso lo mismo, no deje un espacio entre el if y los (( en la función de disparar.

Ojala y sea lo mismo, porque no veo otra cosa.

Saludos

        var x = evento.PageX - pantalla.offsetLeft; // palabra page con "P" mayuscula
        var y = evento.PageY - pantalla.offsetTop;


        var x = evento.pageX - pantalla.offsetLeft; // cambia por minúsculas tenia el mismo problema y asi lo solucione
        var y = evento.pageY - pantalla.offsetTop;

    Es simple pero a veces ese pequeños detalles no nos permiten que funcione como debería

Buenas noches.

Compañeros he tenido la misma dificultad ya prove las diferentes soluciones que plantean, pero no muestra la alerta segun la condicion del if cuando se da el click, no muestra error en la consola ni nada similar para dar solucion.

Gracias.

<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 dibujarCircunferencia(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 actualizarPantalla(){

            limpiarPantalla();
            dibujarCircunferencia(x,20,10);
            x++;
        }
        function dibujarObjeto(x,y){

            dibujarCircunferencia(x,y,radio + 20,"red");
            dibujarCircunferencia(x,y,radio +10,"white");
            dibujarCircunferencia(x,y,radio,"red");
        }

        function sortearPosicion(maximo){

            return Math.floor(Math.random()*maximo);
        }

        function actualizarPantalla(){

            limpiarPantalla();
            xAleatorio = sortearPosicion(600);
            yAleatorio = sortearPosicion(400);
            dibujarObjeto(xAleatorio,yAleatorio);
            x++;
        }
        setInterval(actualizarPantalla,1500);

        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>