Cartas en la mano. Exámenes. PHP. Bartolomé Sintes Marco. www.mclibre.org

En este ejercicio se debe crear un programa que muestre una mano de varias cartas ordenadas.

Cartas en la mano - Comentarios

El programa debe:
- Mostrar entre 2 y 6 cartas de corazones, al azar, con valores entre el as y el diez, también al azar. Los valores se pueden repetir.
- Mostrar esas mismas seis cartas, pero ordenadas en orden creciente y colocadas como cogidas por la mano (superpuestas y giradas).
- Las cartas cogidas por la mano deben estar más o menos centradas, es decir, que a medida que hayan más cartas se deben extender tanto a la derecha como a la izquierda más o menos de la misma manera.
- Mostrar una mano distinta cada vez que se actualice la página (aunque al generarse al azar puedan repetirse ocasionalmente).
El argumento de la transformación CSS rotate es un valor entero entre 0 y 360 que representa el ángulo con la vertical (la posición de las 0 horas o de los 0 minutos).
Capturas de pantalla de ejemplo:

Cartas en la mano - Ejemplos de código HTML

  <p>
    <img src="img/cartas/c4.svg" alt="4" height="200">
    <img src="img/cartas/c5.svg" alt="5" height="200">
  </p>

  <h2>Cartas ordenadas</h2>
  <p>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
      width="520" height="320" viewBox="-210 -10 520 320">
      <image href="img/cartas/c4.svg" x="0" y="0" height="200" transform="rotate(-15, 0, 200)"/>
      <image href="img/cartas/c5.svg" x="0" y="0" height="200" transform="rotate(0, 0, 200)"/>
    </svg>
  </p>

  <p>
    <img src="img/cartas/c5.svg" alt="5" height="200">
    <img src="img/cartas/c9.svg" alt="9" height="200">
    <img src="img/cartas/c1.svg" alt="1" height="200">
    <img src="img/cartas/c5.svg" alt="5" height="200">
  </p>

  <h2>Cartas ordenadas</h2>
  <p>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
      width="520" height="320" viewBox="-210 -10 520 320">
      <image href="img/cartas/c1.svg" x="0" y="0" height="200" transform="rotate(-30, 0, 200)"/>
      <image href="img/cartas/c5.svg" x="0" y="0" height="200" transform="rotate(-15, 0, 200)"/>
      <image href="img/cartas/c5.svg" x="0" y="0" height="200" transform="rotate(0, 0, 200)"/>
      <image href="img/cartas/c9.svg" x="0" y="0" height="200" transform="rotate(15, 0, 200)"/>
    </svg>
  </p>

  <p>
    <img src="img/cartas/c2.svg" alt="2" height="200">
    <img src="img/cartas/c4.svg" alt="4" height="200">
    <img src="img/cartas/c5.svg" alt="5" height="200">
    <img src="img/cartas/c10.svg" alt="10" height="200">
    <img src="img/cartas/c2.svg" alt="2" height="200">
  </p>

  <h2>Cartas ordenadas</h2>
  <p>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
      width="520" height="320" viewBox="-210 -10 520 320">
      <image href="img/cartas/c2.svg" x="0" y="0" height="200" transform="rotate(-37.5, 0, 200)"/>
      <image href="img/cartas/c2.svg" x="0" y="0" height="200" transform="rotate(-22.5, 0, 200)"/>
      <image href="img/cartas/c4.svg" x="0" y="0" height="200" transform="rotate(-7.5, 0, 200)"/>
      <image href="img/cartas/c5.svg" x="0" y="0" height="200" transform="rotate(7.5, 0, 200)"/>
      <image href="img/cartas/c10.svg" x="0" y="0" height="200" transform="rotate(22.5, 0, 200)"/>
    </svg>
  </p>

Exámenes - Cartas en la mano

Cartas en la mano - Comentarios

Cartas en la mano - Ejemplos de código HTML

Cartas en la mano - Ejemplo de programa