Variables (1). Enunciados. Ejercicios (sin formularios). PHP. Bartolomé Sintes Marco. www.mclibre.org

Variables (1) 1 - Línea

Escriba un programa que cada vez que se ejecute muestre un línea de longitud entre 10 y 1000 píxeles, al azar.

Nota: En el código fuente de este ejercicio se incluyen las unidades (px) en los atributos width y height de la etiqueta <svg>. Estas unidades no son necesarias y podrían omitirse, pero se han incluido a propósito en este ejercicio para ilustrar la generación de valores numéricos unidos a cadenas. En los ejercicios posteriores ya no se incluyen.

Ayuda

La longitud de la línea aparece en tres lugares distintos de la página.

  <p>Longitud: 623</p>

  <p>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
      width="623px" height="10px">
      <line x1="1" y1="5" x2="623" y2="5" stroke="black" stroke-width="10" />
    </svg>
  </p>

Variables (1) 2 - Círculo de color

Escriba un programa que cada vez que se ejecute muestre un círculo de 50px de radio y de un color elegido al azar .

Ayuda

El color del círculo aparece en dos lugares distintos en la página.

  <p>Color: rgb(164 43 85)</p>

  <p>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
      width="100" height="100">
      <circle cx="50" cy="50" r="50" fill="rgb(164 43 85)" />
    </svg>
  </p>

Este programa se puede hacer utilizando tres variables distintas (una para cada componente de color) o con una única variable (que guarde el código de color completo).

Variables (1) 3 - Tirada de dados

Escriba un programa que cada vez que se ejecute muestre dos tiradas de dados entre 1 y 6, al azar, e indique el resultado total.

Ayuda

Los valores que cambian cada vez que se actualiza la página son los dos valores de los dados y su suma.

  <p>
    <img src="img/3.svg" alt="3" width="140" height="140">
    <img src="img/1.svg" alt="1" width="140" height="140">
  </p>

  <p>Total: <span style="border: black 2px solid; padding: 10px; font-size: 300%">4</span></p>

Este programa se puede hacer utilizando dos o tres variables, aunque se recomienda hacerlo con dos variables, para practicar la concatenación de expresiones y texto al escribir el valor de la suma.

Variables (1) 4 - La carta más alta

Escriba un programa que cada vez que se ejecute muestre tres cartas entre 1 y 10, al azar, e indique el valor más alto.

Ayuda

El valor más alto se puede obtener con la función max().

Los valores que cambian cada vez que se actualiza la página son los tres valores de las cartas y el valor más alto.

  <p>
    <img src="img/c3.svg" alt="3" height="200">
    <img src="img/c5.svg" alt="5" height="200">
    <img src="img/c2.svg" alt="2" height="200">
  </p>

  <p>La carta más alta es un <strong>5</strong>.</p>

Este programa se puede hacer utilizando tres o cuatro variables, aunque se recomienda hacerlo con tres variables, para practicar la concatenación de expresiones y texto al escribir el valor de la carta más alta.

Variables (1) 5 - Círculos de color

Escriba un programa que cada vez que se ejecute muestre tres círculos solapados, cada uno de un color elegido al azar (uno rojo, uno verde y uno azul). El ejemplo siguiente muestra intensidades de color entre 64 y 255.

Ayuda

