[Duda] AYUDAAA!! No funciona mi código.

¡Hola!

Yo si veo algunos problemas en tu código. El primero de ellos es que cuando invocas a la función circulo, dentro de la función actualizarPantalla, solo le estás enviando las coordenadas x e y como parámetro, pero te has dejado en el balde el radio y el color. Haz esa corrección y pasemos a tu segundo problema.

El otro error que llevas es que has coloreado tu canvas de color gris claro, pero al momento de actualizar la pantalla ésta pierde este color por efecto de la función limpiarPantalla. Aquí tienes dos opciones, o no coloreas el canvas en ningún momento, o te aseguras que la función limpiarPantalla no le quite ese atributo al canvas.

Coméntame cómo te va!

Pero este es el código del profesor, y lo he hecho igual:

DE HECHO: El le deja el color "lightgrey" y cuando invoca la funcion "actualizarPantalla" , no le coloca esos parametros que tú me dices

<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 disenharObjetivo(x,y, radio, color){

        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> 

YA LLEVO COMO UNA HORA Y NO SE POR QUE NO FUNCIONAAAA!!!

Ok, mira... Entiendo que dices que ese es el código del profesor, pero tiene varios errores. Supongo que lo has captado a mitad de su desarrollo o algo así, porque al ejecutarlo nada aparece la pantalla en gris claro y luego se borra por lo que ya te comenté más arriba.

Le hice unos ajustes a tu código, revisalo por favor y si tienes dudas consultame por aquí. Pero más o menos son los ajustes que te indiqué.

<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 = sortearPosicion(600);
    var yAleatorio = sortearPosicion(400);
    disenharObjetivo(xAleatorio,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);
        pincel.fillStyle = "lightgrey";
        pincel.fillRect(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.offsetTop;

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

    pantalla.onclick = disparar;

</script>

El resultado lo puedes ver aquí:

Pero modificaste el código del profesor. No se si me puedes enviar mi código corregido por favor. O sea, corrige este código:

<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 = 5;
    var xAleatorio;
    var yAleatorio;

    function circulo(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 objetivo(x,y){

        circulo(x,y,radio + 20,"red");
        circulo(x,y,radio + 15,"white");
        circulo(x,y,radio + 10,"red");
        circulo(x,y,radio + 5,"white");
        circulo(x,y,radio,"red");

    }

    function posicionAleatoria(maximo){

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

    }


    function actualizarPantalla(){

        limpiarPantalla();
        xAleatorio = posicionAleatoria(600);
        yAleatorio = posicionAleatoria(400);
        circulo(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("***LE DISTE***");
        }

    }

    pantalla.onclick = disparar;

</script>

Listo amigo, aquí lo tiene corregido, pero es lo mismo que le comenté anteriormente:

<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 = 5;
    var xAleatorio = posicionAleatoria(600);
    var yAleatorio = posicionAleatoria(400);
    objetivo(xAleatorio,yAleatorio);

    function circulo(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);
        pincel.fillStyle = "lightgrey";
        pincel.fillRect(0,0,600,400); 
    }

    var x = 0


    function objetivo(x,y){

        circulo(x,y,radio + 20,"red");
        circulo(x,y,radio + 15,"white");
        circulo(x,y,radio + 10,"red");
        circulo(x,y,radio + 5,"white");
        circulo(x,y,radio,"red");

    }

    function posicionAleatoria(maximo){

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

    }


    function actualizarPantalla(){

        limpiarPantalla();
        xAleatorio = posicionAleatoria(600);
        yAleatorio = posicionAleatoria(400);
        objetivo(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("***LE DISTE***");
        }

    }

    pantalla.onclick = disparar;

</script>

GRACIAAAAAAAAAAAAAAAAAAAASSS!!!

Me has salvado. Ahora si ya entendi. Me habia estresado un poco....jajajaja

No sabes cuanto te lo agradezco.

Para eso estamos colega ;)