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)
5
respuestas

[Bug] Ya no se que mas hacer, PORFAVOR AYUDA

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


        function disenharObjetivo(x,y){

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


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

        }

        function actualizarPantalla(){
            limpiarPantalla();
            xAleatorio = sortearPosicion(600);
            yAleatorio = sortearPosicion(400);
            disenharObjetivo(xAleatorio,yAleatorio);
            x++;
        }

        setInterval(actualizarPantalla,1000);

        function disparar(evento){

            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.ofsetTop;

            if ((x < xAleatorio + radio)&&
                (x > xAleatorio - radio)&&
                (y < yAleatorio + radio)&&
                (y > yAleatorio - radio) ){
                alert("acerto");
            }    

        }


        pantalla.onclick = disparar;

    </script>
5 respuestas

¡Hola Alumno!

Entiendo que estás teniendo problemas con tu código. ¿Podrías proporcionar más información sobre el error que estás experimentando?

¡Saludos!

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

al momento de darle click para que salga la alerta no sale nada pero tampoco me pone que allá algún error

Me sucede el mismo inconveniente no sale la alert del mensaje

solución!

Tu código tiene algunos errores de sintaxis:

Este es tu código:

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

    function disenharObjetivo(x,y){

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

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

    function actualizarPantalla(){
        limpiarPantalla();
        xAleatorio = sortearPosicion(600);
        yAleatorio = sortearPosicion(400);
        disenharObjetivo(xAleatorio,yAleatorio);
        x++;
    }

    setInterval(actualizarPantalla,1000);

    function disparar(evento){

        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.ofsetTop;

        if ((x < xAleatorio + radio)&&
            (x > xAleatorio - radio)&&
            (y < yAleatorio + radio)&&
            (y > yAleatorio - radio) ){
            alert("acerto");
        }    

    }

    pantalla.onclick = disparar;

</script>

Los errores son:

  1. El nombre de la función "disenharCircunferencia" está mal escrito, debería ser "dibujarCircunferencia" o "dibujarCírculo".

  2. La variable "ofsetTop" en la función "disparar" está mal escrita, debería ser "offsetTop".

  3. En la función "disparar", la verificación de colisión entre el proyectil y el objetivo solo se hace si se hace clic dentro del área del objetivo. Si se hace clic fuera del objetivo, no se hace nada. Para solucionar esto, la verificación debe ser colocada dentro de una declaración "if" que verifica si el valor de "x" y "y" son válidos.

  4. Hay un error de ortografía en la línea 48, la propiedad debería ser offsetTop en lugar de ofsetTop. Por lo tanto, el valor de y no se está calculando correctamente y la detección de colisión no funciona correctamente, lo que puede ser la razón por la cual el alert no se muestra.

Ahora te dejo el codigo ya corregido :

<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 dibujarCircunferencia(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;

  function dibujarObjetivo(x, y) {
    dibujarCircunferencia(x, y, radio + 20, "red");
    dibujarCircunferencia(x, y, radio + 10, "white");
    dibujarCircunferencia(x, y, radio, "red");
  }

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

  function actualizarPantalla() {
    limpiarPantalla();
    xAleatorio = sortearPosicion(600);
    yAleatorio = sortearPosicion(400);
    dibujarObjetivo(xAleatorio, yAleatorio);
    x++;
  }

  setInterval(actualizarPantalla, 100); // ajustar el intervalo a 100 milisegundos

  function disparar(evento) {
    var x = evento.pageX - pantalla.offsetLeft;
    var y = evento.pageY - pantalla.offsetTop;

    // verificación de colisión
    if (
      x >= xAleatorio - radio &&
      x <= xAleatorio + radio &&
      y >= yAleatorio - radio &&
      y <= yAleatorio + radio
    ) {
      alert("¡Acertaste!");
    }
  }

  pantalla.onclick = disparar;
</script>

muchas gracias bro