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 - 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

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>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) 12 - 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

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>
    <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) 13 - 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

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>
    <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) 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 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 - 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 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 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 - Cuatro círculos

Variables (1) 12 - Tres cuadrados

Variables (1) 13 - Tres círculos

Variables (1) 14 - Avance de ficha

Variables (1) 15 - Ataque alienígena