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

En esta página se muestran una parte de las soluciones de los ejercicios Variables (1), concretamente el fragmento PHP, sin el principio ni el final de la página que se pueden dejar en fragmentos HTML.

Variables (1) 1 - Línea

<?php
$longitud = rand(10, 1000);

print "  <p>Longitud: $longitud</p>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n";
print "         width=\"" . $longitud . "px\" height=\"10px\">\n";
// forma alternativa
//print "         width=\"{$longitud}px\" height=\"10px\">\n";
print "      <line x1=\"1\" y1=\"5\" x2=\"$longitud\" y2=\"5\" stroke=\"black\" stroke-width=\"10\" />\n";
print "    </svg>\n";
print "  </p>\n";
print "\n";
?>

Variables (1) 2 - Círculo de color

Este ejercicio se puede hacer con tres variables, una para cada componente de color:

<?php
$r = rand(0, 255);
$g = rand(0, 255);
$b = rand(0, 255);

print "  <p>Color: rgb($r $g $b)</p>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n";
print "         width=\"100\" height=\"100\">\n";
print "      <circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"rgb($r $g $b)\" />\n";
print "    </svg>\n";
print "  </p>\n";
print "\n";
?>

Pero también se puede hacer con una sola variable que almacene el código de color completo:

<?php
$color = "rgb(" . rand(0, 255) . " " . rand(0, 255) . " " . rand(0, 255) . ")";

print "  <p>Color: $color</p>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n";
print "         width=\"100\" height=\"100\">\n";
print "      <circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"$color\" />\n";
print "    </svg>\n";
print "  </p>\n";
print "\n";
?>

Variables (1) 3 - Tirada de dados

<?php
$dado1 = rand(1, 6);
$dado2 = rand(1, 6);

print "  <p>\n";
print "    <img src=\"img/$dado1.svg\" alt=\"$dado1\" width=\"140\" height=\"140\">\n";
print "    <img src=\"img/$dado2.svg\" alt=\"$dado2\" width=\"140\" height=\"140\">\n";
print "  </p>\n";
print "\n";
print "  <p>Total: <span style=\"border: black 2px solid; padding: 10px; font-size: 300%\">" . $dado1 + $dado2 . "</span></p>\n";
print "\n";
?>

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

<?php
$a      = rand(1, 10);
$b      = rand(1, 10);
$c      = rand(1, 10);
$maximo = max($a, $b, $c);

print "  <p>\n";
print "    <img src=\"img/c$a.svg\" alt=\"$a\" height=\"200\">\n";
print "    <img src=\"img/c$b.svg\" alt=\"$b\" height=\"200\">\n";
print "    <img src=\"img/c$c.svg\" alt=\"$c\" height=\"200\">\n";
print "  </p>\n";
print "\n";
print "  <p>La carta más alta es un <strong>$maximo</strong>.</p>\n";
print "\n";
?>

Variables (1) 5 - Círculos de color

<?php
$rojo  = rand(64, 255);
$verde = rand(64, 255);
$azul  = rand(64, 255);

print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n";
print "          width=\"400\" height=\"300\" viewBox=\"-200 -120 400 300\">\n";
print "      <text x=\"100\" y=\"-90\" text-anchor=\"start\" font-size=\"20\">Verde: $verde</text>\n";
print "      <text x=\"-100\" y=\"-90\" text-anchor=\"end\" font-size=\"20\">Azul: $azul</text>\n";
print "      <text x=\"0\" y=\"155\" text-anchor=\"middle\" font-size=\"20\">Rojo: $rojo</text>\n";
print "      <path fill=\"rgb($rojo 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\" />\n";
print "      <path fill=\"rgb(0 $verde 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\" />\n";
print "      <path fill=\"rgb(0 0 $azul)\" 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\" />\n";
print "      <path fill=\"rgb($rojo $verde 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\" />\n";
print "      <path fill=\"rgb($rojo 0 $azul)\" 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\" />\n";
print "      <path fill=\"rgb(0 $verde $azul)\" 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\" />\n";
print "      <path fill=\"rgb($rojo $verde $azul)\" 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\" />\n";
print "    </svg>\n";
print "  </p>\n";
print "\n";
?>

Variables (1) 11 - Dos cuadrados

<?php
$lado  = rand(40, 120);
$doble = 2 * $lado;

print "  <p>Actualice la página para mostrar dos nuevos cuadrados de $lado px de lado.</p>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n";
print "         width=\"$doble\" height=\"$doble\" viewBox=\"0 0 $doble $doble\" style=\"background-color: lightgray;\">\n";
print "      <rect x=\"0\" y=\"0\" width=\"$lado\" height=\"$lado\" fill=\"red\" />\n";
print "      <rect x=\"$lado\" y=\"$lado\" width=\"$lado\" height=\"$lado\" fill=\"green\" />\n";
print "    </svg>\n";
print "  </p>\n";
print "\n";
?>