Los valores que cambian cada vez que se actualiza la página son las componentes de color.

  <p>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
      width="400" height="300" viewBox="-200 -120 400 300">
      <text x="100" y="-90" text-anchor="start" font-size="20">Verde: 125</text>
      <text x="-100" y="-90" text-anchor="end" font-size="20">Azul: 186</text>
      <text x="0" y="155" text-anchor="middle" font-size="20">Rojo: 202</text>
      <path fill="rgb(202 0 0)" stroke="black" stroke-width="1" d="M -73.85 36.92 A 75 75, 0, 1, 0, 73.85 36.92 A 75 75 0, 0, 1, 0 33.44 A 75 75 0, 0, 1, -73.85 36.92" />
      <path fill="rgb(0 125 0)" stroke="black" stroke-width="1" d="M 73.85 36.92 A 75 75, 0, 1, 0, 0 -93.44 A 75 75 0, 0, 1, 33.85 -16.92 A 75 75 0, 0, 1, 73.85 36.92" />
      <path fill="rgb(0 0 186)" stroke="black" stroke-width="1" d="M 0 -93.44 A 75 75, 0, 1, 0, -73.85 36.92 A 75 75 0, 0, 1, -33.85 -16.92 A 75 75 0, 0, 1, 0 -93.44" />
      <path fill="rgb(202 125 0)" stroke="black" stroke-width="1" d="M 73.85 36.92 A 75 75, 0, 0, 0, 33.85 -16.92 A 75 75 0, 0, 1, 0 33.44 A 75 75 0, 0, 0, 73.85 36.92" />
      <path fill="rgb(202 0 186)" stroke="black" stroke-width="1" d="M -73.85 36.92 A 75 75, 0, 0, 0, 0 33.44 A 75 75 0, 0, 1, -33.85 -16.92 A 75 75 0, 0, 0, -73.85 36.92" />
      <path fill="rgb(0 125 186)" stroke="black" stroke-width="1" d="M 0 -93.44 A 75 75, 0, 0, 0, -33.85 -16.92 A 75 75 0, 0, 1, 33.85 -16.92 A 75 75 0, 0, 0, 0 -93.44" />
      <path fill="rgb(202 125 186)" stroke="black" stroke-width="1" d="M 0 33.44 A 75 75, 0, 0, 0, 33.85 -16.92 A 75 75 0, 0, 0, -33.85 -16.92 A 75 75 0, 0, 0, 0 33.44" />
    </svg>
  </p>

Este programa se puede hacer utilizando tres o cuatro variables, aunque se recomienda hacerlo con tres variables, para practicar la concatenación de expresiones y texto al escribir el valor de la carta más alta.

Variables (1) 11 - Dos cuadrados

Escriba un programa que cada vez que se ejecute muestre dos cuadrados con un lado entre 40 y 120 píxeles, al azar, situados en diagonal.

Ayuda

En el dibujo cambian varios valores en cada ejecución. Por un lado aparecen los valores de los tamaños de los cuadrados, pero las coordenadas x de los cuadrados y el tamaño de la imagen svg deben calcularse mediante fórmulas.

  <p>Actualice la página para mostrar dos nuevos cuadrados de 45 px de lado.</p>

  <p>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
         width="90" height="90" viewBox="0 0 90 90" style="background-color: lightgray;">
      <rect x="0" y="0" width="45" height="45" fill="red" />
      <rect x="45" y="45" width="45" height="45" fill="green" />
    </svg>
  </p>

Los cuadrados SVG se establecen dando las coordenadas de las esquinas superior izquierda (que dependen del ancho de los cuadrados) y los tamaños de los cuadrados:
El tamaño del dibujo SVG (width, height y viewBox) debe ser suficiente para abarcar el dibujo completo.

Variables (1) 12 - Dos círculos

Escriba un programa que cada vez que se ejecute muestre dos círculos con un radio entre 30 y 100 píxeles, al azar, situados uno encima del otro.

Ayuda

En el dibujo cambian muchos valores en cada ejecución. En muchos casos aparece el valor del radio, pero las coordenadas cx de los círculos y el tamaño de la imagen svg deben calcularse mediante fórmulas.

  <p>Actualice la página para mostrar dos nuevos círculos de 40 px de radio.</p>

  <p>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
         width="80" height="160" viewBox="0 0 80 160" style="background-color: lightgray;">
      <circle cx="40" cy="40" r="40" fill="red" />
      <circle cx="40" cy="120" r="40" fill="blue" />
    </svg>
  </p>

