no se porque no me da la alerta. =( | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

2
respuestas

por Edmi Asdel Perez Caceres

| 77.3k xp | 12 posts

<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 x = 0
    var posX=aleatoriox();
    var posY=aleatorioy();
    var radio = 10;



    function aleatoriox(){

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

    function aleatorioy(){

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



    function generarBlanco (posX,posY){

    disenharCircunferencia(posX,posY,radio + 20,"red");
    disenharCircunferencia(posX,posY,radio + 10,"white");
    disenharCircunferencia(posX,posY,radio,"red"); 
    console.log(posX,posY);
    }




    function actualizarPantalla(){



            limpiarPantalla();
            generarBlanco(posX,posY)
            posX=aleatoriox();
            posY=aleatorioy();
            x++; 

    }

    setInterval(actualizarPantalla,5500);


    function acertar(evento){

        var punteroX = evento.pageX - pantalla.offsetLeft;
        var punteroY = evento.pageY - pantalla.offsetTop;

        if ((punteroX < posX + radio) && (punteroX > posX - radio) && (punteroY < posY + radio) && (punteroY > posY - radio)){

            alert("USTED ACERTO...!!!!");
        }
        console.log(punteroX,punteroY);
    }


     pantalla.onclick = acertar;






</script>

2 respuestas

por Mabel Barera

| 308.1k xp | 604 posts

12/02/2022

Hola, te dejo mi ejercicio. Saludos cordiales

<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 diseñarCircunferencia(x,y,radio,color){
              pincel.fillStyle = color;
              pincel.beginPath();
              pincel.arc(x,y,radio,0,2*Math.PI); //- pasamos 5 parámetros: cordenadas x/y, radio, ángulo inicial, y 2*3.14
              pincel.fill();

       }


       function limpiarPantalla(){
              pincel.clearRect(0,0,600,400);
       }


       var x = 0;


        function diseñarObjetivo(x,y){
           diseñarCircunferencia(x,y,radio + 20,"red");
           diseñarCircunferencia(x,y,radio + 10, "white");
           diseñarCircunferencia(x,y,radio, "red");

        }

        function sortearPosicion(maximo){

           return Math.floor(Math.random()*maximo); // función floor: redondea para abajo.

        }

        function actualizarPantalla(){
           limpiarPantalla();
           pincel.fillStyle = "lightgrey";  
           pincel.fillRect(0,0,600,400);
           xAleatorio = sortearPosicion(600);
           yAleatorio = sortearPosicion(400);
           diseñarObjetivo(xAleatorio,yAleatorio);
          //diseñarCircunferencia(x,20,10);
           x++
       }


        setInterval(actualizarPantalla,2000);

        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>

por Roberto Raúl Gutiérrez Olivas

| 127.3k xp | 282 posts

Diseño gráfico

01/03/2022

Conmigo igual, a veces funciona, a veces no XD