[Bug] [Duda] No tengo el mensaje de Alert al dale Click | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

2
respuestas

por Estudiante

| 52.5k xp | 6 posts

Tengo este error, al momento de atinar en la liana no tengo el mensaje de error. Este es mi codigo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="700" height="500"></canvas>

    <script>
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = "blue";
        pincel.fillRect(0, 0, 700, 500);
        var radio = 10;
        var xAleatorio;
        var yAleatorio;


        function diseñarcirulo(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,700,500);
     }

     var  x = 0;
     function diseñarObjetivo(x,y){
        diseñarcirulo(x,y,30,"red");
        diseñarcirulo(x,y,20,"white");
        diseñarcirulo(x,y,10,"red");

     }

     function aletorioPosicion(maximo){
        return Math.floor(Math.random()*maximo)
     }


     function actualizarPantalla(){
        limpiarPantalla();
        var xAleatorio = aletorioPosicion(700);
        var yAleatorio = aletorioPosicion(500);
        diseñarObjetivo(xAleatorio,yAleatorio);
        x++;
     }

    setInterval(actualizarPantalla,3000);

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



        //alert("tiro Certero")
    }

    pantalla.onclick = disparar;

    </Script>


</body>
</html>

2 respuestas

por Eduardoadrianlopez

| 32.7k xp | 10 posts

11/04/2023

tenes que quitar el var en actualizar pantalla y dedejo el link donde resolvieron la misma duda: https://app.aluracursos.com/forum/topico-duda-no-funciona-el-alert-159051

por Eduardoadrianlopez

| 32.7k xp | 10 posts

11/04/2023

tambien dejo el script copiado del video:

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

    <script>
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = "grey";
        pincel.fillRect(0, 0, 600, 400);

        var radio = 10;
        var xAleatorio;
        var yAleatorio;

        function diseniarCircuferencia(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) {

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

        }

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

        var x = 0
        function actualizarPantalla() {
            limpiarpantalla();
            xAleatorio = sortearPosicion(600);
            yAleatorio = sortearPosicion(400);
            diseniarObjetivo(xAleatorio, yAleatorio);
            x++;
        }
        setInterval(actualizarPantalla, 1050);

        //actualizarPantalla();

        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>