Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
5
respuestas

AYUDA POR FAVOR NO ENCUENTRO EL ERROR:::

Hola espero que esten bien: les comento, mi codigo hace todo solo que no tiene color rojo las circunferencias les agradeceria me en una manoya que busque por todos lados y no veo el error. muchas gracias.

he aqui mi codigo:

<!DOCTYPE html>

<meta charset="UTF-8" />

<html lang="es">

    <title>JUEGO DE TIRO AL BLANCO</title>

    <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,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 diseñarObjetivo(x,y){

        diseñarCircunferencia(x,y,radio + 20 ,"red"); // creeria que aca estaria el error por que no me dibuja las circunferencias pero no lo encuetro.
        diseñarCircunferencia(x,y,radio + 10 ,"white");
        diseñarCircunferencia(x,y,radio,"red");

}
function SortearPosicion(maximo){

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

}
  function actualizarPantalla(){

      limpiarPantalla();

      xAleatorio = SortearPosicion(600);
      yAleatorio = SortearPosicion(400);
      diseñarObjetivo(xAleatorio,yAleatorio);
      x++;
   }


  setInterval(actualizarPantalla,1000);

  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>

adjunto imagenes

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

5 respuestas

Buenos dias!, dos cosas:

  1. Falta un punto y coma en esta linea "pincel.fillStyle = color" (ya es por buenas practicas)

  2. hay discordancias entre tu definicion de parametros de la funcion "diseñarcircunferencia" y los que le pasas a la hora de llamarla aquí te lo indico:

     function diseñarCircunferencia(x,y,color){ (aqui estas pidiendo x,y y color)
         pincel.fillStyle = color
         pincel.beginPath();
         pincel.arc(x,y,radio,0,2*Math.PI);
         pincel.fill();
    
      }

Pero a la hora de la llamada

  diseñarCircunferencia(x,y,radio + 20 ,"red"); 
  diseñarCircunferencia(x,y,radio + 10 ,"white");
  diseñarCircunferencia(x,y,radio,"red");

¿Si vez que le mandas un parametro de mas?

tus solucione es agregar como parametro de la funcion el radio , cosa que tu funcion que diseña el circulo quedaria así:

function diseñarCircunferencia(x,y,radio,color){
        pincel.fillStyle = color
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*Math.PI);
        pincel.fill();

 }

HOLA Juan Sebastian Soto Martínez, espero que estes bien.

te agradezco tu ayuda tu sokucon es correcta.

la duda que me queda es: por que a cristian en el video de el curso le sale ok, y no tiene la var radio en el lugar que yo tuve que corregir?

adjunto imagenes:

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

me olvide de comentarte ya agregue ; que tambien me faltaba aun que no se ve en la imagen.

una vez mas , te agradezco la ayuda. saludos

Regrese a ver la clase, y el profe en su código si tiene la var radio en la función de diseñar circunferencia

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Mira que es igual a la corrección que te mencione

        function diseñarCircunferencia(x,y,radio,color){
                pincel.fillStyle = color
                pincel.beginPath();
                pincel.arc(x,y,radio,0,2*Math.PI);
                pincel.fill();
        }