Exámenes - Dibujo Super Mauro

En este ejercicio se debe crear un programa que muestre un dibujo SVG de un personaje dando saltos y recogiendo bolsas de dinero.

Dibujo Super Mauro - Comentarios

Dibujo Super Mauro - Ejemplos de código HTML

  <p>Actualice la página para ver a Super Mauro recogiendo 1 bolsa de dinero.</p>

  <p>
    <svg viewBox="0 0 1100 400" style="border: black 1px solid; background-color: lightblue;">
      <line x1="0" y1="355" x2="1100" y2="355" stroke="peru" stroke-width="40" />
      <text x="100" y="100" font-size="100">&#9729;&#65039;</text>

<text x="940" y="160" font-size="24" style="text-decoration:underline 3px black;"> &#128176; <animate dur="0.1s" attributeName="opacity" from="1" to="0" begin="1s" fill="freeze" /> </text>
<text font-size="40"> &#127939; <animateMotion dur="1.5s" fill="freeze" path="M 1100,100 c 0,0 -50,-100 -50,250 c -50,-250 -150,-250 -200,0 " /> </text> </svg> </p>
  <p>Actualice la página para ver a Super Mauro recogiendo 2 bolsas de dinero.</p>

  <p>
    <svg viewBox="0 0 1100 400" style="border: black 1px solid; background-color: lightblue;">
      <line x1="0" y1="355" x2="1100" y2="355" stroke="peru" stroke-width="40" />
      <text x="100" y="100" font-size="100">&#9729;&#65039;</text>

<text x="940" y="160" font-size="24" style="text-decoration:underline 3px black;"> &#128176; <animate dur="0.1s" attributeName="opacity" from="1" to="0" begin="1s" fill="freeze" /> </text>
<text x="740" y="160" font-size="24" style="text-decoration:underline 3px black;"> &#128176; <animate dur="0.1s" attributeName="opacity" from="1" to="0" begin="2s" fill="freeze" /> </text>
<text font-size="40"> &#127939; <animateMotion dur="2.5s" fill="freeze" path="M 1100,100 c 0,0 -50,-100 -50,250 c -50,-250 -150,-250 -200,0 c -50,-250 -150,-250 -200,0 " /> </text> </svg> </p>
  <p>Actualice la página para ver a Super Mauro recogiendo 3 bolsas de dinero.</p>

    <p>
    <svg viewBox="0 0 1100 400" style="border: black 1px solid; background-color: lightblue;">
      <line x1="0" y1="355" x2="1100" y2="355" stroke="peru" stroke-width="40" />
      <text x="100" y="100" font-size="100">&#9729;&#65039;</text>

<text x="940" y="160" font-size="24" style="text-decoration:underline 3px black;"> &#128176; <animate dur="0.1s" attributeName="opacity" from="1" to="0" begin="1s" fill="freeze" /> </text>
<text x="740" y="160" font-size="24" style="text-decoration:underline 3px black;"> &#128176; <animate dur="0.1s" attributeName="opacity" from="1" to="0" begin="2s" fill="freeze" /> </text>
<text x="540" y="160" font-size="24" style="text-decoration:underline 3px black;"> &#128176; <animate dur="0.1s" attributeName="opacity" from="1" to="0" begin="3s" fill="freeze" /> </text>
<text font-size="40"> &#127939; <animateMotion dur="3.5s" fill="freeze" path="M 1100,100 c 0,0 -50,-100 -50,250 c -50,-250 -150,-250 -200,0 c -50,-250 -150,-250 -200,0 c -50,-250 -150,-250 -200,0 " /> </text> </svg> </p>

Dibujo Super Mauro - 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