Los círculos SVG se establecen dando las coordenadas del centro y el radio del círculo:
El tamaño del dibujo SVG (width, height y viewBox) debe ser suficiente para abarcar el dibujo completo.

Variables (1) 13 - Doble rombo

Escriba un programa que cada vez que se ejecute muestre dos rombos contiguos con un ancho total del dibujo entre 400 y 800 píxeles, en múltiplos de 20, al azar,.

Ayuda

En el dibujo cambian varios valores en cada ejecución. Por un lado aparecen los valores de los radios de los círculos, pero las coordenadas cx y cy de los círculos y el tamaño de la imagen svg deben calcularse mediante fórmulas.

  <p>Actualice la página para mostrar un nuevo doble rombo de 600 px de ancho.</p>

  <p>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
         width="600" height="300" viewBox="0 0 600 300" style="background-color: lightgray;">
      <polygon points="0,150 150,0 450,300 600,150 450,0 150,300"  stroke="green" stroke-width="5" fill="none" />
    </svg>
  </p>

Los polígonos SVG se establecen dando las coordenadas de los vértices en orden consecutivo:
El tamaño del dibujo SVG (width, height y viewBox) debe ser suficiente para abarcar el dibujo completo.

Variables (1) 14 - Avance de ficha

Escriba un programa que cada vez que se ejecute muestre una tirada de dados entre 1 y 6, al azar, y coloque la ficha en la posición correspondiente.

Ayuda

Los valores que cambian en cada ejecución son el valor del dado y la coordenada cx de la ficha.

  <p>
    <img src="img/4.svg" alt="4" width="140" height="140">
  </p>

  <p>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
      width="620" height="120" viewBox="-15 -15 620 120" style="background-color: white;" font-family="sans-serif">
      <rect x="0" y="0" width="100" height="100" stroke="black" stroke-width="1" fill="none" />
      <text x="50" y="80" text-anchor="middle" font-size="80" fill="lightgray">1</text>
      <rect x="100" y="0" width="100" height="100" stroke="black" stroke-width="1" fill="none" />
      <text x="150" y="80" text-anchor="middle" font-size="80" fill="lightgray">2</text>
      <rect x="200" y="0" width="100" height="100" stroke="black" stroke-width="1" fill="none" />
      <text x="250" y="80" text-anchor="middle" font-size="80" fill="lightgray">3</text>
      <rect x="300" y="0" width="100" height="100" stroke="black" stroke-width="1" fill="none" />
      <text x="350" y="80" text-anchor="middle" font-size="80" fill="lightgray">4</text>
      <rect x="400" y="0" width="100" height="100" stroke="black" stroke-width="1" fill="none" />
      <text x="450" y="80" text-anchor="middle" font-size="80" fill="lightgray">5</text>
      <rect x="500" y="0" width="100" height="100" stroke="black" stroke-width="1" fill="none" />
      <text x="550" y="80" text-anchor="middle" font-size="80" fill="lightgray">6</text>
      <circle cx="350" cy="50" r="30" stroke="black" stroke-width="2" fill="red" />
    </svg>
  </p>

La posición de la ficha (atributo cx) depende del valor obtenido en el dado:

Dado	1	2	3	4	5	6
Posición	50	150	250	350	450	550

Variables (1) 15 - Ruleta de la fortuna

Escriba un programa que cada vez que se ejecute muestre el giro de una flecha en una ruleta dividida en seis sectores iguales numerados del 1 al 6. Al abrirse la página, la flecha de la ruleta debe girar una vuelta completa y en la segunda vuelta quedar apuntando a uno de los valores numéricos, al azar (para llegar al 1 dará una vuelta completa). La velocidad de rotación de la flecha será constante (1.2 segundos por vuelta, 0.2 segundos por sector). Al detenerse la flecha se mostrará a la derecha de la ruleta el valor obtenido. 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).

