[Proyecto] Tiro parabolico - Mini simulador. | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

Recordando el famoso Angry Birds, se me ocurrio tratar de hacer un simulador de tiro parabólico, muy sencillo debo decir. Al inicial el programa pregunta velocidad de salida, angulo de salida y el tiempo en segundos. El sistema lanzara el proyectil y mostrara las distancias en cada posicion, hasta el tiempo introducido. Cualquier duda o sugerencia es bien recibida.

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

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura</title>
</head>
<body>
    <canvas width="600" height="200"></canvas>
</body>
</html>

<script>

    //--->FUNCTIONS
    function obtener_datos(){
        let datos = []
        datos.v = parseInt(prompt('Introduce una velocidad inicial (entera)'));
        datos.rad = gradosAradianes( parseInt(prompt('Introduce un angulo en grados (entero)')) );
        datos.t = parseInt(prompt('Introduce un tiempo en segundos (entero)'));

        return datos;
    }

    function gradosAradianes(a){
        return a * Math.PI / 180;
    }

    function cordenadaX(v, t, rad){
        return v * Math.cos(rad) * t;
    }

    function cordenadaY(v, t, rad){
        return v * Math.sin(rad) * t - 9.8 * t * t / 2;
    }

    function dibujar_proyectil(x, y, color){
        proyectil.fillStyle = color;
        proyectil.fillRect(x, y, 5, 5);
    }

    function bacgroundRect(){
        fondo.fillStyle = "lightblue";
        fondo.fillRect(0,0,600,200);
    }

    function backgroundClear(){
        fondo.clearRect(0,0,600,200);
    }

    function calcular_posicion(){       
        let x = cordenadaX(datos.v, contSeg, datos.rad);
        let y = cordenadaY(datos.v, contSeg, datos.rad);

        bacgroundRect();
        dibujar_proyectil(x, 200 - y, "black");
        getCoordenadas(x, y);

        if(contSeg >= datos.t || y < 0){
           clearInterval(id);
        }
        contSeg = contSeg + .1;
    }

    function getCoordenadas(x,y){
        coordenadas.fillStyle = "black";
        coordenadas.fillText('(' + Math.round(x) +',' + Math.round(y) + ')', x + 15, 180 - y);
    }


    //--->PROGRAMA
    let pizarra     = document.querySelector('canvas');
    let fondo       = pizarra.getContext('2d');
    let proyectil   = pizarra.getContext('2d');
    let coordenadas = pizarra.getContext('2d');
    var contSeg     = 0;
    const datos     = obtener_datos();

    var id = setInterval(calcular_posicion, 60);
    setInterval(backgroundClear(), 60);

</script>