Variables (1) 12 - Dos círculos

<?php
$r = rand(30, 100);

print "  <p>Actualice la página para mostrar dos nuevos círculos de $r px de radio.</p>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n";
print "         width=\"" . 2 * $r . "\" height=\"" . 4 * $r . "\" viewBox=\"0 0 " . 2 * $r . " " . 4 * $r . "\" style=\"background-color: lightgray;\">\n";
print "      <circle cx=\"$r\" cy=\"$r\" r=\"$r\" fill=\"red\" />\n";
print "      <circle cx=\"$r\" cy=\"" . 3 * $r . "\" r=\"$r\" fill=\"blue\" />\n";
print "    </svg>\n";
print "  </p>\n";
print "\n";
?>

Otra solución empleando variables auxiliares:

<?php$r  = rand(30, 100);
$r2 = 2 * $r;
$r3 = 3 * $r;
$r4 = 4 * $r;

print "  <p>Actualice la página para mostrar dos nuevos círculos de $r px de radio.</p>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n";
print "         width=\"$r2\" height=\"$r4\" viewBox=\"0 0 $r2 $r4\" style=\"background-color: lightgray;\">\n";
print "      <circle cx=\"$r\" cy=\"$r\" r=\"$r\" fill=\"red\" />\n";
print "      <circle cx=\"$r\" cy=\"$r3\" r=\"$r\" fill=\"blue\" />\n";
print "    </svg>\n";
print "  </p>\n";
print "\n";
?>

Variables (1) 13 - Doble rombo

<?php
$lado = rand(20, 40) * 20;
$t    = $lado / 4;

print "  <p>Actualice la página para mostrar un nuevo doble rombo de $lado px de ancho.</p>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n";
print "         width=\"" . 4 * $t . "\" height=\"" . 2 * $t . "\" viewBox=\"0 0 " . 4 * $t . " " . 2 * $t . "\" style=\"background-color: lightgray;\">\n";
print "      <polygon points=\"0,$t $t,0 " . 3 * $t . "," . 2 * $t . " " . 4 * $t . ",$t " . 3 * $t . ",0 $t," . 2 * $t . "\"  stroke=\"green\" stroke-width=\"5\" fill=\"none\" />\n";
print "    </svg>\n";
print "  </p>\n";
print "\n";
?>

Variables (1) 14 - Avance de ficha

<?php
$dado = rand(1, 6);

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

Variables (1) 15 - Ruleta de la fortuna

<?php
$resultado = rand(1, 6);
$angulo    = $resultado * 60 + 300;
$tiempo    = $resultado * 0.2 + 1;

print "      <g>\n";
print "        <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\" />\n";
print "        <animateTransform attributeName=\"transform\" attributeType=\"XML\" type=\"rotate\" from=\"0 100 100\" to=\"$angulo 100 100\" dur=\"{$tiempo}s\" repeatCount=\"1\" fill=\"freeze\" />\n";
print "      </g>\n";
print "      <circle cx=\"100\" cy=\"100\" r=\"8\" stroke=\"black\" stroke-width=\"2\" fill=\"#888\" />\n";
print "      <text x=\"250\" y=\"130\" text-anchor=\"middle\" font-family=\"sans-serif\" font-size=\"90\" opacity=\"0\">\n";
print "        $resultado\n";
print "        <animate dur=\"0.1s\" attributeName=\"opacity\" from=\"0\" to=\"1\" begin=\"{$tiempo}s\" fill=\"freeze\" />\n";
print "      </text>\n";
?>

Variables (1) 21 - Cuatro círculos

<?php
$r     = rand(50, 150);
$ancho = 8 * $r + 20;
$alto  = 2 * $r + 20;

print "  <p>Estos círculos tienen $r px de radio. Actualice la página para mostrar cuatro nuevos círculos.</p>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n";
print "         width=\"$ancho\" height=\"$alto\" viewBox=\"-10 -10 $ancho $alto\" style=\"background-color: white;\">\n";
print "      <circle cx=\"$r\" cy=\"$r\" r=\"$r\" stroke=\"black\" stroke-width=\"1\" fill=\"red\" />\n";
print "      <circle cx=\"" . 3 * $r . "\" cy=\"$r\" r=\"$r\" stroke=\"black\" stroke-width=\"1\" fill=\"yellow\" />\n";
print "      <circle cx=\"" . 5 * $r . "\" cy=\"$r\" r=\"$r\" stroke=\"black\" stroke-width=\"1\" fill=\"green\" />\n";
print "      <circle cx=\"" . 7 * $r . "\" cy=\"$r\" r=\"$r\" stroke=\"black\" stroke-width=\"1\" fill=\"blue\" />\n";
print "    </svg>\n";
print "  </p>\n";
print "\n";
?>

