Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Esfera que rebota en diagonal

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Moviendo elementos con animaciones simples y actividad ¡Ya que va, que vuelva!

por Elisabet Galarza
| 17.5k xp | 19 posts
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animación</title>
</head>

<body>

    <canvas width="600" height="600"></canvas>

</body>

</html>

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle = "lightcoral";
    pincel.fillRect(0,0,600,600);

    function dibujarCirculo(x,y,radio) {

        pincel.fillStyle = "lightgreen";
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*Math.PI);
        pincel.fill();

    };

    function limpiarPantalla() {

        pincel.fillStyle = "lightcoral";
        pincel.fillRect(0,0,600,600);

    };

    var x = 10;
    var y = 10;

    function irHaciaLaDerecha() {

        limpiarPantalla();
        dibujarCirculo(x,y,10);
        x++;
        y++;

    };

    var x2 = 590;
    var y2 = 590;

    function irHaciaLaIzquierda() {

        limpiarPantalla();
        dibujarCirculo(x2,y2,10);
        x2--;
        y2--;

    };

    function rebote() {

            if (x<=590 && y<=590) {

                irHaciaLaDerecha();

            } else if (x2>=10 && y2>=10) {

                irHaciaLaIzquierda();

            } else {

                x = 10;
                y= 10 ;
                x2 = 590;
                y2 = 590;

            };

    };

    setInterval(rebote, 5);
    // la funcion setInterval recibe dos parámetros: una función, y un número (en milisegundos). Lo que hace es que cada cantidad ingresada de milisegundos, ejecuta la función ingresada.

</script>
1 respuesta
por Guillermo Edgardo Murcia Valladares
| 199.7k xp | 249 posts

muy creativa

yo lo deje solo de izquierda a derecha, eres muy talentosa

<!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>Dibuja Circulos y luego limpia pantalla</title>
</head>
<body>
    <h1>Dibuja Circulos y luego limpia pantalla</h1>
    <h1>Vuelve a dibujar para crear la sensasión que el circulo se mueve</h1>
    <h2>pero ahora regresa y vuelve a cambiar de sentido al llegar al borde</h2>
    <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); 

        function disenharCircunferencia(x,y,radio){
            pincel.fillStyle = "blue";
            pincel.beginPath();
            // ctx.arc(x, y, radius, startAngle, endAngle [, antiClockwise])
            pincel.arc(x,y,radio,0,2*Math.PI);
            pincel.fill();
        }    

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

        var x = 0
        var spin = 1;

        function actualizarPantalla(){            
            limpiarPantalla();
            disenharCircunferencia(x,20,10);
            x=x+spin;
            if (x==600)
            {
                spin = -1;
            }
            if (x==0)
            {
                spin = 1;        
            }       
        }    
        setInterval(actualizarPantalla,5);    
    </script> 

</body>
</html>