Ayuda

Los valores que cambian en cada ejecución son los valores de los dados, la coordenada x de la explosión y el instante begin en que se hace visible.

      <g>
        <polygon points="100,40 115,55 105,55 105,150 115,160 105,160 100,155 95,160 85,160 95,150 95,55 85,55" stroke="black" stroke-width="2" fill="white" />
        <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 100 100" to="540 100 100" dur="1.8s" repeatCount="1" fill="freeze" />
      </g>
      <circle cx="100" cy="100" r="8" stroke="black" stroke-width="2" fill="#888" />
      <text x="250" y="130" text-anchor="middle" font-family="sans-serif" font-size="90" opacity="0">4
        <animate dur="0.1s" attributeName="opacity" from="0" to="1" begin="1.8s" fill="freeze" />
      </text>

La posición final de la flecha (atributo to) depende del valor a mostrar:

Resultado	1	2	3	4	5	6
Posición	360	420	480	540	600	660

El tiempo que dura la rotación de la flecha (atributo dur) y el tiempo que tarda en mostrarse el resultado (atributo begin) dependen del valor a mostrar:

Resultado	1	2	3	4	5	6
Tiempo	1.2	1.4	1.6	1.8	2.0	2.2

Variables (1) 21 - Cuatro círculos

Escriba un programa que cada vez que se ejecute muestre cuatro círculos contiguos con un radio entre 50 y 150 píxeles, al azar.

Ayuda

 <p>Estos círculos tienen 80 px de radio. Actualice la página para mostrar cuatro nuevos círculos.</p>

  <p>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
      width="660" height="180" viewBox="-10 -10 660 180" style="background-color: white;" font-family="sans-serif">
      <circle cx="80" cy="80" r="80" stroke="black" stroke-width="1" fill="red" />
      <circle cx="240" cy="80" r="80" stroke="black" stroke-width="1" fill="yellow" />
      <circle cx="400" cy="80" r="80" stroke="black" stroke-width="1" fill="green" />
      <circle cx="560" cy="80" r="80" stroke="black" stroke-width="1" fill="blue" />
    </svg>
  </p>

Los círculos SVG se establecen dando las coordenadas del centro y el radio del círculo:
El tamaño del dibujo SVG (width, height y viewBox) debe ser suficiente para abarcar el dibujo completo. El programa de muestra añade un margen de 10px alrededor.

Variables (1) 22 - Tres cuadrados

Escriba un programa que cada vez que se ejecute muestre tres cuadrados contiguos con un lado entre 50 y 150 píxeles, al azar.

Ayuda

  <p>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
      width="373" height="159" viewBox="-10 -10 373 159" style="background-color: white;">
      <rect x="0" y="0" width="82" height="82" fill="red" />
      <rect x="82" y="0" width="139" height="139" fill="green" />
      <rect x="221" y="0" width="132" height="132" fill="blue" />
    </svg>
  </p>

Los cuadrados SVG se establecen dando las coordenadas de las esquinas superior izquierda (que dependen del ancho de los cuadrados) y los tamaños de los cuadrados:
El tamaño del dibujo SVG (width, height y viewBox) debe ser suficiente para abarcar el dibujo completo. El programa de muestra añade un margen de 10px alrededor.

Variables (1) 23 - Tres círculos

Escriba un programa que cada vez que se ejecute muestre tres círculos contiguos con un radio entre 50 y 150 píxeles, al azar.

Ayuda

  <p>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
      width="574" height="320" viewBox="-10 -10 574 320" style="background-color: white;">
      <circle cx="150" cy="150" r="150" stroke="black" stroke-width="2" fill="red" />
      <circle cx="371" cy="150" r="71" stroke="black" stroke-width="2" fill="green" />
      <circle cx="498" cy="150" r="56" stroke="black" stroke-width="2" fill="blue" />
    </svg>
  </p>