Variables (1) 22 - Tres cuadrados

<?php
$c1    = rand(50, 150);
$c2    = rand(50, 150);
$c3    = rand(50, 150);
$ancho = $c1 + $c2 + $c3 + 20;
$alto  = max($c1, $c2, $c3) + 20;

print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n";
print "         width=\"$ancho\" height=\"$alto\" viewBox=\"-10 -10 $ancho $alto\" style=\"background-color: white;\">\n";
print "      <rect x=\"0\" y=\"0\" width=\"$c1\" height=\"$c1\" fill=\"red\" />\n";
print "      <rect x=\"$c1\" y=\"0\" width=\"$c2\" height=\"$c2\" fill=\"green\" />\n";
print "      <rect x=\"" . $c1 + $c2 . "\" y=\"0\" width=\"$c3\" height=\"$c3\" fill=\"blue\" />\n";
print "    </svg>\n";
print "  </p>\n";
print "\n";
?>

Variables (1) 23 - Tres círculos

<?php
$r1      = rand(50, 150);
$r2      = rand(50, 150);
$r3      = rand(50, 150);
$ancho   = 2 * $r1 + 2 * $r2 + 2 * $r3 + 20;
$alto    = 2 * max($r1, $r2, $r3) + 20;
$centros = max($r1, $r2, $r3);

print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n";
print "         width=\"$ancho\" height=\"$alto\" viewBox=\"-10 -10 $ancho $alto\" style=\"background-color: white;\">\n";
print "      <circle cx=\"$r1\" cy=\"$centros\" r=\"$r1\" stroke=\"black\" stroke-width=\"2\" fill=\"red\" />\n";
print "      <circle cx=\"" . 2 * $r1 + $r2 . "\" cy=\"$centros\" r=\"$r2\" stroke=\"black\" stroke-width=\"2\" fill=\"green\" />\n";
print "      <circle cx=\"" . 2 * $r1 + 2 * $r2 + $r3 . "\" cy=\"$centros\" r=\"$r3\" stroke=\"black\" stroke-width=\"2\" fill=\"blue\" />\n";
print "    </svg>\n";
print "  </p>\n";
print "\n";
?>

Variables (1) 24 - Ataque alienígena

El primer fragmento PHP dibuja los dados:

<?php
$d1 = rand(1, 6);
$d2 = rand(1, 6);
$d3 = rand(1, 6);

print "  <p>\n";
print "    <img src=\"img/$d1.svg\" alt=\"$d1\" width=\"120\" height=\"120\">\n";
print "    <img src=\"img/$d2.svg\" alt=\"$d2\" width=\"120\" height=\"120\">\n";
print "    <img src=\"img/$d3.svg\" alt=\"$d3\" width=\"120\" height=\"120\">\n";
print "  </p>\n";
print "\n";
?>

El segundo fragmento PHP dibuja las explosiones:

<?php
print "      <text x=\"" . $d1 * 40 + 10 . "\" y=\"45\" text-anchor=\"middle\" font-size=\"20\" opacity=\"0\">\n";
print "        &#x1f4a5;\n";
print "        <animate dur=\"0.1s\" attributeName=\"opacity\" from=\"0\" to=\"1\" begin=\"" . $d1 * 0.1 + 0.5 . "s\" fill=\"freeze\" />\n";
print "      </text>\n";
print "      <text x=\"" . ($d1 + $d2) * 40 + 10 . "\" y=\"45\" text-anchor=\"middle\" font-size=\"20\" opacity=\"0\">\n";
print "        &#x1f4a5;\n";
print "        <animate dur=\"0.1s\" attributeName=\"opacity\" from=\"0\" to=\"1\" begin=\"" . ($d1 + $d2) * 0.1 + 0.5 . "s\" fill=\"freeze\" />\n";
print "      </text>\n";
print "      <text x=\"" . ($d1 + $d2 + $d3) * 40 + 10 . "\" y=\"45\" text-anchor=\"middle\" font-size=\"20\" opacity=\"0\">\n";
print "        &#x1f4a5;\n";
print "        <animate dur=\"0.1s\" attributeName=\"opacity\" from=\"0\" to=\"1\" begin=\"" . ($d1 + $d2 + $d3) * 0.1 + 0.5 . "s\" fill=\"freeze\" />\n";
print "      </text>\n";
?>

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