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

A ver que tal quedo juego tiro al blanco

<meta charset="UTF-8">
<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;
    var limx;
    var limy;
    function diseñarCircunferencia(x,y,radio,color){
        pincel.fillStyle=color;
        pincel.beginPath();// para comenzar a graficar
        pincel.arc(x,y,radio,0,2*Math.PI);//cordenadas del grafico circulo
        pincel.fill();

    }
    function limpiarPantalla(){
        diseñarCircunferencia(limx,limy,radio+33,"grey");
    }

    function actualizarPantalla(){

        limpiarPantalla(limx,limy);

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

        limx=xAleatorio;
        limy=yAleatorio;

        diseharObjetivo(xAleatorio,yAleatorio);

    }
    function diseharObjetivo(x,y){
        diseñarCircunferencia(x,y,radio+30,"red");
        diseñarCircunferencia(x,y,radio+20,"blue");
        diseñarCircunferencia(x,y,radio,"red");

    }

    function sortearPosicion(maximo){
        return Math.floor(Math.random()*maximo);//redondea para abajo floor
    }

    setInterval(actualizarPantalla,1500);

    function disparar(evento){

        var x=evento.pageX-pantalla.offsetLeft; //obtenemos los valores del click x , y
        var y=evento.pageY-pantalla.offsetTop;

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

            alert("Tiro certero "+x+" "+y+" : "+xAleatorio+" "+yAleatorio);
        }
    }
    pantalla.onclick=disparar;



</script> 
4 respuestas

Buenas noches, se me mueve muy rapido la diana y no puedo acertar, no entiendo el motivo o la razón segun el video de la instrucción de la clase, se mueve mas lento...

bro debe ser por el

setInterval(actualizarPantalla,1500);

ahi esta el tiempo de actualización de 1.5s es 1500mls

va excelente. gracias por la ayuda,

Vale, muchas gracias si me sirvio!!