Los círculos SVG se establecen dando las coordenadas del centro y el radio del círculo:
El tamaño del dibujo SVG (width, height y viewBox) debe ser suficiente para abarcar el dibujo completo. El programa de muestra añade un margen de 10px alrededor.

Variables (1) 25 - Ataque alienígena

Escriba un programa que cada vez que se ejecute muestre una tirada de 3 dados entre 1 y 6, al azar, y muestre un dibujo animado en el que una nave alienígena (entidad numérica 🛸 🛸) atraviese una rejilla. Cuando la nave pase por las casillas que corresponden a los valores acumulados indicados por los dados deben aparecer explosiones (entidad numérica 💥 💥) en las casillas.

Ayuda

Los valores que cambian en cada ejecución son los valores de los dados, la coordenada x de la explosión y el instante begin en que se hace visible.

  <p>
    <img src="img/3.svg" alt="3" width="120" height="120">
    <img src="img/4.svg" alt="4" width="120" height="120">
    <img src="img/1.svg" alt="1" width="120" height="120">
  </p>

  <p>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
      width="830" height="160" viewBox="-40 -50 830 160" style="background-color: white;" font-family="sans-serif">
      <polygon points="60,0 780,0 720,80 0,80" stroke="black" stroke-width="1" fill="none" />
      <text x="180" y="105" text-anchor="middle" font-size="20" fill="black">5</text>
      <text x="380" y="105" text-anchor="middle" font-size="20" fill="black">10</text>
      <text x="580" y="105" text-anchor="middle" font-size="20" fill="black">15</text>
      <line x1="100" y="0" x2="40" y2="80" stroke="black" stroke-width="1" fill="none" />
      ...
      <line x1="740" y="0" x2="680" y2="80" stroke="black" stroke-width="1" fill="none" />
      <text x="130" y="45" text-anchor="middle" font-size="20" fill="lightgray" opacity="0">
        &#x1f4a5;
        <animate dur="0.1s" attributeName="opacity" from="0" to="1" begin="0.8s" fill="freeze" />
      </text>
      <text x="290" y="45" text-anchor="middle" font-size="20" fill="lightgray" opacity="0">
        &#x1f4a5;
        <animate dur="0.1s" attributeName="opacity" from="0" to="1" begin="1.2s" fill="freeze" />
      </text>
      <text x="330" y="45" text-anchor="middle" font-size="20" fill="lightgray" opacity="0">
        &#x1f4a5;
        <animate dur="0.1s" attributeName="opacity" from="0" to="1" begin="1.3s" fill="freeze" />
      </text>
      <text x="0" y="20" text-anchor="middle" font-size="60" fill="lightgray">
        &#x1f6f8;
        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 -5" to="840 -5" begin="0.5s" dur="2s" repeatCount="1" fill="freeze" />
      </text>
    </svg>
  </p>;

La posición de la explosión (atributo x) depende del valor obtenido en el dado:

Dado	1	2	3	4	5	...
Posición	50	90	130	170	210	...

El momento en que se hace visible la explosión (atributo begin) depende del valor obtenido en el dado:

Dado	1	2	3	4	5	...
Tiempo	0.6	0.7	0.8	0.9	1	...

Ejercicios (sin formularios) - Variables (1) - Enunciados

Variables (1) 1 - Línea

Variables (1) 2 - Círculo de color

Variables (1) 3 - Tirada de dados

Variables (1) 4 - La carta más alta

Variables (1) 5 - Círculos de color

Variables (1) 11 - Dos cuadrados

Variables (1) 12 - Dos círculos

Variables (1) 13 - Doble rombo

Variables (1) 14 - Avance de ficha

Variables (1) 15 - Ruleta de la fortuna

Variables (1) 21 - Cuatro círculos

Variables (1) 22 - Tres cuadrados

Variables (1) 23 - Tres círculos

Variables (1) 25 - Ataque alienígena