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

Clase tiro al blanco

<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>
1 respuesta

Hola Mabel, espero que esté bien.

Gracias por compartir tu código con nosotros, he probado aquí y el resultado ha sido muy bueno.

Si tienes alguna pregunta sobre el contenido de los cursos, estaremos aquí para ayudarte.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios