Exámenes - Dibujo Balón rebotando

En este ejercicio se debe crear un programa que muestre un dibujo SVG de un balón rebotando entre dos paredes.

Dibujo Balón rebotando - Comentarios

Dibujo Balón rebotando - Ejemplos de código HTML

  <p>Actualice la página para mostrar un balón rebotando 1 vez en la pared de abajo.</p>

  <p>
    <svg width="250" viewBox="50 -40 250 240" style="border-top: black 2px solid; border-bottom: black 2px solid">
      <text x="-25" y="-4" font-size="40">
        &#9917;
        <animateMotion dur="1.25s" fill="freeze"
          path="M 100,100 150,200 250,0" />
      </text>
    </svg>
  </p>
  <p>Actualice la página para mostrar un balón rebotando 2 veces en la pared de abajo.</p>

  <p>
    <svg width="450" viewBox="50 -40 450 240" style="border-top: black 2px solid; border-bottom: black 2px solid">
      <text x="-25" y="-4" font-size="40">
        &#9917;
        <animateMotion dur="2.25s" fill="freeze"
          path="M 100,100 150,200 250,0 350,200 450,0" />
      </text>
    </svg>
  </p>
  <p>Actualice la página para mostrar un balón rebotando 4 veces en la pared de abajo.</p>

  <p>
    <svg width="850" viewBox="50 -40 850 240" style="border-top: black 2px solid; border-bottom: black 2px solid">
      <text x="-25" y="-4" font-size="40">
        &#9917;
        <animateMotion dur="4.25s" fill="freeze"
          path="M 100,100 150,200 250,0 350,200 450,0 550,200 650,0 750,200 850,0" />
      </text>
    </svg>
  </p>

Dibujo Balón rebotando - Ejemplo de programa

Nota: El día del examen los alumnos no tienen acceso a este ejemplo, solamente tienen acceso a las capturas del apartado anterior.

Un ejemplo de programa puede probarse en la ventana siguiente:

Enlace a ejemplo