3
respuestas

Ida y vuelta

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 Rodrigo Alejandro Quiroga
| 10.7k xp | 6 posts

buenas noches mi codigo no funciona ; no encuentro el error...

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

<script>

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

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

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

 }

  function limpiarPantalla(){

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

 }
   var x = 0;
   var y = 1;

   function actualizarPantalla(){

      limpiarPantalla();
     if (x > 600){
        y = -1;
     }
     else if (x < 0){
        y = 1;
     }

      diseniarCircunferencia(x,20,15);
      x = x + y;
   }

    setInterval(actualizarPantalla,10);

 </script>
3 respuestas
por Jose Gonzalez
| 2141.8k xp | 6724 posts
Instructor

Hola Rodrigo, como estás?

Estou probando tu código y aqui funciona muy bien, quizas probar con otro navegador yo usé firefox.

Si tienes alguna duda sobre el contenido de los cursos, estaremos aquí para ayudarte.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios
por Evaristo Pérez
| 126.2k xp | 35 posts
IT Specialist

Mover circulo

porque X y Y debe ir sumado?

<!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>Mover Circulo</title>
</head>
<body>
    <canvas width="600" height="400"> </canvas>
    <script>


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

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

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

 }

  function limpiarPantalla(){

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

 }
   var x = 0;
   var y = 1;

   function actualizarPantalla(){

      limpiarPantalla();
     if (x > 600){
        y = -1;
     }
     else if (x < 0){
        y = 1;
     }

      diseniarCircunferencia(x,20,15);
      x = x + y;
   }

    setInterval(actualizarPantalla,20);

    </script>
</body>
</html>
por Lista Cristian Raul
| 157.9k xp | 74 posts
Comerciante

Hola Evaristo. Tanto x como y se suman para que el circulo se vaya moviendo a lo largo de la pantalla. Cuando y es positivo (1) va hacia la dercha el circulo porque x es cada vez mas grande y se desplaza sobre el eje x hacia la derecha que es para donde crece. Recuerda que el origen o punto cero se encuentra en la esquina superior izquierda. Por lo tanto cuando x sea mayor de 600 , y pasa a valer negativo(-1) lo que hara que x sea cada vez menor y el circulo se movera hacia la izquierda. Y asi susecivamente..... En sintesis, la suma de x e y dan el movimiento horizotal de ida y vuelta al circulo. Prueba hacer al reves. inverte la x por la Y, y veras como ahora se movera de abajo hacia arriba ..... Espero haber aclarado tu duda. Si es asi recuerda tildar como solucionado. Saludos y gracias. A seguir programando!!!!!