Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

Consulta: Juego Disparar al blanco

Hola ¿Cómo están?

Tengo una consulta, estoy haciendo el juego de darle al blanco al objetivo, tal como hizo el profesor. La lógica detrás de todo ello la entiendo. El problema es que aunque le de clic al blanco rara vez me sale el cartel: alert("Tiro certero"); A continuación pongo el código para ver si hay algo incorrecto en lo que copie al profesor:

<meta charset="UTF-8">
<canvas width="600" height="400"> </canvas>

<script>

    //03 Disparando contra el objetivo

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

    function diseniarObjetivo(x, y) {

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

    function sortearPosicion(maximo) {

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

    function actualizarPantalla() {

        limpiarPantalla();
        xAleatorio = sortearPosicion(600); 
        yAleatorio = sortearPosicion(400);
        diseniarObjetivo(xAleatorio, yAleatorio);
    }

    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");
        }
    }

    setInterval(actualizarPantalla, 1000); 

    pantalla.onclick = disparar;


</script> 

Gracias.

2 respuestas
solución!

Hola! El único detalle que encontré, fue en el último if. Fijate que en esta comparación:

(y < yAleatorio - radio)

Debería ser :

(y > yAleatorio - radio)

Realizando ese cambio me parece que debería funcionar bien!

Hola Federico Pequeño grande detalle. Ya lo corregí. Funciona bien. ¡Muchas gracias!