[Proyecto] pelota rebotando infinitamente de lado a lado | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <canvas width="600" height="400"></canvas>
    <script>
        const lienzo =  document.querySelector('canvas');
        const pincel = lienzo.getContext('2d');
        let x=0;
        let z=1;
        pincel.fillStyle = 'gray';
        pincel.fillRect(0,0, 600,400);


        setInterval(actualizaPantalla,100);

        function limpiarlienzo(){
            pincel.clearRect(0,0,600,400);
        }

        function crearCirculo(x,y,radio){
            pincel.fillStyle = 'blue';
            pincel.beginPath();
            pincel.arc(x,y,radio,0,2*Math.PI);
            pincel.fill();
        }

        function actualizaPantalla(){

            limpiarlienzo();
            crearCirculo(x,20,10);
            if(x==580){    
                z=0;
            }
            if(x==0){                
                z=1;
            }
            if(z==1){
                x=x+20
            }else{
                x=x-20
            }

        }

    </script>

</body>
</html>