4
respuestas

Solución alterna que no logro hacer funcionar (asistencia de alguien avanzado porfa)

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 Diego Alexander Gomez Romero
| 10.1k xp | 8 posts

Saludos, vi la solución ofrecida por el instructor y la entiendo bien, sin embargo al intentar resolver el ejercicio por mi cuenta había pensado una solución que incluyera una función que integrara un array de dos opciones "x++" y "x--" y que así como con el ejercicio de cambiar de color el círculo, pudiera alternar entre las dos opciones del array cuando llegase a los extremos, pero no logro hacer que funcione porque el círculo azul no logra interpretar mi variable "d" como "x++" ni como "x--", si alguien me lograse dar una recomendación para que funcione mi idea de solución les agradecería mucho, estoy casi seguro que la línea lógica es buena, pero mi falta de conocimientos en JavaScript me limita para ejecutarla.

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

<script>

    var screen = document.querySelector ("canvas");
    var paintbrush = screen.getContext ("2d");
    paintbrush.fillStyle = "grey";
    paintbrush.fillRect (0,0,600,400);

    function design_circle (x,y,radius) {

        paintbrush.fillStyle = "blue";
        paintbrush.beginPath ();
        paintbrush.arc (x,y,radius,0,2*Math.PI);
        paintbrush.fill ();

    }

    function clean_screen () {

        paintbrush.clearRect (0,0,600,400);

    }

    var direction = ["x++","x--"];
    var dir_cycle = 0;
    var d = direction [dir_cycle];
    var x = 0;

    function switch_dir () {

        dir_cycle++;
        if (dir_cycle > direction.length) {
            dir_cycle = 0;
        }

    }

    function update_screen () {

        clean_screen ();
        if (x>600 || x<0) {        // || = or
            switch_dir;
        }
        design_circle (x,20,10);
        d;

    }

    setInterval (update_screen,20); //función sin (), intervalo en miliseg

</script>
4 respuestas
por Diego Alexander Gomez Romero
| 10.1k xp | 8 posts

Cambié la var d por current_dir un nombre más diciente de lo que quiero que haga, que muestre la dirección actual, ya sea "x++" o "x--".

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

<script>

    var screen = document.querySelector ("canvas");
    var paintbrush = screen.getContext ("2d");
    paintbrush.fillStyle = "grey";
    paintbrush.fillRect (0,0,600,400);

    function design_circle (x,y,radius) {

        paintbrush.fillStyle = "blue";
        paintbrush.beginPath ();
        paintbrush.arc (x,y,radius,0,2*Math.PI);
        paintbrush.fill ();

    }

    function clean_screen () {

        paintbrush.clearRect (0,0,600,400);

    }

    var direction = ["x++","x--"];
    var dir_cycle = 0;
    var current_dir = direction [dir_cycle];
    var x = 0;

    function switch_dir () {

        dir_cycle++;
        if (dir_cycle > direction.length) {
            dir_cycle = 0;
        }

    }

    function update_screen () {

        clean_screen ();
        if (x>600 || x<0) {        // || = or
            switch_dir;
        }
        design_circle (x,20,10);
        current_dir;

    }

    setInterval (update_screen,20); //función sin (), intervalo en miliseg

</script>
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

Hola Diego, espero que estés bien! ¡Muchas gracias por su contribución! ¡Para cualquier duda, estoy disponible! ¡Vamos juntos! ¡No desanimes! :)

Si este post te ayudó, por favor, marca como solucionado ✓.
por Vìctor Esteban Combita Daza
| 10.4k xp | 1 posts

Amigo me inspiraste a una variante para solucionar el problema usando arrays. Aquí te dejo mi código:

por Guillermo Edgardo Murcia Valladares
| 199.7k xp | 249 posts

Puedes empezar a entenderle la lógica y cuando ya tengas claro como funciona intenta hacer nuevas versiones en el caso del array podrías colocar var direction = [1,-1];

te comparto una alternativa a ver que te parece 

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

<script>

    var screen = document.querySelector ("canvas");
    var paintbrush = screen.getContext ("2d");
    paintbrush.fillStyle = "grey";
    paintbrush.fillRect (0,0,600,400);

    function design_circle (x,y,radius) {

        paintbrush.fillStyle = "blue";
        paintbrush.beginPath ();
        paintbrush.arc (x,y,radius,0,2*Math.PI);
        paintbrush.fill ();

    }

    function clean_screen () {

        paintbrush.clearRect (0,0,600,400);

    }

    var direction = 1;
    var dir_cycle = 1;
    var current_dir = 1;
    var x = 0;

    function switch_dir (dir) {

        return dir_cycle = dir_cycle * -1;
    /*     if (dir_cycle > direction.length) {
            dir_cycle = 0;
        } */

    }

    function update_screen () {

        clean_screen ();
        if (x>600 || x<0) {        // || = or
            dir_cycle = switch_dir(dir_cycle);
        }
        design_circle (x,20,10);
        x = x + dir_cycle;

    }

    setInterval (update_screen,20); //función sin (), intervalo en miliseg

</script>