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

por favor expliquemen donde escribo mal,

el circulo no me sale

<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

    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 actualizarPantalla(){
        limpiarPantalla();
        disenharCircunferencia(x,20,10);
        x++;
    }

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

    xAleatorio = sortearPosicion(600);
    YAleatorio = sortearPosicion(400);

    disenharObjetivo(xAleatorio,YAleatorio);





    //setInterval(actualizarPantalla,100);

























# </script>
5 respuestas

Buen día Jeanneth,

Observando tu código, veo que debes corregir dos líneas, a saber:

YAleatorio = sortearPosicion(400);

    disenharObjetivo(xAleatorio,YAleatorio);

fijate que se te a ido una Y mayúscula cunado debe ser minúscula, creo que es es todo...

yAleatorio = sortearPosicion(400);

    disenharObjetivo(xAleatorio,yAleatorio);

Espero que te funsiones.

Saludos...

Buenos dias gracias por la correccion, sin embargo ahora solo me sale el rectangulo, ademas de que no me muestra el circulo antes solo de un color le transcribo todo para que puedan ayudarme

<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 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 actualizarPantalla(){
        limpiarPantalla();
        disenharCircunferencia(x,20,10);
        x++;
    }

    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.offsetTop;

        if ((x < xAleatorio + radio)&&
            (x > xAleatorio - radio)&&
            (y < YAleatorio + radio)&&
            (y > YAleatorio - radio)){

            alert("Tiro Certero");

        }

    }

    pantalla.onclick = disparar

























</script>

Hola de nuevo,

Mira, debes corregir estas dos líneas de código y creo que ya debería funcionar...

(y < yAleatorio + radio)&&
(y > yAleatorio - radio)){

El problema que estas teniendo es que estas escribiendo algunas funciones con mayúsculas cuando las has declarado con minúscula, por esa razón no te funciona.

Espero que te funcione.

Saludos...

Ya vi cual es tu problema,

has declarado desde el pincipio la variable

 var radio = 10
    var xAleatorio;
    var YAleatorio;

te sugiero que la cambies a minúscula, es decir yAleatorio, y modifiques todo en tu cógido como desees ponerla, ya que observo que en unas partes la inicias con mayúscula y otras en minísculas...

solución!

Hola he revisado y haz lo que ha mencionado "Julián Fernando" y por lo del color es así

function disenharCircunferencia(x, y, radio, color){
       // Haz puesto color como una string y no como variable
      // antes era => pincel.fillStyle = "color";
      pincel.fillStyle = color;
      pincel.beginPath();
      pincel.arc(x, y, radio, 0, 2 * Math.PI);
      pincel.fill();
   }

Ahora te dejó el código funcionando que supongo que será así resultado del código

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

<script>

   var radio = 10, xAleatorio, yAleatorio, x = 0;
   var pantalla = document.querySelector("canvas");
   var pincel = pantalla.getContext("2d");

   pincel.fillStyle = "lightgrey";
   pincel.fillRect(0, 0, 600, 400);

   function disenharCircunferencia(x, y, radio, color){
       // Haz puesto color como una string y no como variable
      // antes era => pincel.fillStyle = "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 actualizarPantalla(){
      limpiarPantalla();
      disenharCircunferencia(x, 20, 10);
      x++;
   }
   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.offsetTop;

      // Como te sugirio Julián Fernando Salamanca Chacón
      if ((x < xAleatorio + radio) && (x > xAleatorio - radio) &&
         (y < yAleatorio + radio) && (y > yAleatorio - radio)) {
            alert("Tiro Certero");
      }
   }
   pantalla.onclick = disparar
</script>