Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Juego tiro al blanco. Resumido

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gráfico de barras</title>
</head>
<body>
    <style>
        canvas{
            background-color: yellow;
            opacity: 0.7;
        }
    </style>

    <canvas class="grafico" width="400" height="400">

    </canvas>

<script>
    let x =20;
    let y = 200;
    let giro = false
    function graficar(x,y,r,a,c=2*3.14){
        //Limpiamos pantalla para que se vea la bolita rotando
        pincel.clearRect(0,0,400,400)
        //Dibujamos la bolita
        pincel.fillStyle ="white"
        pincel.beginPath();
        pincel.arc(x,y,r,a,c);
        pincel.fill()



    }

    function click(){
        function clickear(event){
            muestra_posiciones = 0 //Calculara para llenar los arrays
            //Posibles lugares donde podra tocar el usuario en ejeX y ejeY
            posicionesX = []
            for(i=0;i<=10;i++){
                posicionesX.push(x + i)
                posicionesX.push(x - i)
            }

            posicionesY = []
            for(i=0;i<=10;i++){
                posicionesY.push(y + i)
                posicionesY.push(y - i)
            }

            //Recuperamos los lugares que presiono el usuario
            //Y le restamos los bordes sobrantes
            let xdentro = event.pageX - canvas.offsetLeft;
            let ydentro = event.pageY - canvas.offsetTop;

            //Averiguamos si la bolita se presiono en el radio de 5
            if(posicionesX.includes(xdentro) && posicionesY.includes(ydentro)){
                alert("Le dio");
            }
        }
        //Ejecutamos la acción
        canvas.onclick = clickear

    }
    //Ejecutamos todas las acciones en  conjunto
    function realizar(){
        //Generamos numeros aleatorios donde caera el punto
        x = Math.round(Math.random()*400)
        y = Math.round(Math.random()*400)
        //Ejecutamos accion de click

        //Dibujamos bolita
        graficar(x,y,10,0)
        //Definimos si gira o sigue en el 
        click()

    }
    let canvas = document.querySelector(".grafico");
    let pincel = canvas.getContext("2d");

    setInterval(realizar,2000)



</script>

</body>
</html>
1 respuesta

Hola Carlos, cómo estas?

Gracias por compartir tu proyecto, continua así, felicidades.

Recomendamos que compartas la solución de tus ejercicios en nuestro servidor de Discord, allí tenemos un canal exclusivo para eso (#compartetucodigo) y el foro solo quedaría para cualquier duda que puedas tener sobre el contenido de los cursos.

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