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

Ejercicio Tiro al blanco

Hice algunos pequeños ajustes porque estaba muy difícil darle a ese objetivo tan pequeño, en especial si solo se considera certero al darle exactamente al centro, por lo que considere como tiro acertado, cuando cae en la superficie del círculo mayor. Además, me gusta más ver el tiro encima del objetivo esa es otra adecuación y finalmente quité el setInterval para verlo un tiro a la vez.

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

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");   
    var colores = ["blue","red","white"];
    var x=20;
    var radio = 20;
    var xAleatorio;
    var yAleatorio;
    var xDisparo;
    var yDisparo

    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 disenharObjetivo(x,y){
       disenharCircunferencia(x,y,radio+20,"red");
       disenharCircunferencia(x,y,radio+10,"white");
       disenharCircunferencia(x,y,radio,"red");
       disenharCircunferencia(x,y,radio-10,"white");   }

    function sortearPosicion(valorMaximo){
        return Math.floor(Math.random()*valorMaximo)
    }

    function limpiarPantalla(){
        pincel.clearRect(0,0,600,400);
        pincel.fillStyle = "lightgrey";
        pincel.fillRect(0,0,600,400);     }

    function actualizaPantalla(){

        xAleatorio= sortearPosicion(600);
        yAleatorio= sortearPosicion(400);
        disenharObjetivo(xAleatorio,yAleatorio);

    }

    function pintarDisparo(evento){
        limpiarPantalla(); 
        actualizaPantalla();
        var xDisparo = evento.pageX - pantalla.offsetLeft;
        var yDisparo = evento.pageY - pantalla.offsetTop;    
        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(xDisparo,yDisparo,10,0,2*3.14);
        pincel.fill();
        console.log(xDisparo + "," + yDisparo);     
        //alert("xDisparo: " + xDisparo +" yDisparo: " + yDisparo +" xObjetivo: " + xAleatorio +" yObjetivo: " + yAleatorio);
        if ((xAleatorio < xDisparo + radio+20) &&
            (xAleatorio > xDisparo - radio-20) &&
            (yAleatorio < yDisparo + radio+20) &&
            (yAleatorio > yDisparo - radio-20) ) {
            alert("¡Tiro certero!");
        }
    }
    //setInterval(actualizaPantalla,1000);

    function pintarObjetivo(evento){

    }

   pantalla.onclick = pintarDisparo;


</script>  
1 respuesta

¡Hola Alumno! ¡Deseo que estés bien!

¡Gracias por compartir tu código con nosotros, nos alegra mucho que estés practicando programación! La práctica es fundamental para consolidar tus nuevos conocimientos.

En caso que tenga alguna duda relacionada con tu código (como errores, bugs y cualquier otro problema), puede compartir tu código aquí en el foro, explicando tu duda, y te ayudaremos.

No obstante, si no tienes dudas o dificultad en el desarrollo de tu codigo y solo quieres compartir tu progreso o la forma en que realizaste tus actividades, puedes utilizar el canal#ComparteTuCódigo en Discord, que es un canal específico para este fin.

Allí, tus compañeros de estudios podrán ayudarte compartiendo conocimientos. ¡Esta interacción es muy importante para la participación de los alumnos y puede ayudarte a expandir su red de contactos!

¡Te deseo mucho éxito en tus estudios! y recuerda que aquí estaremos para apoyarte!

¡Vamos juntos!

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